Tailwind CSS

Tailwind CSS — это CSS-фреймворк, основанный на утилитах, который полностью совместим с Next.js. Это руководство покажет, как установить Tailwind CSS в ваше приложение Next.js.

Установка Tailwind

Установите необходимые пакеты Tailwind CSS:

npm install -D tailwindcss @tailwindcss/postcss postcss

Полезно знать: Если вы используете CLI create-next-app для создания проекта, Next.js предложит установить Tailwind и автоматически настроит проект.

Настройка Tailwind

Создайте файл postcss.config.mjs в корне вашего проекта и добавьте плагин @tailwindcss/postcss в конфигурацию PostCSS:

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Начиная с Tailwind v4, конфигурация по умолчанию не требуется. Если вам все же нужно настроить Tailwind, вы можете следовать официальной документации для настройки глобального CSS-файла.

Также доступны CLI для обновления и руководство, если у вас есть проект на Tailwind v3.

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

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

@import 'tailwindcss';

В пользовательском файле приложения (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.