DaisyUI 入門指南：簡單打造美觀的 Tailwind CSS 元件
DaisyUI 入門指南：簡單打造美觀的 Tailwind CSS 元件
什麼是 DaisyUI？
DaisyUI 是一款基於 Tailwind CSS 的 UI 元件庫，提供一組預設風格的元件，幫助開發者快速建立美觀且一致的 UI，無需手寫額外的 CSS 樣式。
為什麼選擇 DaisyUI？
- 與 Tailwind CSS 完美整合：可以直接使用 Tailwind 的公用類別，同時享有額外的 UI 元件。
- 內建多種主題：可輕鬆切換不同配色風格，支援暗色模式。
- 簡單易用：透過類別名稱即可快速建構按鈕、卡片、表單等元件。
- 高度自訂：可以依照需求自訂元件樣式，靈活度極高。
如何安裝 DaisyUI？
1. 透過 CDN 快速引入（適用於測試）
若想立即試用 DaisyUI，可直接使用 CDN 引入 Tailwind CSS 與 DaisyUI：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DaisyUI Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
plugins: [window.daisyui],
}
</script>
</head>
<body class="p-6">
<button class="btn btn-primary">點擊我</button>
</body>
</html>
2. 在專案中安裝 DaisyUI（推薦）
若要在 Tailwind CSS 專案內使用 DaisyUI，建議透過 NPM 安裝。
步驟 1：安裝 Tailwind CSS 與 DaisyUI
npm install -D tailwindcss postcss autoprefixer daisyui
npx tailwindcss init -p # 產生 Tailwind 設定檔
步驟 2：設定 Tailwind 配置
開啟 tailwind.config.js，並加入 DaisyUI 插件：
module.exports = {
content: ["./*.html", "./src/**/*.{js,ts,jsx,tsx}", "./components/**/*.{vue,js}"],
theme: {
extend: {},
},
plugins: [require("daisyui")],
};
步驟 3：在 CSS 檔案中引入 Tailwind
在 styles.css 檔案中加入：
@tailwind base;
@tailwind components;
@tailwind utilities;
步驟 4：啟動開發伺服器
npx tailwindcss -o output.css --watch
這樣你就能在 HTML 或 JSX 中使用 DaisyUI 提供的元件！
DaisyUI 基本用法
1. 按鈕（Button）
<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>
<button class="btn btn-accent">強調按鈕</button>
2. 輸入框（Input）
<input type="text" placeholder="輸入文字" class="input input-bordered w-full max-w-xs" />
3. 卡片（Card）
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="https://via.placeholder.com/150" alt="範例圖片" /></figure>
<div class="card-body">
<h2 class="card-title">卡片標題</h2>
<p>這是一個使用 DaisyUI 建立的卡片元件。</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">閱讀更多</button>
</div>
</div>
</div>
4. 響應式設計與主題變更
DaisyUI 提供多種預設主題，並可透過 data-theme 屬性切換：
<div data-theme="dark">
<button class="btn btn-primary">暗色模式按鈕</button>
</div>
結語
DaisyUI 是一款強大的 Tailwind CSS 擴充工具，能讓開發者 快速建立美觀的 UI，同時保留 Tailwind CSS 的靈活性。如果你正在尋找 輕量級且易於客製化 的 UI 框架，DaisyUI 絕對值得一試！
如果你已經使用過 DaisyUI，歡迎留言分享你的開發經驗！🚀