什麼是 Tailwind CSS？
Tailwind CSS 是一個以 Utility-First（工具優先） 為核心理念的 CSS 框架。與 Bootstrap 或 Bulma 這類提供預設元件的框架不同，Tailwind 提供大量低層次的 CSS 工具類別（utility classes），讓你直接在 HTML 中組合樣式，而不需要寫額外的 CSS 檔案。
核心概念：每個 class 只做一件事，例如 flex、p-4、text-xl，透過組合大量小 class 來實現複雜的設計。
為什麼選擇 Tailwind CSS？
- ✓ 開發速度極快——不需要在 HTML 和 CSS 之間來回切換
- ✓ 高度客製化——透過設定檔定義自己的設計系統
- ✓ 生產環境體積極小——JIT 模式只打包實際用到的 class
- ✓ 響應式設計簡單——sm:、md:、lg: 前綴直觀易用
- ✓ 暗色模式輕鬆實現——只需加上 dark: 前綴
- ✓ 社群龐大——大量 UI 元件、範本與工具可用
快速範例
以下是一個使用 Tailwind CSS 建立卡片元件的 HTML 範例：
<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white">
<img class="w-full" src="cover.jpg" alt="封面圖">
<div class="p-6">
<h2 class="font-bold text-xl text-gray-800 mb-2">卡片標題</h2>
<p class="text-gray-600 text-sm">這是卡片描述文字，可以放入任何說明內容。</p>
<button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
了解更多
</button>
</div>
</div>
注意：所有樣式都直接寫在 HTML 的 class 屬性中，不需要另外建立 CSS 規則。
本站學習路線
第一步
概覽——了解 Tailwind 的設計哲學與核心概念
第二步
安裝——在你的專案中設定 Tailwind CSS
第三步
工作流程——掌握高效率的開發方式
第四步
常用類別——熟悉 Layout、Spacing、Typography 等核心工具
第五步
進階技巧——自訂主題、@apply、Plugins 等進階功能
驗收
小測驗——測試你的學習成果
與其他框架比較
Tailwind CSS
- Utility-First
- 高度客製化
- 無預設元件
- 體積極小（JIT）
Bootstrap
- Component-First
- 預設元件豐富
- 客製化較複雜
- 基礎體積較大
純 CSS/Sass
- 完全自由
- 需命名 class
- 容易產生重複碼
- 維護成本高