CSS 样式方案
Next.js 支持一系列成熟的 CSS 方案：Tailwind CSS、CSS Modules、全局 CSS、外部样式表、Sass、CSS-in-JS。这一章重点讲前四种常用方式。
Tailwind CSS（推荐）
create-next-app 默认就帮你装好了 Tailwind。手动安装也很简单：
npm install -D tailwindcss @tailwindcss/postcss
在 postcss.config.mjs 启用：
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
在全局 CSS 里导入：
/* app/globals.css */
@import 'tailwindcss';
在根布局里导入 CSS：
import './globals.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="zh-CN">
<body>{children}</body>
</html>
);
}
接下来，随手写工具类：
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">欢迎使用 Next.js!</h1>
</main>
);
}
CSS Modules
适合组件级定制样式，避免全局类名冲突。文件命名为 *.module.css：
/* blog.module.css */
.blog {
padding: 24px;
}
import styles from './blog.module.css';
export default function Page() {
return <main className={styles.blog} />;
}
Next.js 会生成唯一类名，跨文件同名也不会冲突。
全局 CSS
用在真正全局的样式上（比如 Tailwind 基础层、reset）：
/* app/global.css */
body {
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}
import './global.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="zh-CN">
<body>{children}</body>
</html>
);
}
提示：导航时，全局样式不会自动被卸载，可能彼此叠加造成冲突。建议只放「真正全局」的样式。
外部样式表
第三方包的 CSS 可以在 app 目录里任意位置 import：
import 'bootstrap/dist/css/bootstrap.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="zh-CN">
<body className="container">{children}</body>
</html>
);
}
排序与合并
生产构建时 Next.js 会合并并代码分割 CSS。CSS 的最终顺序取决于你的 import 顺序。
例如：
import { BaseButton } from './base-button'; // 内部 import base-button.module.css
import styles from './page.module.css';
顺序是 base-button.module.css → page.module.css。
实践建议：
- CSS
import集中在单一入口文件。 - 全局样式、Tailwind 入口都放在应用根部。
- 大多数样式用 Tailwind，组件私有样式用 CSS Modules，极少用全局 CSS。
- 禁用
sort-imports之类自动排序 import 的 lint 规则，以免影响 CSS 顺序。 - 开发和构建下 CSS 顺序可能略有差异，务必通过
next build验证。
开发与生产
next dev下 CSS 热更新，秒级反馈。next build把所有 CSS 压缩、拆包，路由只加载所需的最小集合。- 生产禁用 JS 仍能加载 CSS；开发下需要 JS 才能 Fast Refresh。
