В этом руководстве мы расскажем, как настроить или добавить Tailwind CSS в приложение React JS. Мы также покажем Вам пример, как создать простой компонент с помощью фреймворка Tailwind CSS.

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

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

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

Как добавить и использовать Tailwind CSS v3 в приложении React Js

1. Шаг 1: Создание нового приложения React
2. Шаг 2: Добавление модуля Tailwind CSS
3. Шаг 3: Создание файла конфигурации Tailwind
4. Шаг 4: Добавление директив Tailwind
5. Шаг 5: Компиляция CSS Tailwind
6. Шаг 6: Создание компонента с помощью Tailwind
7. Шаг 7: Запуск React-приложения

Создание нового приложения React

Откройте командную строку, введите команду используя create-react-app tool:

  
npm install create-react-app --global
 

На этом этапе мы запустим команду и создадим новый проект.

 
npx create-react-app react-demo
 

Войдите в папку своего приложения:

 
cd react-demo
 

Добавление модуля Tailwind CSS

После того, как Вы вошли в корень своего проекта Вам необходимо ввести и выполнить данную команду, чтобы установить tailwindcss.

 
npm install -D tailwindcss
  

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

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

 
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 Tailwind для сканирования файлов шаблонов 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-приложения

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

  
npm start
 

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

  
http://localhost:3000
 

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