https://benzhub.github.io/tags/design-token/Recent content in Design Token on BenzHubHugozh-TWTue, 01 Sep 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/032-design-tokens/Tue, 01 Sep 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/032-design-tokens/<blockquote> <p>上一篇《shadcn/ui》我們看到它換膚的祕密,就在那組語意化的 <strong>CSS 變數</strong>——<code>--primary</code>、<code>--background</code>、<code>--radius</code>… 這些其實有個更宏大的名字:<strong>設計 Token(Design Tokens)</strong>。這一篇要帶你系統性地理解:如何在 <strong>TailwindCSS v4</strong> 用 <code>@theme</code> 把 Token 變成「<strong>同時是 CSS 變數、又是 utility class</strong>」的單一真相源頭,並用 primitive / semantic 分層、<code>--alpha()</code> 函式與任意值引用,讓品牌、明暗、多主題都能一鍵切換。</p> </blockquote>