如何在 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

配置 Tailwind v3

在 `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>
  )
}

使用类

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

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。