Skip to content

建立 2026-09-15 更新 2026-09-15

主題客製

預設色盤與字級夠用來練手。真的做產品時，品牌色、字體、圓角應該進 設計 token，讓全站 bg-brand 指向同一個值。v4 把這件事放回 CSS：用 @theme，不必再維護一份 tailwind.config.js。

在 CSS 裡定義 token

@import "tailwindcss";

@theme {
  --color-brand: #0284c7;
  --color-brand-dark: #0369a1;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --radius-box: 1rem;
}

定義之後就能當 utility 用：

<section class="rounded-box bg-brand font-display text-white">
  品牌區塊
</section>

--color-* 會生出 bg-brand、text-brand、border-brand；--font-* 會生出 font-display。名稱對得上官方的 theme namespace，IntelliSense 才會補完。細節見 Theme variables。

需要沿用舊的 JS config 時，可以 @config "./tailwind.config.js"，遷移期才需要，新專案不必。

任意值 vs token

偶爾用一次的數值，可以用方括號任意值：top-[117px]、bg-[#1b1b18]。同一組色碼出現第二次，就該升成 @theme 變數。任意值解決「這一次」；token 解決「全站一致」。

@apply 什麼時候用

@apply 能把一串 utility 收進自訂 class：

@layer components {
  .btn-brand {
    @apply rounded-lg bg-brand px-4 py-2 font-semibold text-white;
  }
}

官方建議優先抽 元件（一個 Button 元件裡仍寫 utility），@apply 留給要和既有 CSS 共存、或設計系統必須是 class 名稱的情況。不要為了「HTML 看起來比較乾淨」就把所有畫面都 @apply 回 CSS，那等於放棄 utility-first。

建議先看的影片

官方系列第七集 Customizing Your Design System 講的是 v2 的 tailwind.config.js。看「為什麼要改色盤、刪掉用不到的色」這個動機即可；v4 請改寫在上面的 @theme。

相關資料