从0死磕全栈之Next.js 中的 CSS 方案全解析：Global CSS、CSS Modules、Tailwind CSS 怎么选？

🎨 为什么 Next.js 的 CSS 支持这么强大？

在传统 React 项目中，我们常常为样式方案头疼：

• 用原生 CSS？怕全局污染；
• 用 CSS Modules？要手动配置；
• 用 Tailwind？得搭一整套工具链......

而 Next.js 内置了对多种主流 CSS 方案的开箱即用支持 ！
无需配置 Webpack，无需安装额外 loader，直接写就能用！

本文将通过真实代码示例，带你掌握三种核心方案：

1. Global CSS（全局样式）
2. CSS Modules（模块化样式）
3. Tailwind CSS（原子化 CSS）

并告诉你：什么时候该用哪种？

---

🧱 一、Global CSS：适合全局重置和基础样式

✅ 适用场景

• 浏览器样式重置（如 reset.css）
• 定义全局字体、颜色、布局
• 第三方 UI 库的全局样式（如 Ant Design、Bootstrap）

⚠️ 重要规则

在 Next.js 中，Global CSS 文件只能在 pages/_app.js 中引入！

不能在页面组件或普通组件中直接 import './style.css'，否则会报错。

🔧 实战步骤

1. 创建全局样式文件

/* styles/globals.css */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f8f9fa;
  color: #333;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 全局按钮样式 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

2. 在 _app.js 中引入

// pages/_app.js
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

✅ 现在所有页面都会自动应用 globals.css 中的样式！

---

🔒 二、CSS Modules：组件级样式，避免命名冲突

✅ 适用场景

• 组件私有样式（如按钮、卡片、表单）
• 需要作用域隔离，防止样式污染
• 不想用原子化 CSS 的团队

🔧 使用方法（超简单！）

只需将 CSS 文件命名为 [name].module.css，Next.js 自动启用 CSS Modules！

示例：创建一个可复用的按钮组件

/* components/Button.module.css */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}

.primary {
  background-color: #0070f3;
  color: white;
}

.primary:hover {
  background-color: #0055b3;
}

.danger {
  background-color: #ff4136;
  color: white;
}

.danger:hover {
  background-color: #cc332a;
}

// components/Button.js
import styles from './Button.module.css';

export default function Button({ children, variant = 'primary', onClick }) {
  return (
    <button
      className={`${styles.btn} ${styles[variant]}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

在页面中使用

// pages/index.js
import Button from '../components/Button';

export default function Home() {
  return (
    <div className="container">
      <h1>按钮示例</h1>
      <p>
        <Button>默认按钮（primary）</Button>
      </p>
      <p>
        <Button variant="danger">危险按钮</Button>
      </p>
    </div>
  );
}

✅ 效果：每个类名会被自动哈希（如 btn__abc123），完全隔离，永不冲突！

---

⚡ 三、Tailwind CSS：原子化 CSS，开发效率起飞！

✅ 适用场景

• 快速原型开发
• 设计系统统一（颜色、间距、响应式）
• 喜欢"写 HTML 即写样式"的开发者

🔧 集成步骤（Next.js 官方推荐）

第 1 步：安装依赖

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

第 2 步：配置 tailwind.config.js

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

📌 content 告诉 Tailwind 去哪些文件里扫描 class，避免打包无用样式！

第 3 步：在 globals.css 中引入 Tailwind

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

/* 你也可以保留自己的全局样式 */
body {
  @apply bg-gray-50 text-gray-800;
}

第 4 步：在组件中直接使用

// pages/index.js
import Button from '../components/Button';

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <h1 className="text-3xl font-bold text-gray-800 mb-6">欢迎使用 Tailwind!</h1>
      
      <div className="space-x-4">
        <button className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
          蓝色按钮
        </button>
        <button className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
          红色按钮
        </button>
      </div>

      <div className="mt-8 p-6 bg-white rounded-lg shadow">
        <h2 className="text-xl font-semibold">卡片示例</h2>
        <p className="mt-2 text-gray-600">Tailwind 让响应式布局变得超简单！</p>
      </div>
    </div>
  );
}

✅ 效果：无需写 CSS 文件，所有样式通过 class 实现，响应式、主题、悬停状态一行搞定！

---

🆚 四、三种方案怎么选？一张表说清楚

方案	优点	缺点	推荐场景
Global CSS	简单直接，适合全局设置	容易命名冲突，不适合组件样式	重置样式、全局布局、第三方库
CSS Modules	作用域隔离，无冲突，兼容传统 CSS	需要写 .module.css 文件，类名较长	中大型项目、团队协作、传统 CSS 用户
Tailwind CSS	开发快、一致性高、响应式方便	学习成本（需记 class 名）、HTML 可能臃肿	快速开发、设计系统统一、个人项目

💡 最佳实践建议：

• 全局样式用 Global CSS
• 组件样式用 CSS Modules 或 Tailwind
• 新项目强烈推荐 Tailwind CSS（Next.js 官方深度集成）

---

🛠️ 五、常见问题解答

Q1：能在同一个项目中混用吗？

✅ 完全可以！

例如：用 Global CSS 做 reset，用 Tailwind 写页面布局，用 CSS Modules 写复杂业务组件。

Q2：Tailwind 会导致 HTML 很长吗？

是的，但可通过 自定义组件 封装常用样式：

const PrimaryButton = ({ children }) => (
  <button className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
    {children}
  </button>
);

Q3：支持 Sass / Less 吗？

支持，但需额外安装插件（如 sass）。Next.js 默认只内置对上述三种方案的零配置支持。

---

🎯 总结

Next.js 让 CSS 开发变得前所未有的简单：

• Global CSS → 全局一把梭
• CSS Modules → 组件样式隔离
• Tailwind CSS → 原子化高效开发

🌟 记住一句话 ：
"全局用 Global，组件用 Modules 或 Tailwind" ------ 你的样式从此井井有条！

---