1 分钟阅读
TailwindCSS 路线 07：主题与设计 Token——从暗色模式走向“设计系统”
把颜色、边框、背景、阴影、圆角固化成 Token；用 CSS 变量承载主题，用 Tailwind 工具类消费 Token，让换肤/品牌色变成低成本操作。
- TailwindCSS
- 主题
- Design Tokens
- 工程化
AI 共读让 Noob 帮你提炼要点 / 答疑
当你的项目开始有“产品化”需求时，往往会出现：
- 需要多主题（浅色/深色只是开始）
- 需要品牌色（不同客户/不同子站）
- 需要统一组件的边框、阴影、圆角、间距
如果你仍然用“到处写 text-stone-600”的方式，会很痛苦。
01 目标与验收#
目标：把 UI 的关键视觉约束收敛到一组 Token（CSS 变量），并让组件只消费 Token。
验收：
- 换主题时，只改变量值，组件不改
- 新页面的灰度、边框、底色不会漂
02 Token 的粒度：从少到多#
建议从 8 个开始（足够覆盖大多数场景）：
- 背景：
--background、--surface、--surface-2 - 文本：
--text、--muted - 边框：
--border - 强调：
--accent - 聚焦：
--focus-ring
再按需要增加：
--danger、--success--shadow（或固定 shadow 规范）
03 组件消费方式（推荐）#
组件中尽量用：
bg-[var(--surface)]border-[var(--border)]/80text-[color:var(--text)]
少量需要“语义色”的地方，再用 Tailwind 颜色（比如危险提示）。
04 练习：做一个“主题切换”并验证 3 个组件#
切换主题后验证：
- Button（primary/secondary）
- Input（default/error）
- Card（hover）
观察：你是否做到了“只改变量不改组件”？
05 小结#
把 Token 做对，你的 Tailwind 会越写越轻松。下一篇我们讲可访问性：focus、对比度、语义结构，这些不是加分项，而是组件可用性的底线。
相关阅读
基于内容相似度 + 标签/系列加权
- 1 分钟TailwindCSS 从入门到精通（学习与实战路线）
TailwindCSS 路线 09：性能与迁移——CSS 体积、复用策略、从传统 CSS 平滑过渡
从“能写”到“精通”的关键在工程实践：如何避免样式膨胀、如何做可维护复用、以及如何把老项目的 CSS 逐步迁移到 Tailwind。
- TailwindCSS
- 性能
- 迁移
- 3 分钟TailwindCSS 从入门到精通（学习与实战路线）
TailwindCSS 路线 00A：它为何诞生——历史、优势与缺点、以及 AI 时代是否更有价值
从“语义化 class + 手写 CSS”到“工具类优先”的转变并非偶然。讲清 Tailwind 的问题域、真实优势、常见反对意见，以及在 AI 编程时代它为什么反而更吃香。
- TailwindCSS
- 历史
- 工程化
- 1 分钟TailwindCSS 从入门到精通（学习与实战路线）
TailwindCSS 路线 04：表单与状态——输入框、校验、禁用、加载一套打完
真实业务离不开表单。用 Tailwind 把 Input/Select/Textarea/Checkbox 的默认、focus、error、disabled、dark 状态一次做成可复用规范。
- TailwindCSS
- 表单
- 组件设计
- 1 分钟TailwindCSS 从入门到精通（学习与实战路线）
TailwindCSS 路线 10：毕业项目——从 0 做一个可交付的小产品 UI（完整串联）
用一个“设置面板 + 列表/详情 + 表单”的小产品，把 Token、响应式模板、组件模式、排版、动效与可访问性全部串起来，形成你自己的 Tailwind 基建模板。
- TailwindCSS
- 项目
- 实战