从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;
}/* 全局