Использование Tailwind CSS вместе с Next.js

Для начала создаем проект в Next.js

npx create-next-app my-project
cd my-project

Устанавливаем Tailwind Css и зависимости

npm install tailwindcss@latest postcss@latest autoprefixer@latest

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

npx tailwindcss init -p

Эта команда создает два файла: tailwind.config.js и postcss.config.js

Настраиваем Tailwind, для того чтобы удалить неиспользуемые стили в продакшн

В файле tailwind.config.js – меняем опцию purge

purge: ['./pages/**/*.js', './components/**/*.js']

Или можно настроить более детально, например так:

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: ['./pages/**/*.js', './components/**/*.js'],
  },
  // ...
}

где enabled – включает или выключает неиспользуемые стили.

Не рекомендуется использовать enabled: true – при разработке.

Подключаем Tailwind CSS

Заменяем стили в global.css, на:

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

Можно также добавить инструмент в Visual Studio Code

Под названием Tailwind CSS IntelliSense

Разворачиваем Tailwind Typography, если нужно

Устанавливаем:

npm install @tailwindcss/typography

В tailwind.config.js прописываем

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Использование его:

<article className="prose">
  ...
</article>

Для установки плагина форм

Вводим команду:

npm install @tailwindcss/forms

И добавляем в файл tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}