Чтобы настроить Next.js с помощью Tailwind CSS, выполните следующие действия:

Шаг 1. Создайте новый проект Next.js

Если вы еще не создали проект Next.js, вы можете создать его с помощью create-next-app.

npx create-next-app@latest my-next-app
cd my-next-app

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

Внутри проекта Next.js установите Tailwind CSS вместе с необходимыми зависимостями.

npm install -D tailwindcss postcss autoprefixer

Шаг 3. Инициализируйте CSS Tailwind

Инициализируйте CSS Tailwind, создав файлы Tailwind.config.js и postcss.config.js.

npx tailwindcss init -p

В корне вашего проекта будут созданы файлы Tailwind.config.js и postcss.config.js.

Шаг 4. Настройте Tailwind.config.js

Замените содержимое файла Tailwind.config.js на следующую конфигурацию, чтобы включить Tailwind в соответствующих файлах:

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

Шаг 5. Добавьте CSS Tailwind в ваши CSS-файлы

В своем проекте откройте или создайте файл ./styles/globals.css и добавьте следующие строки для импорта базы, компонентов и утилит Tailwind:

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

Шаг 6. Запустите сервер разработки

Теперь запустите сервер разработки, чтобы увидеть CSS Tailwind в действии:

npm run dev

Теперь ваш проект Next.js должен быть настроен с помощью Tailwind CSS. Вы можете использовать служебные классы Tailwind в своих компонентах для их стилизации.

Пример использования

Вот пример использования Tailwind CSS на странице Next.js (pages/index.js):

export default function Home() {
  return (
    

      

        Welcome to Next.js with Tailwind CSS!
      
    
  );
}

Благодаря этой настройке вы теперь можете приступить к созданию приложения Next.js с использованием фреймворка CSS Tailwind, ориентированного на утилиты!