https://benzhub.github.io/tags/%E8%A8%AD%E8%A8%88%E7%B3%BB%E7%B5%B1/Recent content in 設計系統 on BenzHubHugozh-TWWed, 02 Sep 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/033-design-system-build/Wed, 02 Sep 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/033-design-system-build/<blockquote> <p>前面幾篇我們把 <strong>設計 Token</strong>、元件模式、暗色模式、響應式一塊塊拆開來看;這一篇要把它們<strong>組裝成一個整體</strong>。我們會從 0 開始,用 <strong>TailwindCSS v4</strong> 的三大 CSS-first 指令——<code>@theme</code> 定 Token、<code>@utility</code> 建語意 utility、<code>@custom-variant</code> 建品牌變體——搭出一套能支援<strong>白牌與多品牌主題切換</strong>的設計系統,並談元件層、文件化與可維護性策略,讓一人專案到大型團隊都能穩健成長。</p> </blockquote>