16. 样式方案（下）

本节目标：掌握 Tailwind CSS 在 Next.js 中的完整集成流程，学会配置自定义主题、使用工具类，以及遵循最佳实践写出整洁的样式代码。

Tailwind CSS 是什么？

Tailwind CSS 是一个”实用优先”（utility-first）的 CSS 框架。它不提供预制的组件类（比如 .btn、.card），而是提供大量低级别的工具类（比如 flex、pt-4、text-center），让你直接在 HTML 里组合出想要的效果。

这种方式的好处是：不用纠结类名命名，不用在 CSS 文件和组件文件之间来回切换，样式改动也不会影响其他组件。

安装与配置

第一步：安装依赖

Next.js 16 默认使用 Tailwind CSS v4，安装方式如下：

npm install -D tailwindcss @tailwindcss/postcss

Note

如果你需要更广泛的浏览器支持（比如旧版浏览器），可以使用 Tailwind CSS v3。本节以 v4 为主，会标注与 v3 的差异。

第二步：配置 PostCSS

// postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

第三步：引入 Tailwind

/* app/globals.css */
@import 'tailwindcss';

第四步：在根布局中引入

// app/layout.tsx
import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh">
      <body>{children}</body>
    </html>
  )
}

到这里，你就可以在组件中使用 Tailwind 的工具类了。

Tailwind CSS v3 的差异

如果你使用 Tailwind CSS v3（需要更广泛的浏览器支持），配置方式略有不同：

# 安装 v3
npm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

v3 需要手动配置 content 路径：

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

v3 的全局 CSS 使用指令方式引入：

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tip

Next.js 16 默认推荐 Tailwind v4。v4 的配置更简洁，不需要 content 配置，性能也更好。除非有浏览器兼容需求，建议直接用 v4。

开始使用工具类

配置完成后，你就可以在 JSX 中直接使用 Tailwind 的工具类：

// app/page.tsx
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold text-blue-600">
        欢迎使用 Next.js!
      </h1>
      <p className="mt-4 text-gray-600">
        Tailwind CSS 让样式变得简单直观
      </p>
    </main>
  )
}

Tailwind 的工具类命名很直观：

text-4xl → 字体大小
font-bold → 字体粗细
text-blue-600 → 文字颜色
mt-4 → 上边距
p-24 → 内边距
flex → 弹性布局

自定义配置

扩展主题

在 tailwind.config.js（v3）中，你可以自定义颜色、字体、间距等：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a5f',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

在 Tailwind v4 中，自定义主题通过 CSS 变量和 @theme 指令实现：

/* app/globals.css */
@import 'tailwindcss';

@theme {
  --color-brand-500: #3b82f6;
  --font-sans: 'Inter', system-ui, sans-serif;
}

添加自定义工具类

v3 中可以通过插件扩展：

// tailwind.config.js
module.exports = {
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        '.text-shadow': {
          textShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
        },
      })
    },
  ],
}

响应式设计

Tailwind 的移动优先（mobile-first）响应式设计非常直观。默认样式适用于小屏幕，sm:、md:、lg:、xl: 前缀用于更大屏幕：

export default function Card() {
  return (
    <div className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-4">
      <h2 className="text-lg md:text-xl lg:text-2xl font-bold">
        响应式卡片
      </h2>
      <p className="text-sm md:text-base text-gray-600">
        这个卡片的宽度和文字大小会随屏幕变化
      </p>
    </div>
  )
}

断点对应关系：

sm: → 640px
md: → 768px
lg: → 1024px
xl: → 1280px
2xl: → 1536px

状态变体

Tailwind 支持各种交互状态的样式变体：

export default function Button() {
  return (
    <button className="px-4 py-2 bg-blue-500 text-white rounded-lg
      hover:bg-blue-600
      focus:ring-2 focus:ring-blue-300
      active:bg-blue-700
      disabled:opacity-50 disabled:cursor-not-allowed
      transition-colors duration-200">
      点击我
    </button>
  )
}

常用的状态前缀：

hover: → 鼠标悬停
focus: → 获得焦点
active: → 按下状态
disabled: → 禁用状态
dark: → 深色模式

深色模式

Tailwind 内置了深色模式支持。默认跟随系统设置，用 dark: 前缀：

export default function Header() {
  return (
    <header className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
      <nav className="p-4">
        <h1 className="text-xl font-bold">我的应用</h1>
      </nav>
    </header>
  )
}

如果想手动切换深色模式（而不是跟随系统），需要在 tailwind.config.js 中配置：

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

然后在 HTML 的 <html> 标签上手动添加或移除 dark 类。

最佳实践

1. 组件拆分优于长类名列表

当你发现一个元素的类名列表超过 5-6 个时，考虑拆分成更小的组件：

// 不推荐：类名太长
<div className="flex items-center justify-between p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow">

// 推荐：提取成组件
<Card>
  <CardHeader />
  <CardContent />
</Card>

2. 使用 `@apply` 提取重复样式

当某些工具类组合反复出现时，可以用 @apply 提取：

/* app/globals.css */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors;
  }
  
  .card {
    @apply p-6 bg-white rounded-xl shadow-md;
  }
}

Warning

不要过度使用 @apply。Tailwind 的设计初衷是直接在 HTML 中使用工具类。如果每个组件都用 @apply，就失去了 Tailwind 的意义。

3. 与 Turbopack 配合

从 Next.js 13.1 开始，Tailwind CSS 和 PostCSS 已经支持 Turbopack。Next.js 16 中 Turbopack 已是默认打包器，直接运行 next dev，样式更新速度更快。

4. 生产环境优化

Tailwind 在生产构建时会自动清除未使用的样式类（purge），最终的 CSS 文件只包含你实际用到的类，体积非常小。

常见问题

Q: Tailwind 和 CSS Modules 能一起用吗？

当然可以。Tailwind 处理大部分样式，CSS Modules 处理复杂的、工具类难以表达的场景。

Q: 类名太长怎么办？

可以用编辑器插件（比如 VS Code 的 Tailwind CSS IntelliSense）自动补全和预览。另外，合理的组件拆分能减少单个元素的类名数量。

Q: 如何覆盖第三方组件的样式？

使用 ! 前缀提高优先级，比如 !text-red-500。或者用 important 配置项在 tailwind.config.js 中全局设置。

样式方案（下）

16. 样式方案（下）

Tailwind CSS 是什么？

安装与配置

第一步：安装依赖

第二步：配置 PostCSS

第三步：引入 Tailwind

第四步：在根布局中引入

Tailwind CSS v3 的差异

开始使用工具类

自定义配置

扩展主题

添加自定义工具类

响应式设计

状态变体

深色模式

最佳实践

1. 组件拆分优于长类名列表

2. 使用 @apply 提取重复样式

3. 与 Turbopack 配合

4. 生产环境优化

常见问题

2. 使用 `@apply` 提取重复样式