Использование 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 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 class="prose">
  ...
</article>