Tailwind CSS v4 实战：CSS-first 配置与零运行时

v4 带来了什么

Tailwind CSS v4 是一次架构级重写：基于新的 Oxide 引擎（Rust），构建速度大幅提升，且配置从 JS 迁移到 CSS。对老用户来说，最大的心智转变是"不再写 tailwind.config.js"。

CSS-first 配置

过去在 tailwind.config.js 里定义主题，现在直接写在 CSS 的 @theme 块：

@import "tailwindcss";

@theme {
  --color-brand: #6366f1;
  --font-display: "Space Grotesk", sans-serif;
  --spacing-18: 4.5rem;
}

定义后即可直接使用 bg-brand、font-display、p-18，无需重启构建。

零配置内容检测

v4 自动扫描项目文件，不再需要手写 content 数组。删掉配置，它照样只打包用到的类。

容器查询内置

无需插件，直接用 @container：

<div class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3">
    <!-- 根据容器宽度而非视口宽度响应 -->
  </div>
</div>

自定义变体

用 @custom-variant 定义语义化变体，暗色模式就是典型例子：

@custom-variant dark (&:where(.dark, .dark *));

之后 dark:bg-black 就会匹配 .dark 作用域，而不是默认的媒体查询。

性能要点

• 零运行时：所有类在构建期生成，浏览器不加载额外 JS。
• 原生 CSS 变量：主题令牌就是 CSS 变量，可在运行时用 JS 读写，做主题切换极其顺滑。
• 按需生成：只有实际出现在代码里的类名才会进入产物。

迁移建议

1. 先升级依赖，把 @tailwind base/components/utilities 三行替换为一行 @import "tailwindcss"。
2. 把 config.js 里的 theme 搬进 @theme。
3. 插件（如 typography）改用 @plugin "..." 引入。

v4 的方向很明确：让 CSS 回归 CSS。配置、主题、变体都在样式文件里表达，工具链更薄，构建更快。