Tailwind CSS 是一款以「工具類別優先」（Utility-First）為核心設計理念的 CSS 框架，與傳統的 CSS 框架（如 Bootstrap、Bulma）不同，它不提供預設的 UI 元件，而是提供大量的樣式工具類別，讓開發者可以快速組合來建構 UI，而不需要額外撰寫自訂 CSS。

相較於傳統 CSS 框架，Tailwind CSS 具有以下幾個主要優勢：

1. 開發效率高：只需使用類別組合即可完成設計，無需撰寫額外 CSS。
2. 高度可客製化：可以透過設定檔調整顏色、字型、間距等設計。
3. 內建響應式支援：透過 sm: md: lg: xl: 等前綴輕鬆定義不同裝置的樣式。
4. 一致性強：開發團隊可以統一使用 Tailwind CSS 定義的設計樣式，減少 UI 風格不一致的問題。
5. 效能優化：可透過 PurgeCSS 移除未使用的樣式，確保最小化 CSS 檔案大小，提高網站載入速度。

二、安裝 Tailwind CSS

Tailwind CSS 可以透過多種方式安裝，以下介紹幾種常見的方法：

1. 使用 CDN（適合快速測試）​

如果只是想快速體驗 Tailwind CSS，可以直接在 HTML 檔案中加入以下 <link>：

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">

這種方式適合小型專案或測試 Tailwind CSS 的功能，但不適合正式開發，因為無法使用客製化設定。

2. 透過 npm 安裝（推薦方式）​

在正式開發環境中，建議使用 npm 或 yarn 來安裝 Tailwind CSS，以便進行客製化設定。

安裝 Tailwind CSS：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

執行上述指令後，會在專案根目錄中產生 tailwind.config.js 設定檔，可用來調整 Tailwind 的預設樣式。

設定 Tailwind CSS：

開啟 tailwind.config.js，找到 content 設定，確保 Tailwind 只處理專案內的相關檔案，例如：

module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

這樣 Tailwind CSS 就只會掃描 src 資料夾內的 HTML、JavaScript 和 TypeScript 檔案，避免產生不必要的 CSS。

引入 Tailwind 樣式：

在 src/index.css 或 styles.css 檔案中加入以下內容，讓 Tailwind CSS 套用基礎樣式：

@tailwind base;
@tailwind components;
@tailwind utilities;

最後，在開發環境中執行 Tailwind 編譯指令：

npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch

這會自動監聽檔案變化，並輸出 Tailwind CSS 的樣式到 output.css。

三、Tailwind CSS 常用類別

Tailwind CSS 提供大量的工具類別，以下介紹幾個常用的類別和應用範例。

1. 文字樣式​

Tailwind 允許透過類別來快速調整字體大小、顏色、行距等樣式，例如：

<p class="text-lg font-bold text-gray-700 leading-relaxed">
  這是一段示範文字
</p>

其中：

• text-lg：字體大小
• font-bold：加粗
• text-gray-700：深灰色文字
• leading-relaxed：行距較寬

2. 背景與邊框​

可以使用背景色與邊框樣式來設計 UI，示例如下：

<div class="bg-blue-500 text-white p-4 rounded-lg shadow-lg">
  Tailwind CSS 範例
</div>

• bg-blue-500：藍色背景
• text-white：白色文字
• p-4：內距 16px
• rounded-lg：圓角
• shadow-lg：大型陰影

3. Flexbox 佈局​

Tailwind CSS 提供完整的 Flexbox 工具類別，讓開發者能夠快速進行佈局：

<div class="flex items-center justify-between p-4 bg-gray-200">
  <div>左側內容</div>
  <div>右側內容</div>
</div>

• flex：啟用 Flexbox
• items-center：垂直置中
• justify-between：左右對齊

4. Grid 佈局​

使用 Grid 來建立多欄式佈局：

<div class="grid grid-cols-3 gap-4">
  <div class="bg-red-200 p-4">1</div>
  <div class="bg-green-200 p-4">2</div>
  <div class="bg-blue-200 p-4">3</div>
</div>

• grid：啟用 Grid
• grid-cols-3：建立三欄
• gap-4：欄間距

5. 響應式設計​

Tailwind 內建響應式前綴，適用於不同裝置：

<div class="text-base md:text-lg lg:text-xl xl:text-2xl">
  響應式字體大小
</div>

• text-base：手機（預設）
• md:text-lg：平板（min-width: 768px）
• lg:text-xl：筆電（min-width: 1024px）
• xl:text-2xl：桌機（min-width: 1280px）

四、Tailwind CSS 進階功能

1. 自訂樣式​

可以透過 tailwind.config.js 來擴充自訂樣式，例如新增顏色：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#1E40AF",
        secondary: "#9333EA",
      },
    },
  },
};

這樣就可以在 HTML 中使用 text-primary 或 bg-secondary 來套用顏色。

2. 使用 @apply 簡化樣式​

在 CSS 檔案中使用 @apply 來重複使用 Tailwind 類別：

.btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}

然後在 HTML 中只需寫：

<button class="btn">按鈕</button>

五、總結

