Tailwind v4 主题系统与设计令牌实战

从 config 到 @theme

Tailwind v4 把主题配置从 JS 搬到了 CSS。在 @theme 块里定义变量，工具类会自动生成：

@theme {
  --color-garden-bg: #0a0e17;
  --color-garden-surface: #111827;
}

这样 bg-garden-bg、text-garden-surface 就可以直接用，无需在 tailwind.config 里维护 colors 映射。

暗色优先

我的站点是暗色优先，所以把暗色令牌作为默认值，浅色模式通过 @media (prefers-color-scheme: light) 覆盖。比起双份配色表，这种方式更省心。