Для начала создаем проект в 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>