Установка Tailwind CSS в приложении Next.js

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:

postcss.config.mjs

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

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

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

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

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

app/globals.css

@import 'tailwindcss';

В корневом макете (app/layout.tsx) импортируйте таблицу стилей globals.css, чтобы применить стили ко всем маршрутам в вашем приложении.

import type { Metadata } from 'next'

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

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

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

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

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

После установки 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.

Установка Tailwind CSS в приложении Next.js