Установите Tailwind CSS с приложением Create React

Приложение Create React не поддерживает пользовательские конфигурации PostCSS и несовместимо со многими важными инструментами экосистемы PostCSS, такими как `postcss-import`.

Мы настоятельно рекомендуем использовать Vite, Parcel, Next.js, или Remix вместо Create React App. Они обеспечивают эквивалентный или лучший опыт разработки, но с большей гибкостью, что дает вам больше контроля над настройкой Tailwind и PostCSS.

Создайте свой проект
Начните с создания нового проекта React с помощью Create React App v5.0+, если оно еще не настроено.
Terminal
```
npx create-react-app my-projectcd my-project
```
Установите Tailwind CSS
Установите tailwindcss через npm, а затем запустите команду init, чтобы сгенерировать файл tailwind.config.js.
Terminal
```
npm install -D tailwindcss@3npx tailwindcss init
```

Настройте пути к шаблону

Добавьте пути ко всем файлам вашего шаблона в файл tailwind.config.js.

tailwind.config.js

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

Добавьте директивы Tailwind в свой CSS
Добавьте директивы @tailwind для каждого из слоев Tailwind в ваш файл ./src/index.css.
index.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Начните процесс сборки
Запустите процесс сборки с помощью npm run start.
Terminal
```
npm run start
```
Начните использовать Tailwind в своем проекте
Начните использовать служебные классы Tailwind для оформления своего контента.
App.js
```
export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}
```

Создайте свой проект

Установите Tailwind CSS

Настройте пути к шаблону

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

Начните процесс сборки

Начните использовать Tailwind в своем проекте