Tailwind CSS
Tailwind CSS 是一个实用优先的 CSS 框架，完全兼容 Next.js。本指南将引导你完成在 Next.js 应用中安装 Tailwind CSS 的过程。
安装 Tailwind
安装必要的 Tailwind CSS 包：
npm install -D tailwindcss @tailwindcss/postcss postcss小知识：如果使用
create-next-appCLI 创建项目，Next.js 会询问是否安装 Tailwind 并自动配置项目。
配置 Tailwind
在项目根目录创建 postcss.config.mjs 文件，并将 @tailwindcss/postcss 插件添加到 PostCSS 配置中：
/** @type {import('tailwindcss').Config} */
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}从 Tailwind v4 开始，默认情况下无需任何配置。如需配置 Tailwind，可参考 官方文档 配置全局 CSS 文件。
如果你有现有的 Tailwind v3 项目，还有 升级 CLI 和 指南 可供参考。
导入样式
将 Tailwind CSS 指令 添加到应用的 全局样式表 中，Tailwind 会通过这些指令注入生成的样式，例如：
@import 'tailwindcss';在 自定义应用文件 (pages/_app.js) 中导入 globals.css 样式表，将样式应用到应用中的每个路由。
// 这些样式会应用到应用中的每个路由
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}// 这些样式会应用到应用中的每个路由
import '@/styles/globals.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}使用类名
安装 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。