Tailwind 主题与设计 Token
通过 theme 扩展把品牌色与间距收敛为 token，避免页面散落魔法数字。
#type / concept
#status / growing
#tech / dev / frontend
#resource / css
[!info] 关联笔记
Tailwind 主题与设计 Token
这个概念为什么出现
设计师给出品牌色与 12 级灰；若页面写满 bg-[#0F6]，设计系统名存实亡，暗色与多品牌也无法管理。
[!abstract] 一句话理解 theme/token 是设计系统配置面；业务优先写
bg-brand-600而不是裸 hex。
实践
- 扩展 colors/spacing/radius/fontSize
- 命名遵循团队约定
- 可映射到 CSS 变量做运行时主题
- 任意值
[]当逃逸舱而非主路
本节总结
先 token，后页面；utility 调用 token，不发明私有色。
自测题
- 为什么任意值应少用？
参考答案
绕过 scale 会导致不一致与难收敛；设计审查更困难。