跳到主内容
知识库 阅读摘记

设计令牌为什么要走 CSS 变量

把颜色写成 rgb 通道变量,一套类名就能支撑多主题。

3 分钟 已稳定
设计 CSS

如果颜色直接写死成十六进制,换主题就必须改组件。

正确做法是三层结构:

  1. 主题预设定义 x 与 x-rgb 两组变量
  2. Tailwind 配置里用 rgb(var(--x-rgb) / alpha)
  3. 组件只写语义类名(bg、ink、line)

这样新增一套配色只需要追加一个预设,组件零改动。