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，方便以後替換整套配色。