Tailwind CSS 快速複習
使用左右箭頭切換投影片，或按下鍵盤的方向鍵進行操作。
第 1 張 / 8
什麼是 Tailwind CSS？
一個 Utility-First 的 CSS 框架——
每個 class 只做一件事，組合它們來打造任何設計。
傳統 CSS
.button { padding: 8px 16px; background: blue; border-radius: 8px; }
Tailwind CSS
<button class="px-4 py-2 bg-blue-500 rounded-lg">
第 2 張 / 8
JIT 模式
Just-In-Time 編譯——只生成實際用到的 CSS
- 開發時即時掃描原始碼，按需生成 CSS
- 開發與生產環境 CSS 體積一致（通常 < 15KB）
- 支援任意值語法：w-[350px]、bg-[#1a2b3c]
- Tailwind v3 起設為預設，無需額外設定
核心原理：讀取
content 指定的檔案 → 掃描所有 class → 只輸出對應 CSS
第 3 張 / 8
響應式設計
行動優先（Mobile-First）策略
sm: ≥ 640px (手機橫向) md: ≥ 768px (平板) lg: ≥ 1024px (桌面) xl: ≥ 1280px (大螢幕) 2xl: ≥ 1536px (超寬螢幕) <div class=" grid-cols-1 ← 手機：1欄 md:grid-cols-2 ← 平板：2欄 lg:grid-cols-4 ← 桌面：4欄 ">
第 4 張 / 8
變體系統
用前綴處理任何狀態與情境
互動狀態
- hover: 滑鼠懸停
- focus: 焦點狀態
- active: 點擊狀態
- disabled: 停用狀態
- group-hover: 群組懸停
環境情境
- dark: 暗色模式
- sm: 小螢幕以上
- print: 列印模式
- rtl: 從右到左
- first: 第一個子元素
第 5 張 / 8
核心 Utility 類別
最常用的 Tailwind class 分類速覽
LAYOUT
flex grid block hidden w-full h-screen
SPACING
p-4 px-6 m-auto mx-auto gap-4 space-x-2
TEXT
text-xl font-bold text-gray-600 leading-tight
COLOR
bg-blue-500 text-white border-gray-200
BORDER
border rounded-xl shadow-lg ring-2
EFFECT
opacity-75 blur transition hover:scale-105
第 6 張 / 8
@apply 與 @layer
提取可複用的元件樣式
/* 在 @layer components 中使用 @apply */
@layer components {
.btn-primary {
@apply px-4 py-2 bg-blue-500 text-white;
@apply rounded-lg font-semibold transition;
@apply hover:bg-blue-600 focus:ring-2;
}
}
/* 使用自訂元件 */
<button class="btn-primary">送出</button>
只在真正重複使用的元件中使用 @apply，避免重新引入傳統 CSS 的複雜度。
第 7 張 / 8
Dark Mode
只需加上 dark: 前綴
/* tailwind.config.js */
module.exports = {
darkMode: 'class', // 手動切換
}
/* HTML */
<html class="dark"> ← 加上此 class 啟用暗色模式
/* 元件 */
<div class="bg-white dark:bg-gray-900
text-black dark:text-white">
<p class="text-gray-600 dark:text-gray-300">
內容文字
</p>
</div>
1 / 8