2026 年 4 月 10 日 · 工程实践
Tailwind CSS 主题定制：从配色到设计令牌
把设计稿里的颜色、字体、间距沉淀成 Tailwind 的设计令牌，让样式不再散落在 class 里，而成为团队共享的语言。
Tailwind CSS 设计系统
Tailwind 的默认色板开箱即用，但真实项目几乎总要定制。定制不是把颜色写死在 bg-[#123456] 里，而是建立一套设计令牌。
在 tailwind.config 中定义令牌
在 theme.extend.colors 中定义语义化色板，比如 primary、success、danger，并让每一档（50–900）都有明确用途。这样改主题只需动一处配置。
组件的样式收敛
配合 @layer components，把反复出现的按钮、卡片样式抽象成 .btn-primary 之类的复合类，避免同一段 class 字符串在模板里到处复制。
设计令牌的价值在于：它让"设计语言"变成了代码里可引用的常量，而不是某个设计师脑中的印象。