本指南将引导您如何在 Next.js 应用中安装 Tailwind CSS v3。
须知： 有关最新的 Tailwind 4 设置，请参阅 Tailwind CSS 设置说明。
安装 Tailwind CSS 及其对等依赖项，然后运行 init 命令以生成 tailwind.config.js 和 postcss.config.js 文件：
pnpm add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -pnpm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -pyarn add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -pbun add -D tailwindcss@^3 postcss autoprefixer
bunx tailwindcss init -p在您的 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: [],
}将 Tailwind 指令添加到您的全局 CSS 文件中：
@tailwind base;
@tailwind components;
@tailwind utilities;在您的根布局中导入此 CSS 文件：
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}import './globals.css'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}/** @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: [],
}将 Tailwind 指令添加到您的全局 CSS 文件中：
@tailwind base;
@tailwind components;
@tailwind utilities;在您的 pages/_app.js 文件中导入此 CSS 文件：
import '@/styles/globals.css'
export default function MyApp({ 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>
}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>
}从 Next.js 13.1 开始，Tailwind CSS 和 PostCSS 都支持 Turbopack。