CSS 方案

2026年9月6日

框架不绑死一种 CSS。日常项目里我更常用 Tailwind；组件要强隔离时用 CSS Modules；历史项目可能还有 Sass。下面按「会碰到的」列一遍。

Tailwind CSS

原子类，写在 className 上。create-next-app 勾选即可。漏选了再补（以 Tailwind v4 为例）：

pnpm add tailwindcss @tailwindcss/postcss postcss
bash

postcss.config.mjs：

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;
js

app/globals.css：

@import "tailwindcss";
css

组件里：

export default function Title() {
  return <h1 className="text-3xl font-bold underline">Hello</h1>;
}
tsx

类名记不住就靠编辑器插件和官方文档。bg-red-500 就是背景色，不必先背完整清单。

CSS Modules

文件名 *.module.css，类名会被编成带 hash 的唯一串，类似 Vue 的 scoped。

/* card.module.css */
.wrap {
  background: #111;
}
css
import styles from "./card.module.css";

export default function Card() {
  return <div className={styles.wrap}>卡片</div>;
}
tsx

不用额外配置。适合不想上 Tailwind、又怕全局类名撞车的组件。

Sass

框架认 .scss / .sass，依赖要自己装：

pnpm add -D sass
bash

全局变量可以写在 next.config：

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$brand: #0ea5e9;`,
  },
};

export default nextConfig;
ts

全局 CSS

app/globals.css 在根 layout.tsx 里 import 一次，选择器对整站生效。重置、CSS 变量、第三方库的 CSS 放这里。

import "./globals.css";

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

不要在随意页面重复引入同一份全局文件，容易打出重复规则。

内联 style

<div style={{ backgroundColor: "crimson", padding: 8 }}>紧急</div>
tsx

动态值、一次性微调可以用。复杂布局、伪类、媒体查询还是交给 class 或 CSS 文件。

css-in-js

styled-components 一类能跑，但和 RSC 不对付：样式要在服务端收集再插进 <head>，得自己挂 registry，还要在 next.config 打开 compiler.styledComponents。新项目没历史包袱，我不会首选这条路。

若必须用，按官方「ServerStyleSheet + useServerInsertedHTML」那套注册，并且带样式的组件标 'use client'。细节见 CSS-in-JS。

怎么选

方案适合
Tailwind新项目、和设计 token 一起迭代
CSS Modules组件库、要强隔离
Sass已有变量/mixin 资产
全局 CSSreset、主题变量
style极少的动态值
css-in-js旧代码迁移，新项目谨慎

下一篇把 CSR / SSR / SSG 和水合放在一张图里看。

参考文档