Tailwind CSS 4 主题变量实战

Tailwind CSS 4 把配置从 JavaScript 搬到了 CSS 里，主题变量用起来更自然。这篇文章记录几个在真实项目里总结的用法。

用 CSS 变量定义主题

@theme static {
  --font-sans: 'OPPO Sans SC', 'PingFang SC', system-ui, sans-serif;
}

语义化颜色优于固定色值

组件里不要写死 #409eff 这类色值，而是使用语义类，例如 bg-default、text-muted、border-default。这样切换主题或调整品牌色时，组件不需要改动。

明暗模式的正确姿势

• 只在语义 token 层做切换，组件层不感知模式
• 避免在组件里写 dark: 前缀处理大面积样式

设计系统的一致性，来自约束，而不是来自更多的选择。