Tailwind CSS в React Js

Tailwind CSS — это в первую очередь CSS-фреймворк, ориентированный на утилиты, который помогает в разработке очень крутых пользовательских интерфейсов. Он обеспечивает лучшую гибкость для разработчиков интерфейса, предлагая множество компонентов дизайна пользовательского интерфейса.

Это помогает украсить HTML, и любой может легко создавать более привлекательные макеты с помощью встроенных классов tailwind. Tailwind предлагает множество предварительно разработанных виджетов пользовательского интерфейса, которые экспоненциально увеличивают скорость разработки пользовательского интерфейса.

Это руководство по Tailwind CSS будет полезным примером CSS React Tailwind для начинающих разработчиков React. Особенно тем, кто собирается увидеть слияние React и Tailwind CSS.

Установка Tailwind CSS Module

Выполните данную команду, чтобы установить Tailwind CSS.

npm install -D tailwindcss
npm install @heroicons/react
npm install @headlessui/react

Создание файла конфигурации Tailwind

На этом шаге мы создадим файл tailwind.config.js ; поэтому выполните следующую команду, чтобы сгенерировать файл конфигурации Tailwind.

npx tailwindcss init
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Добавление директивы Tailwind

Теперь вам нужно перейти к файлу App.css , в этом файле мы разместим директивы @tailwind.

@tailwind base;
@tailwind components;
@tailwind utilities;

Скомпилируйте CSS Tailwind

Кроме того, выполните следующую команду, чтобы запустить CLI попутного ветра для сканирования файлов шаблонов React на наличие классов и сборки CSS.

npx tailwindcss -i ./src/App.css -o ./src/styles/output.css --watch

Создание компонента с Tailwind

Чтобы проверить, реализован ли Tailwind CSS, мы собираемся использовать компонент Tailwind Card в React js.

Откройте файл App.js и добавьте в него указанный код.

import './App.css'
import React from 'react'

function App() {
  return (
    <div
      class={`h-screen w-full flex items-center justify-center bg-gray-300 flex-col`}
    >
      <label class="toggleDarkBtn">
        <input type="checkbox" />
        <span class="slideBtnTg round"></span>
      </label>
      <div class="max-w-sm rounded overflow-hidden bg-gray-100 p-5 rounded-lg mt-4 text-white dark:bg-gray-900">
        <img
          class="w-full"
          src="https://v1.tailwindcss.com/img/card-top.jpg"
          alt="Sunset in the mountains"
        />
        <div class="px-6 py-4">
          <div class="text-gray-800 dark:text-gray-200 font-bold text-xl mb-2">
            The Coldest Sunset
          </div>
          <p class="text-gray-800 dark:text-gray-200">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Voluptatibus quia, nulla! Maiores et perferendis eaque,
            exercitationem praesentium nihil.
          </p>
        </div>
        <div class="px-6 pt-4 pb-2">
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #photography
          </span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #travel
          </span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #winter
          </span>
        </div>
      </div>
    </div>
  )
}
export default App

Запустите React-сервер

На последнем шаге мы запустим сервер разработки react, используя данную команду:

npm start

Откройте URL для просмотра приложения в браузере:

http://localhost:3000

Заключение

В этой подробной статье мы узнали, как реализовать Tailwind CSS версии 3 в приложении React js с нуля. Мы надеемся, что это пошаговое руководство поможет вам создавать более качественные и согласованные пользовательские интерфейсы React за значительно меньшее время.