Skip to content

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

Utility-first

Utility-first（工具類優先）的意思是：每個 class 只做一件很小、對得上 CSS 屬性的事。flex 就是 display: flex，px-4 就是左右 padding，text-sky-600 就是字色。版面由這些小 class 組合出來，而不是先發明 .hero-card 再去 CSS 檔裡寫一長段。

和傳統寫法差在哪

傳統做法是幫區塊取語意名稱，樣式寫在別的檔案：

<button class="primary-button">送出</button>

.primary-button {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #0284c7;
  color: white;
  font-weight: 600;
}

同一套樣式用 Tailwind，會直接寫在標記上：

<button class="rounded-lg bg-sky-600 px-4 py-2 font-semibold text-white hover:bg-sky-500">
  送出
</button>

好處是改這一顆按鈕時不必切檔、不必猜 .primary-button 還被哪些頁面共用。代價是 HTML 的 class 會變長，也因此官方建議裝 Tailwind CSS IntelliSense，用自動完成降低記名稱的負擔。

什麼時候還該抽元件

同一組 class 在專案裡出現第三次，就該抽成元件（React／Vue 元件、或後端 template partial），而不是先急著寫 @apply。官方立場是：重複發生在「標記」層，用你本來就在用的元件系統處理；@apply 留給真的要抽成 CSS 類別的少數情況。見 主題客製 末段。

建議先看的影片

官方系列第二集 The Utility-First Workflow 在畫面裡把一張卡片從空白疊到完成，適合搭配本頁建立直覺。安裝步驟已過時，請忽略片中的 PostCSS 設定，只看「在 HTML 上組 class」的節奏。

更多官方與社群影片見 影音教學。

相關資料