Tailwind CSS является неплохим инструментом для работы над стилями компонентов React-приложений. В этом руководстве рассматривается пошаговая установка Tailwind CSS с процессором PostCSS для React.

Введение

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

Почему Tailwind?

1. Скорость: можно быстро создавать стильные и оригинальные компоненты пользовательского интерфейса без необходимости использования дополнительных CSS-файлов.
2. Настройка: Tailwind обладает широкими возможностями настройки, что позволяет вам адаптировать стили к потребностям любого проекта.
3. Масштабируемость: идеально подходит для проектов любого размера: от небольших веб-сайтов до корпоративных приложений.

Шаг 1: Установка React

Необходимо установить приложение Create React App и перейти в папку нового проекта my-app:

npx create-react-app my-app 
cd my-app

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

Tailwind CSS, Post CSS, Autoprefixer и их зависимости устанавливаются в каталог нового проекта с помощью npm:

npm install tailwindcss postcss-cli autoprefixer

Следует помнить, что приложение Create React не поддерживает пользовательские конфигурации PostCSS и несовместимо со многими важными инструментами в экосистеме PostCSS, в том числе с postcss-import. Разработчики Tailwind CSS настоятельно рекомендуют использовать Vite , Parcel , Next.js или Remix вместо Create React App. Эти библиотеки предоставлют разработчику схожий или лучший набор инструментов, давая горазддо больше возможностей по сравнению с Tailwind и PostCSS.

Шаг 3: Настройка Tailwind

Конфигурация Tailwind CSS создается командой:

npx tailwindcss init

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

/** @type { import('tailwindcss').Config } */ 
module .exports = { 
  content : [ 
    "./src/**/*.{js,jsx,ts,tsx}" , 
  ], 
  theme : { 
    extend : { }, 
  }, 
  plugins : [], 
}

Шаг 4: Настройка PostCSS

Файл postcss.config.js в корневом каталоге проекта должен содержать следующие строки:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

Шаг 5: Оригинальные стили

Необходимо создать CSS-файл, например, styles.css в каталоге src и добавить директивы Tailwind:

/* src/styles.css */ 
@import  'tailwindcss/base'; 
@import  'tailwindcss/components'; 
@import  'tailwindcss/utilities';

Шаг 6: Импорт стилей в React

Файл styles.css нужно импортировать в src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css'; // Import your styles
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Шаг 7: Запуск сервера

Чтобы отслеживать работу Tailwind CSS и React в проекте, нужно запустить локальный сервер:

npm run start

Заключение

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

Спасибо за внимание.