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

Настройка вашего проекта React с помощью Tailwind CSS очень проста и состоит всего из нескольких шагов. В этом руководстве вы пошагово изучите подход к установке Tailwind CSS в свой проект React и начнете использовать классы CSS Tailwind для стилизации.

Шаг 1: Создание вашего проекта React

Создание нового проекта React.js — это самый первый шаг. Самый простой способ создать новый проект — использовать скрипт create-react-app в командной строке.

npx create-react-app react-app-with-tailwind

Теперь перейдите в рабочий каталог.

cd react-app-with-tailwind

Если все пойдет хорошо, вы сможете увидеть свой проект реакции в веб-браузере при выполнении следующей команды.

npm run start

Шаг 2: Установите Tailwind CSS

Теперь установите tailwindcss и его одноранговые зависимости через npm, а затем запустите команду init, чтобы сгенерировать как tailwind.config.js, так и postcss. .config.js.

npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init -p

Tailwind создаст два файла. Вам нужно внести небольшие изменения, чтобы он хорошо работал для нашего проекта Reactjs.

  • tailwind.config.js
  • postcss.config.js

Шаг 4: Настройка файлов шаблонов

Вам нужно указать путь к нашим файлам проекта Reactjs, добавив следующий параметр конфигурации в tailwind.config.js. Обязательно добавьте пути ко всем файлам шаблонов в файл tailwind.config.js.

module.exports = { 
     content: [ 
      "./src/**/*.{js,jsx,ts,tsx}",
     ], 
     theme: { 
       extend: {}, 
    }, 
     plugins: [], 
}

Шаг 5: Добавьте директивы Tailwind в свой CSS

Теперь добавьте @tailwinddirectives для каждого слоя Tailwind в файл ./src/index.css.

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

Вот и все. Вы можете идти! Давайте воспользуемся классами CSS Tailwind в нашем основном компоненте React в App.js.

Шаг 6: Используйте Tailwind CSS в своем приложении React

Добавьте следующий код в App.js. Запустите веб-сервер разработки с помощью следующей команды. Теперь вы должны увидеть следующий результат в браузере.

npm run start

Вы можете найти код для этого руководства в этом репозитории GitHub.

Первоначально опубликовано на https://letmefail.com 3 июля 2022 г.