此網站需要開啟JavaScript
JavaScript is required

0%

跳至主要內容

本網站提供便捷鍵:Alt 加 U 跳至頁首、Alt 加 C 跳至主要內容、Alt 加 Z 跳至頁尾。

Tailwind 設計 tokens 怎麼定才不會亂
2026-03-22

Tailwind 設計 tokens 怎麼定才不會亂

顏色、字級、間距 — 三件事定義好,後面 80% 的樣式問題會自己消失。

在 BlockStudio 我們的 tailwind.config.js 大致分三層:基礎 tokens(color、font、spacing)、語意 tokens(primary / secondary / surface)、元件 tokens(btn-padding、card-radius)。每一層的更動會影響下一層,但不會反向污染。

這篇文章解釋為什麼這個分層在 7 個專案落地後仍然好維護,以及哪些常見錯誤(例如直接在 component 寫 hex)會讓設計系統慢慢失控。