Tailwind CSS 透過工具類別的方式大幅提升開發效率，並提供響應式設計、靈活佈局與高度客製化的功能。對於前端開發者而言，熟悉 Tailwind CSS 可以讓 UI 設計更加直觀、高效，並減少對自訂 CSS 的依賴，進而提升開發維護性。

一、前言：為什麼選擇 Tailwind CSS 搭配 daisyUI？​

在現代前端開發中，Tailwind CSS 提供了高度自訂、原子化的 CSS class，使得開發者能夠以更模組化與語意化的方式撰寫樣式。然而，Tailwind 並不內建 UI 元件，這就使得一些常見元件（如按鈕、表單、卡片）仍需手動組裝樣式。

這時，daisyUI 就成為極佳的搭檔。daisyUI 是一個基於 Tailwind CSS 架構的元件庫，提供豐富的預設元件樣式與主題切換能力，讓你能快速建構出一致、美觀的介面，並維持 Tailwind CSS 的開發哲學。

二、基本安裝流程​

1. 初始化專案​

首先建立一個新的專案，並安裝 Tailwind CSS。這裡以 Vite 為例：

npm create vite@latest my-app -- --template vanilla
cd my-app
npm install

接著安裝 Tailwind CSS 相關套件：

1. tailwindcss 核心庫，提供 Tailwind 的 utility class
2. postcss CSS 處理工具，Tailwind 用它來轉換 CSS
3. autoprefixer 為 CSS 自動加上瀏覽器前綴，如 -webkit-

# 安裝相關套件
npm install -D tailwindcss postcss autoprefixer
# 初始化設定檔
# 建立 Tailwind CSS 的設定檔 tailwind.config.js
# 加上 -p 參數會同時建立 PostCSS 的設定檔 postcss.config.js
npx tailwindcss init -p

2. 設定 Tailwind​

修改 tailwind.config.js：

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

建立 ./src/style.css 並加上 Tailwind 的 directives：

@tailwind base;
@tailwind components;
@tailwind utilities;

3. 安裝 daisyUI​

npm install daisyui

然後在 tailwind.config.js 中加入插件：

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

可選：設定主題

daisyui: {
  themes: ["light", "dark", "cupcake", "synthwave", "dracula"],
},

三、開始使用：元件實戰範例​

現在你已成功安裝與整合 Tailwind CSS + daisyUI，接下來讓我們透過實際範例來掌握它們的用法。

範例一：按鈕樣式​

daisyUI 提供多種按鈕樣式，只需使用 btn class：

<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>
<button class="btn btn-accent">強調按鈕</button>
<button class="btn btn-outline">外框按鈕</button>

也可以搭配大小與形狀：

<button class="btn btn-sm btn-circle btn-error">X</button>
<button class="btn btn-lg btn-square btn-info">i</button>

範例二：表單與輸入框​

<div class="form-control w-full max-w-xs">
  <label class="label">
    <span class="label-text">使用者名稱</span>
  </label>
  <input type="text" placeholder="請輸入名稱" class="input input-bordered w-full" />
</div>

<div class="form-control w-full max-w-xs">
  <label class="label">
    <span class="label-text">選擇國家</span>
  </label>
  <select class="select select-bordered">
    <option disabled selected>選擇一個選項</option>
    <option>台灣</option>
    <option>日本</option>
    <option>美國</option>
  </select>
</div>

範例三：卡片元件​

<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="https://placeimg.com/400/225/tech" alt="科技圖" /></figure>
  <div class="card-body">
    <h2 class="card-title">科技卡片</h2>
    <p>這是一個搭配 Tailwind CSS 與 daisyUI 所設計的卡片元件。</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">查看更多</button>
    </div>
  </div>
</div>

範例四：主題切換​

daisyUI 預設支援多主題切換，可透過修改 <html> 的 data-theme 屬性達成：

<html data-theme="dracula">

或者透過 JS 切換：

document.documentElement.setAttribute("data-theme", "light")

四、整合應用：登入頁設計​

我們結合 daisyUI 元件製作一個登入表單：

<div class="min-h-screen bg-base-200 flex items-center justify-center">
  <div class="card w-full max-w-sm shadow-2xl bg-base-100">
    <div class="card-body">
      <h2 class="text-2xl font-bold text-center mb-4">登入系統</h2>
      <div class="form-control">
        <label class="label">
          <span class="label-text">電子郵件</span>
        </label>
        <input type="email" placeholder="you@example.com" class="input input-bordered" />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">密碼</span>
        </label>
        <input type="password" placeholder="請輸入密碼" class="input input-bordered" />
      </div>
      <div class="form-control mt-6">
        <button class="btn btn-primary">登入</button>
      </div>
    </div>
  </div>
</div>

整合 Tailwind CSS 和 daisyUI 後這個表單完全不需要寫自訂 CSS，就能擁有一致的樣式與響應式設計。

五、總結與延伸學習​

整合 Tailwind CSS 和 daisyUI 的好處在於：

• 可以保有 Tailwind CSS 的彈性與控制權。
• daisyUI 提供現成且風格統一的元件，開發速度大幅提升。
• 可輕鬆切換主題，實現暗色模式等功能。
• 支援任意框架，React、Vue、Svelte、Alpine.js 都適用。