Tailwind 中国传统色最好的用法，不是在组件里随手写一次性 HEX，而是把色彩转成设计 tokens。先为传统色名建立稳定 primitive tokens，再映射到语义 UI 角色，并用 CSS variables 或 DTCG JSON 作为设计与开发之间的共享来源。
不要把中国色 HEX 直接散落在组件里
Tailwind 很容易写 arbitrary color values，但如果代码里到处都是 bg-[#c23a2b] 和 text-[#f5f0eb]，后续维护会很困难。中国传统色应该被命名、记录并映射到设计角色里，才能在改版时继续复用。
建议先建立 atlas 色彩 primitive tokens，再建立 UI 语义 tokens。例如朱红可以作为 primitive color 保留，但组件里使用 brand-primary 或 accent-festival。这样既保留文化色名，也不会让每个按钮都绑定到单一历史色块。
推荐的 Tailwind token 结构
实用结构可以从 primitives 开始：chinese.zhu-hong、chinese.yue-bai、chinese.mo-se、chinese.tian-shui-bi、chinese.qing-dai。这些命名应保持稳定，并尽量匹配 atlas slug 或拼音，方便设计师和开发者讨论同一个颜色。
然后建立 semantic aliases：brand.primary、surface.canvas、surface.muted、text.default、text.inverse、border.subtle、accent.gold、accent.qing、state.attention。组件使用语义层，文档解释每个角色对应哪个中国传统色。
Tailwind v4 与 CSS variable 工作流
现代 Tailwind 项目中，CSS custom properties 是很干净的交付层。可以定义 --color-chinese-zhu-hong、--color-chinese-yue-bai、--color-surface-ink 等变量，再通过 Tailwind theme tokens 或 utilities 暴露出来。
这也方便做深色 UI。中国传统色深色界面不应该只有黑和红，可以使用墨、青黛、月白、低亮度金色和传统色 tint，让 SEO、resource 或产品页面各自有氛围，同时保持文字对比度。
从调色板到生产 UI
从场景调色板开始，而不是直接暴露 567 色全库。国潮 UI 可用朱红、金、墨、月白；宋式 dashboard 可用天水碧、月白、缃色和墨灰；茶品牌可用竹青、茶褐、月白和暖中性色。
如果团队只需要网页交付文件，CSS 与 Tailwind Token Pack 更聚焦；如果还需要 Figma Variables、ASE、Procreate、AI prompts、乾隆色、敦煌色和节气色板，Complete Design Pack 更适合。
相关调色板
把这些颜色接入 CSS、Tailwind 与 Tokens
先复制页面中的 HEX 与 CSS 示例；需要完整 567 色、DTCG、Tailwind 和结构化 JSON 时，再使用开发者包。
FAQ
Tailwind 里应该怎么使用中国传统色？
先为中国色名建立稳定 primitive tokens，再映射到 brand、surface、text、border、accent 等语义角色，最后在组件中使用语义 tokens。
Tailwind 组件应该直接用拼音色名吗？
通常不建议。拼音或 atlas slug 适合放在 primitive tokens 里，组件层最好使用语义 tokens，方便以后替换整套配色。