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}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Вам не нужно изменять postcss.config.js.

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

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

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

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

import type { Metadata } from 'next'
 
// These styles apply to every route in the application
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>
  )
}

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

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

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.

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/app/building-your-application/styling/tailwind-css