Tailwind CSS 插件 daisyUI 介紹：只用類別快速打造 UI

Tailwind CSS 以工具類別為基礎，雖然自由度高，但每次都要組合按鈕/卡片/模態等元件會變得繁瑣。 daisyUI 在 Tailwind 之上提供「元件類別 + 主題」的插件，能大幅縮短設計與樣式化的時間。

安裝與設定方式因使用的框架（Next.js、Vite、Remix 等）略有差異。本文假設已完成安裝。 若需從頭開始，請參考 daisyUI 官方安裝說明：

官方文檔安裝指南

daisyUI 是什麼？

Commandbox 광고

daisyUI 是 Tailwind CSS 的插件，將常用 UI 模式以「元件類別」的形式提供。也就是說，像按鈕/卡片/模態等需要逐一組合 Tailwind 工具類別的元件，現在可以直接使用 btn、card 等有意義的短類別。

  • 元件類別：btn、card、navbar、modal 等可直接使用的 UI 模式
  • 主題系統：透過 data-theme="light" 等方式輕鬆切換主題
  • 與 Tailwind 的自然結合：可使用 Tailwind 工具類別進行微調

首次接觸時最直觀的優點只有一個。

  • 渲染結果相似，但 HTML 更簡潔

以下示例展示「Primary 按鈕」與「卡片 + 動作按鈕」在使用 daisyUI 與不使用時的 HTML 差異。

使用 daisyUI 與不使用時：結果相同，HTML 會縮減多少？

1) Primary 按鈕

(A) 只用 Tailwind — 需要組合多個工具類別來完成樣式。

<button
  class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
         bg-blue-600 text-white shadow-sm hover:bg-blue-700
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
         disabled:opacity-50 disabled:pointer-events-none"
>
  Primary
</button>

(B) 使用 daisyUI — 用更短的元件類別表達同一個按鈕。

<button class="btn btn-primary">Primary</button>

重點不是「Tailwind 無法做到」，而是「daisyUI 把重複的組合預設封裝起來」，讓你先快速填滿畫面，再用 Tailwind 進行細節調整。

2) 卡片 + 動作按鈕

(A) 只用 Tailwind — 需要為卡片容器/標題/內容/動作區域各自組合類別。

<div class="w-96 rounded-2xl bg-white shadow-xl">
  <div class="p-6">
    <h2 class="text-lg font-semibold">Card title</h2>
    <p class="mt-2 text-sm text-slate-600">
      同樣形式的卡片在多處使用時，類別會變長且重複度增加。
    </p>
    <div class="mt-4 flex justify-end">
      <button
        class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
               bg-blue-600 text-white shadow-sm hover:bg-blue-700
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
      >
        確認
      </button>
    </div>
  </div>
</div>

(B) 使用 daisyUI — 先顯示「卡片的角色」類別，必要時再用 Tailwind 補充。

<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Card title</h2>
    <p>
      daisyUI 提供重複 UI 結構的元件類別，讓 HTML 更簡潔。
    </p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">確認</button>
    </div>
  </div>
</div>

總結：daisyUI 能

  • 縮短類別長度，提升可讀性
  • 統一重複 UI 模式的預設值
  • 快速確保主題一致性

下一節將說明「主題」為何特別方便。

主題系統：為何暗黑模式/品牌主題更輕鬆？

Commandbox 광고

daisyUI 的強項是「主題切換」。它預設提供基於 CSS 變數的主題，整個應用的顏色/背景/文字色調會自動變化。

亮色與暗色主題切換圖

在 HTML 中套用主題

<html data-theme="light">
  <body>
    <button class="btn btn-primary">Hello</button>
  </body>
</html>

用 JavaScript 切換主題範例

const html = document.documentElement;

function toggleTheme() {
  const next = html.getAttribute("data-theme") === "dark" ? "light" : "dark";
  html.setAttribute("data-theme", next);
}

此方式的優點：

  • 透過全域主題切換，無需為每個元件重新指定顏色
  • 在專案初期即可快速穩定設計系統（顏色/色調）

一起使用 Tailwind 與 daisyUI！

daisyUI 先快速確定「基本形狀」，再用 Tailwind 進行「細節」調整。

例如，為按鈕加入間距/對齊/響應式：

<button class="btn btn-primary w-full sm:w-auto px-6">
  保存
</button>
  • btn btn-primary：元件樣式（保持一致）
  • w-full sm:w-auto px-6：佈局、響應式、微調

何時特別適合使用 daisyUI？

  • MVP / 原型設計：想快速完成「好看」的畫面
  • 儀表板 / 管理頁面：重複 UI 模式（表格、卡片、輸入表單）多
  • 小型團隊 / 個人開發：無法投入大量時間於設計系統
  • 主題重要的服務：需要輕鬆管理暗黑模式或品牌皮膚

需要注意的地方

  • 類別命名會加入 daisyUI 的風格（如 btn、card、navbar 等）→ 需檢查是否與團隊慣例衝突
  • 若設計需求極為特殊，預設元件樣式可能成為限制；但大多數情況可用 Tailwind 工具類別覆蓋，必要時可重新定義元件

結語

daisyUI 是提升 Tailwind 生產力的「實戰」插件。藉由「元件類別」與「主題系統」，能快速構建 UI 並維持一致風格。

下一篇將深入探討：

  • 如何為專案選擇或自訂主題
  • daisyUI 的主題是什麼，為何切換如此簡單

我們會再深入探討這些內容。