Revision Ver-1

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

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

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

daisyUI 是什麼？

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

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

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

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

2) 卡片 + 動作按鈕

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

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

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

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

總結：daisyUI 能

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

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

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

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

亮色與暗色主題切換圖

在 HTML 中套用主題

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

用 JavaScript 切換主題範例

const html = document.documentElement;\n\nfunction toggleTheme() {\n  const next = html.getAttribute("data-theme") === "dark" ? "light" : "dark";\n  html.setAttribute("data-theme", next);\n}\n

此方式的優點：

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

一起使用 Tailwind 與 daisyUI！

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

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

<button class="btn btn-primary w-full sm:w-auto px-6">\n  保存\n</button>\n

btn btn-primary：元件樣式（保持一致）
w-full sm:w-auto px-6：佈局、響應式、微調

何時特別適合使用 daisyUI？

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

需要注意的地方

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

結語

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

下一篇將深入探討：

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

以便更深入了解其功能。

', '/media/editor_temp/6/6ac85d97-48bb-4f3b-8533-b8976e840cdd.png')

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