認識 Tailwind CSS
Tailwind CSS 是一套 utility-first（工具類優先）的 CSS 框架：你不先發明 .btn-primary 這種元件名稱，而是直接在 HTML 上組合 flex、px-4、bg-sky-600 這類小而明確的 class。本站用繁體中文整理日常真正會用到的那一層，對應目前的 Tailwind CSS v4。
目標不是把官方文件整本搬過來，而是讓你先把最常用的 20% 練熟，再按主題往下挖。
最需要先掌握的 20%
學 Tailwind 很容易被幾千個 class 名稱淹沒。先把下面七件事做熟，其餘（動畫、container queries、任意值）都是這七件事的延伸。
| 核心 | 你要能做到什麼 |
|---|---|
| Utility-first | 看懂為什麼 class 寫在 HTML，而不是先寫一份自訂 CSS |
| 安裝與建置 | 用 Vite 接上 @import "tailwindcss"，讓 class 會被編譯進 CSS |
| 間距與尺寸 | 用 p- / m- / gap- / w- / max-w- 控制空白與寬度 |
| Flex 與 Grid | 排出水平列、置中、多欄卡片，不必手寫 display: flex |
| 響應式前綴 | 用 sm: md: lg: 做行動優先的版面切換 |
| 狀態前綴 | 用 hover: focus: dark: 處理互動與深色模式 |
| 主題客製 | 在 CSS 的 @theme 裡加品牌色與字體，而不是到處寫任意色碼 |
Utility 負責「這一格看起來怎樣」；前綴負責「在什麼條件下才生效」；@theme 負責「全站共用的設計 token」。三者分清楚，Tailwind 就不會變成一長串看不懂的 class。
建議學習順序
官方學習資源
官方文件與 Playground
查 class 名稱請以 Tailwind CSS 文件 為準。想先不動手裝套件，可用 Tailwind Play 在瀏覽器試 utility。
官方 YouTube
Tailwind Labs 頻道 的 From Zero to Production 是官方入門影音課。觀念仍適用；安裝步驟請改對照本站 安裝與建置（v4 已改為 CSS-first）。完整清單見 官方影音。
Tailwind 沒有官方證照課程。想用現成元件加速，可看官方的 Tailwind Plus（付費 UI kit，舊稱 Tailwind UI），不是認證。