Tailwind CSS

Tailwind CSS — это CSS-фреймворк, основанный на утилитах, который отлично работает с Next.js.

Установка Tailwind

Установите пакеты Tailwind CSS и выполните команду init для генерации файлов tailwind.config.js и postcss.config.js:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Настройка Tailwind

В файле tailwind.config.js укажите пути к файлам, которые будут использовать классы Tailwind CSS:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Обратите внимание на добавление директории `app`.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // Или если используется директория `src`:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Файл postcss.config.js не требует изменений.

Импорт стилей

Добавьте директивы Tailwind CSS, которые Tailwind будет использовать для внедрения сгенерированных стилей, в глобальную таблицу стилей вашего приложения, например:

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

В файле пользовательского приложения (pages/_app.js) импортируйте таблицу стилей globals.css, чтобы применить стили ко всем маршрутам приложения.

// Эти стили применяются ко всем маршрутам приложения
import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

// Эти стили применяются ко всем маршрутам приложения
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

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

После установки Tailwind CSS и добавления глобальных стилей вы можете использовать утилитарные классы Tailwind в своём приложении.

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

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

Начиная с Next.js 13.1, Tailwind CSS и PostCSS поддерживаются в Turbopack.