# Tailwind CSS 插件 daisyUI 介紹：只用類別快速打造 UI Tailwind CSS 以工具類別為基礎，雖然自由度高，但每次都要組合按鈕/卡片/模態等元件會變得繁瑣。 **daisyUI** 在 Tailwind 之上提供「元件類別 + 主題」的插件，能大幅縮短設計與樣式化的時間。 > 安裝與設定方式因使用的框架（Next.js、Vite、Remix 等）略有差異。本文假設已完成安裝。 > 若需從頭開始，請參考 daisyUI 官方安裝說明： > > [官方文檔安裝指南](https://daisyui.com/docs/install/) ## daisyUI 是什麼？ {#sec-ec57db35176a} daisyUI 是 Tailwind CSS 的插件，將常用 UI 模式以「元件類別」的形式提供。也就是說，像按鈕/卡片/模態等需要逐一組合 Tailwind 工具類別的元件，現在可以直接使用 `btn`、`card` 等有意義的短類別。 * **元件類別**：`btn`、`card`、`navbar`、`modal` 等可直接使用的 UI 模式 * **主題系統**：透過 `data-theme="light"` 等方式輕鬆切換主題 * **與 Tailwind 的自然結合**：可使用 Tailwind 工具類別進行微調首次接觸時最直觀的優點只有一個。 * **渲染結果相似，但 HTML 更簡潔** 以下示例展示「Primary 按鈕」與「卡片 + 動作按鈕」在使用 daisyUI 與不使用時的 HTML 差異。 ## 使用 daisyUI 與不使用時：結果相同，HTML 會縮減多少？ {#sec-5cfe2ef052d5} ### 1) Primary 按鈕 {#sec-4563d8cf36d1} **(A) 只用 Tailwind** — 需要組合多個工具類別來完成樣式。 ```html ``` **(B) 使用 daisyUI** — 用更短的元件類別表達同一個按鈕。 ```html ``` 重點不是「Tailwind 無法做到」，而是「daisyUI 把重複的組合預設封裝起來」，讓你先快速填滿畫面，再用 Tailwind 進行細節調整。 ### 2) 卡片 + 動作按鈕 {#sec-e3b0198ef450} **(A) 只用 Tailwind** — 需要為卡片容器/標題/內容/動作區域各自組合類別。 ```html

Card title

同樣形式的卡片在多處使用時，類別會變長且重複度增加。

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

Card title

daisyUI 提供重複 UI 結構的元件類別，讓 HTML 更簡潔。

``` 總結：daisyUI 能 * **縮短類別長度，提升可讀性** * **統一重複 UI 模式的預設值** * **快速確保主題一致性** 下一節將說明「主題」為何特別方便。 ## 主題系統：為何暗黑模式/品牌主題更輕鬆？ {#sec-e1ef69dace76} daisyUI 的強項是「主題切換」。它預設提供基於 CSS 變數的主題，整個應用的顏色/背景/文字色調會自動變化。 ![亮色與暗色主題切換圖](/media/editor_temp/6/6ac85d97-48bb-4f3b-8533-b8976e840cdd.png) ### 在 HTML 中套用主題 {#sec-57f1de3ec600} ```html ``` ### 用 JavaScript 切換主題範例 {#sec-7b566121ce43} ```js const html = document.documentElement; function toggleTheme() { const next = html.getAttribute("data-theme") === "dark" ? "light" : "dark"; html.setAttribute("data-theme", next); } ``` 此方式的優點： * 透過全域主題切換，無需為每個元件重新指定顏色 * 在專案初期即可快速穩定設計系統（顏色/色調） ## 一起使用 Tailwind 與 daisyUI！ {#sec-37cabbde5dcc} daisyUI 先快速確定「基本形狀」，再用 Tailwind 進行「細節」調整。例如，為按鈕加入間距/對齊/響應式： ```html ``` * `btn btn-primary`：元件樣式（保持一致） * `w-full sm:w-auto px-6`：佈局、響應式、微調 ## 何時特別適合使用 daisyUI？ {#sec-0d80958f4123} * **MVP / 原型設計**：想快速完成「好看」的畫面 * **儀表板 / 管理頁面**：重複 UI 模式（表格、卡片、輸入表單）多 * **小型團隊 / 個人開發**：無法投入大量時間於設計系統 * **主題重要的服務**：需要輕鬆管理暗黑模式或品牌皮膚 ## 需要注意的地方 {#sec-2d963d052126} * **類別命名會加入 daisyUI 的風格**（如 `btn`、`card`、`navbar` 等）→ 需檢查是否與團隊慣例衝突 * **若設計需求極為特殊**，預設元件樣式可能成為限制；但大多數情況可用 Tailwind 工具類別覆蓋，必要時可重新定義元件 ## 結語 {#sec-522cfdd1fcf2} daisyUI 是提升 Tailwind 生產力的「實戰」插件。藉由「元件類別」與「主題系統」，能快速構建 UI 並維持一致風格。下一篇將深入探討： * 如何為專案選擇或自訂主題 * daisyUI 的主題是什麼，為何切換如此簡單我們會再深入探討這些內容。