Tailwind CSS

本指南将引导你了解如何在 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: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

styles/globals.css

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

在你的 pages/_app.js 文件中导入 CSS 文件：

pages/_app.js

import '@/styles/globals.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

使用类名

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

pages/index.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。