Как настроить Tailwind CSS с React.js и Next.js?

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

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

Начните с создания нового проекта React с помощью Create React App v5.0+ , если он еще не создан.

Если вы интегрируете для Next.js, используйте новый проект Next.js, если он еще не создан. Наиболее распространенный подход - использовать Create Next App.

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

Установите tailwindcss через npm, а затем выполните команду init для создания файла tailwind.config.js.

Установите tailwindcss и его одноранговые зависимости через npm, а затем выполните команду init для генерации tailwind.config.js и postcss.config.js.

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

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

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

4. Добавьте директивы Tailwind в ваш CSS

Добавьте директивы @tailwind для каждого из слоев Tailwind в ваш файл ./src/index.css.

Добавьте директивы @tailwind для каждого слоя Tailwind в файл globals.css.

5. Запустите процесс сборки

Запустите процесс сборки с помощью npm run start.

Запустите процесс сборки с помощью npm run dev.

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

Начните использовать утилитные классы Tailwind для стилизации вашего контента.