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

配置 Tailwind v3

在 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: [],
}

将 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>
}

与 Turbopack 的使用

截至 Next.js 13.1，Tailwind CSS 和 PostCSS 都支持 Turbopack。