2025-04-13-Tailwind CSS 使用規則 + 範例解說

發表於 2025-09-07 閱讀次數：

Tailwind CSS 使用規則 + 範例解說

下面用清楚、分段的方式說明 Tailwind 的核心規則與常見用法，每個重點都附上簡短範例與說明，方便你立刻上手。

1) Tailwind 是什麼（一句話）

Tailwind 是 utility-first 的 CSS 框架：不寫大量自訂 CSS，而是把小功能（例如 p-4、text-sm、bg-blue-500）直接放在 HTML class。這讓樣式具可組合性且開發速度快。

2) 基本使用規則（必讀）

1. 類別為「功能導向」（utility-first）

在標籤上直接組合多個 class：

1
2
3

<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  按我
</button>

說明：px-4（左右 padding）、py-2（上下 padding）、bg-blue-500（背景色）、rounded（圓角）、hover:bg-blue-600（滑鼠懸停變色）。

2. 行動優先（mobile-first）與響應式前綴

預設生效於所有尺寸，用 sm:, md:, lg:, xl: 等在特定斷點以上啟用：

<div class="p-4 bg-gray-100 md:flex md:gap-4">
  <div class="w-full md:w-1/3">欄位 A</div>
  <div class="w-full md:w-2/3">欄位 B</div>
</div>

說明：md:flex 代表在 md（中等）以上才變成 flex。

默認斷點（Tailwind）：

sm ≈ 640px
md ≈ 768px
lg ≈ 1024px
xl ≈ 1280px
（可在 tailwind.config.js 自訂）

3. 狀態與偽類前綴

支援 hover:, focus:, active:, visited:, focus-visible:, disabled: 等：

1	<a class="text-blue-600 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-300">連結</a>

4. dark mode

兩種常見設定：media（跟隨系統）或 class（用 .dark 切換）：

// tailwind.config.js 範例
module.exports = {
  darkMode: 'class', // 或 'media'
  // ...
}

HTML：

<html class="dark">
  <body class="bg-white dark:bg-gray-900 text-black dark:text-white">
    ...
  </body>
</html>

5. 優先順序（如何覆蓋）

Tailwind 的每個實用類別會產生規則；最後在 CSS 中出現者會勝出（CSS cascade）。
使用響應式或偽類前綴時，該變體的規則會在相對的媒體查詢/偽類下生效，因此可以用 md: 等覆蓋。
若需要強制覆蓋，可使用 ! 前綴（Tailwind v3 支援）：!text-red-500（會加入 !important）。

6. 任意值（arbitrary values）

要使用框架外的特定值可用方括號：

1	<div class="w-[37px] h-[37px] bg-[#1da1f2]">...</div>

7. 將 utility 組成 component（@apply）

在自訂 CSS/樣式檔把一組 classes 抽成可重用的 class：

/* styles.css */
.btn {
  @apply px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700;
}

然後 HTML 用 <button class="btn">。

8. 生產環境清理（content / purge）

在 tailwind.config.js 設定要掃描的檔案，避免輸出巨量 CSS：

module.exports = {
  content: ['./src/**/*.{html,js,vue,jsx,tsx}'],
  // ...
}

3) 常見範例（實務示例 + 說明）

範例 A — 按鈕（含狀態）

<button class="inline-block px-4 py-2 rounded shadow-sm bg-blue-500 text-white 
  hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95">
  送出
</button>

說明：

inline-block：讓 padding 生效並可有寬高
shadow-sm：小陰影
focus:ring-2：聚焦時的外圈光暈
active:scale-95：按下時微縮（互動感）

範例 B — 響應式 Grid 佈局

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <div class="p-4 bg-white rounded">卡片 1</div>
  <div class="p-4 bg-white rounded">卡片 2</div>
  <div class="p-4 bg-white rounded">卡片 3</div>
  <div class="p-4 bg-white rounded">卡片 4</div>
</div>

說明：一欄（手機），sm 變兩欄，lg 變四欄。

範例 C — 表單驗證（與框架條件 class 共用）

假設用 Vue，條件套用 class：

<input
  type="text"
  :class="[
    'w-full p-2 rounded border',
    hasError ? 'border-red-500 bg-red-50' : 'border-gray-300'
  ]"
/>

說明：用 JS 判斷決定哪個 Tailwind class 被套用，無需寫 CSS。

4) tailwind.config.js 常見設定範例

module.exports = {
  content: ['./src/**/*.{html,js,vue}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: '#0ea5e9', // 自訂顏色
      },
      spacing: {
        '72': '18rem',
      }
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
  ]
}

extend 用來擴展預設 scale（不覆蓋）
plugins 常用 @tailwindcss/forms, typography, line-clamp 等

5) 快速 Cheat-sheet（常用 class）

佈局：flex, grid, justify-between, items-center
大小/間距：p-4, px-2, py-1, m-4, w-full, h-12, max-w-lg
字體：text-sm, text-lg, font-medium, truncate
邊框/陰影：border, border-gray-300, rounded, shadow
背景/色彩：bg-white, bg-gray-100, text-white, bg-blue-500
互動：hover:, focus:, active:, disabled:
響應式：sm:, md:, lg:, xl:
dark mode：dark:bg-gray-900, dark:text-white
任意值：w-[250px], bg-[#ff00aa]

6) 小技巧與注意事項

別把大量邏輯放到 HTML 上：條件套 class（例如 Vue/React）時，維持可讀性，用變數或小 helper。
使用 @apply 小心 specificity：不要嘗試把互動變體（hover:）放到 @apply，某些情況會失效或較難維護。
生產環境一定要設定 content 否則輸出的 CSS 會很大。
使用 arbitrary value 時注意合法格式：例如 min-h-[32px]、grid-cols-[200px_1fr]。
版本差異：Tailwind v3 引入 JIT、!important 前綴 (!)，請確認你專案使用的版本文件或 changelog（如果需要我可以幫你比對版本差異）。