Next.js 中文网

主题

Tailwind CSS v3 ​

本指南将指导你如何在 Next.js 应用中安装 Tailwind CSS v3。

¥This guide will walk you through how to install Tailwind CSS v3 in your Next.js application.

需要了解：有关最新的 Tailwind 4 设置，请参阅 Tailwind CSS 设置说明。

¥Good to know: For the latest Tailwind 4 setup, see the Tailwind CSS setup instructions.

安装 Tailwind v3 ​

¥Installing Tailwind v3

安装 Tailwind CSS 及其依赖，然后运行 init 命令生成 tailwind.config.js 和 postcss.config.js 文件：

¥Install Tailwind CSS and its peer dependencies, then run the init command to generate both tailwind.config.js and postcss.config.js files:

bash
pnpm add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p
bash
npm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p
bash
yarn add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p
bash
bun add -D tailwindcss@^3 postcss autoprefixer
bunx tailwindcss init -p

配置 Tailwind v3 ​

¥Configuring Tailwind v3

在 tailwind.config.js 文件中配置模板路径：

¥Configure your template paths in your tailwind.config.js file:

将 Tailwind 指令添加到你的全局 CSS 文件：

¥Add the Tailwind directives to your global CSS file:

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

在根布局中导入 CSS 文件：

¥Import the CSS file in your root layout:

tsx
import './globals.css'

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

使用类 ​

¥Using classes

安装 Tailwind CSS 并添加全局样式后，你可以在应用中使用 Tailwind 的实用程序类。

¥After installing Tailwind CSS and adding the global styles, you can use Tailwind's utility classes in your application.

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

与 Turbopack 一起使用 ​

¥Usage with Turbopack

从 Next.js 13.1 开始，Turbopack 支持 Tailwind CSS 和 PostCSS。

¥As of Next.js 13.1, Tailwind CSS and PostCSS are supported with Turbopack.