样式化你的 Next.js 应用：CSS 模块、Tailwind CSS 和全局样式

样式化你的 Next.js 应用：CSS 模块、Tailwind CSS 和全局样式

作者：码力无边

到目前为止，我们已经为应用搭建了坚实的骨架：页面结构清晰，导航流畅。但一个没有样式的应用就像一座没有装修的毛坯房——功能齐全，却缺乏灵魂。在本文中，我们将深入探讨 Next.js 中几种主流且强大的样式化方案，帮助你为应用穿上华丽的外衣。

在组件化的世界里，CSS 的全局性有时会成为一个痛点。一个地方的样式不经意间就可能“污染”了另一个地方。Next.js 充分考虑了这一点，提供了多种方案来解决这个问题，从完全隔离到全局共享，应有尽有。

方案一：全局样式表 (Global Styles)

每个项目都需要一些基础的、贯穿始终的样式。比如 CSS Reset、全局字体设置、链接颜色、或是引入像 Bootstrap 这样的外部 CSS 框架。Next.js 约定了一个专门的地方来处理这些全局样式。

如何实现？

1. 在你的项目中找到 pages/_app.tsx 文件。这个文件是一个特殊的组件，Next.js 用它来初始化所有页面。你可以把它看作是所有页面的“根布局”。
2. 创建一个全局样式文件，例如在根目录创建一个 styles 文件夹，并在其中添加 globals.css。
3. 在 _app.tsx 文件中导入这个 CSS 文件。

styles/globals.css

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

pages/_app.tsx

import '../styles/globals.css'; // 导入全局样式
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

关键点： 全局样式文件只能在 _app.tsx 文件中导入。这是 Next.js 的硬性规定，旨在防止你在不经意间将全局样式引入单个组件，从而造成样式冲突。

• 优点：简单直接，适合定义网站的基础外观和引入第三方 CSS 库。
• 缺点：全局作用域的性质意味着你必须小心命名冲突（BEM 等命名规范在此依然有用）。
• 最佳场景：设置基础样式、CSS 变量、引入 normalize.css 或外部 UI 框架。

方案二：CSS 模块 (CSS Modules) - 组件级样式隔离

这是 Next.js 内置并推荐的、用于编写组件级 CSS 的方式。它巧妙地解决了全局命名冲突的问题，让你的 CSS 样式默认只作用于引入它的那个组件。

如何实现？

只需将你的 CSS 文件命名为 [name].module.css 的格式即可。

让我们来创建一个按钮组件和它的专属样式：

components/Button.module.css

/* 这个 .button 类名只在这个文件中有效 */
.button {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.button:hover {
  background-color: #005bb5;
}

components/Button.tsx

import styles from './Button.module.css'; // 导入 CSS 模块

interface ButtonProps {
  children: React.ReactNode;
}

export default function Button({ children }: ButtonProps) {
  return <button className={styles.button}>{children}</button>;
}

背后原理：在构建时，Next.js 会自动处理 Button.module.css 文件。它会将 .button 这个类名转换成一个全局唯一的哈希字符串（例如 Button_button__1_a2_b），并将这个映射关系注入到你导入的 styles 对象中。最终在浏览器中渲染的 HTML 会是 <button class="Button_button__1_a2_b">...，从而实现了样式的完美隔离。

• 优点：默认作用域隔离，彻底告别样式冲突；仍然使用原生 CSS 语法，学习成本低。
• 缺点：每个组件都需要一个对应的 CSS 文件，可能会增加文件数量；动态样式处理不如 CSS-in-JS 方案灵活。
• 最佳场景：绝大多数组件的样式编写。它是功能、性能和开发体验之间的完美平衡点。

方案三：Tailwind CSS - 原子化/功能类优先

Tailwind CSS 是一个近年来极其流行的“功能类优先 (Utility-First)”的 CSS 框架。你不是为组件编写专门的 CSS 类，而是直接在 JSX 中组合大量预设的、单一用途的原子类来构建样式。

如何实现？

create-next-app 已经将 Tailwind CSS 的集成做得天衣无缝。在创建项目时，选择使用 Tailwind CSS，脚手架会自动为你完成所有配置。

让我们用 Tailwind 重写上面的按钮组件：

components/Button.tsx (使用 Tailwind CSS)

interface ButtonProps {
  children: React.ReactNode;
}

export default function Button({ children }: ButtonProps) {
  return (
    <button
      className="
        bg-blue-600 text-white font-bold 
        py-2 px-4 rounded
        hover:bg-blue-800 transition-colors
      "
    >
      {children}
    </button>
  );
}

看到区别了吗？我们没有写一行额外的 CSS 代码！所有的样式都通过组合 className 来实现。

• bg-blue-600：设置背景色。
• text-white：设置文字颜色。
• py-2 px-4：设置垂直和水平内边距。
• rounded：设置圆角。
• hover:bg-blue-800：设置鼠标悬浮时的背景色。

为什么它如此受欢迎？

1. 极高的开发效率：你几乎不需要离开你的 JSX 文件，减少了上下文切换。
2. 无需为类名费心：告别了给各种小组件想名字的烦恼。
3. 最终打包体积小：Tailwind 会在生产构建时扫描你的代码，移除所有未被使用的 CSS 类，最终的 CSS 文件通常非常小。
4. 设计系统约束：它鼓励使用预设的间距、颜色等，有助于保持整个应用 UI 的一致性。

• 优点：开发速度快，打包体积小，易于维护和保持一致性。
• 缺点：HTML/JSX 可能会因为大量类名而显得“臃肿”；需要记忆一些原子类的名称（但智能提示插件能很好地解决这个问题）。
• 最佳场景：几乎适用于任何规模的项目，尤其适合快速原型开发和需要高度定制化 UI 的项目。

总结与选择建议

那么，我应该如何选择？

• 对于初学者：从 CSS 模块 开始，它能让你在享受作用域隔离好处的同时，继续使用你熟悉的标准 CSS 语法。
• 追求极致效率：如果你不介意初期的学习曲线，Tailwind CSS 绝对是当下的最优解之一，它将极大地提升你的开发速度和体验。
• 组合使用：在实际项目中，我们常常会组合使用这些方案。例如，使用 globals.css 定义基础样式和字体，然后使用 Tailwind CSS 或 CSS 模块来构建具体的组件。

现在，你的工具箱里已经装满了强大的样式化工具。是时候去实践，为你的 Next.js 应用打造一个既美观又独特的用户界面了。在下一篇文章中，我们将学习如何处理图片、字体等静态资源，并利用 Next.js 的内置优化功能让它们飞起来！