配置进了 CSS

Tailwind v4 不再需要 tailwind.config.js。主题直接写在 CSS 里：

@theme inline {
  --color-surface: var(--brand-surface);
  --radius-card: 12px;
}

@theme 会自动生成对应的工具类，命名空间决定前缀：--color-* 生成 bg-* 和 text-*，--radius-* 生成 rounded-*。

inline 是什么意思

@theme inline 会把值直接内联进生成的工具类，而不是让它引用一层变量。当令牌本身是 var(...) 时，这是必要的，否则会出现间接引用链带来的意外覆盖。

迁移检查表

  • 颜色一定要用语义命名，不要沿用 gray-100 这种位置命名
  • 字阶记得同时给出 --text-*--line-height
  • 圆角、间距能用令牌就用令牌，别在组件里写魔法数字

结论

配置语言的改变其实是个好事：设计令牌和样式产出终于在同一个文件里了，评审时不需要来回跳。