如何在你的 Next.js 应用中安装 Tailwind CSS v3

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

值得注意的是：关于最新的 Tailwind 4 设置，请参阅 Tailwind CSS 设置说明。

安装 Tailwind v3

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

pnpm add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

npm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

yarn add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

bun add -D tailwindcss@^3 postcss autoprefixer
bunx tailwindcss init -p

配置 Tailwind v3

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在你的全局 CSS 文件中添加 Tailwind 指令：

app/globals.css

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

在你的根布局中导入 CSS 文件：

app/layout.tsx

TypeScript

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

使用类名

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

app/page.tsx

TypeScript

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

与 Turbopack 一起使用

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