YouTube 精選
官方單集一次講一個觀念。若你想先用兩分鐘建立直覺、或一次跟完一個落地頁,下面這幾支社群課程補得比較完整。來源都是長期更新的教學頻道,不是轉載或不明剪輯。
仍建議先看 官方影音 的 Utility-First 與 v4 Beta,再選一支對應程度的長課程跟做。v2/v3 課程的 class 多數仍能用;安裝步驟以本站 安裝與建置 為準。
Tailwind in 100 Seconds(Fireship)
Tailwind in 100 Seconds(Fireship)用極短時間講 utility-first 是什麼、和 Bootstrap 元件 class 差在哪,以及為什麼有人愛有人嫌。適合完全沒概念、先決定「要不要學」的人。
對照閱讀:Utility-first
Should You Use Tailwind CSS?(Web Dev Simplified)
Should You Use Tailwind CSS?(Web Dev Simplified)約八分鐘,比較 Tailwind 與手寫 CSS、Bootstrap 的取捨:何時真的適合、何時不必硬上。適合已經會 CSS、在猶豫專案要不要引入框架的人。
Tailwind CSS Crash Course(Traversy Media)
Tailwind CSS Crash Course(Traversy Media)從 CDN 設定講到顏色、排版、Flex,並做出一張卡片與簡單版面。節奏快、畫面就是日常開發,適合看完官方 Utility-First 後想看「整段真實操作」的人。此片為較早版本,正式專案請改走 Vite。
對照閱讀:顏色與字體、Flex 與 Grid
Tailwind CSS V4 Crash Course 2025(PedroTech)
Tailwind CSS V4 Crash Course 2025(PedroTech)約 1.5 小時,用 Tailwind Play 從顏色、間距、Flex、導覽列、Grid、斷點講到深色模式與客製,最後帶到 React。這是精選裡對準 v4 的長課程,適合想一次跟現行語法的人。
Tailwind CSS Full Course for Beginners(Dave Gray)
Tailwind CSS Full Course for Beginners | Complete All-in-One Tutorial | 3 Hours(Dave Gray)把課程拆成五章,從安裝講到做出 Acme Rockets 落地頁(頁首、表單、手機選單、主題設定與上線)。節奏清楚、有配套原始碼,適合想跟完整專案而不是只看單一連珠的人。內容以 v3 為主。
播放清單:Tailwind CSS for Beginners
Learn Tailwind CSS – Course for Beginners(freeCodeCamp)
Learn Tailwind CSS – Course for Beginners(freeCodeCamp.org,講師 Guillaume Duhan)約四小時,依顏色、字體、間距、Flex、Grid、版面、邊框、效果、動畫、設計系統、深色模式分段。適合想當參考書、用時間軸跳到單一主題的人。同樣是 v3 時期的 tailwind.config.js。
文字介紹:freeCodeCamp 文章
較舊的播放清單
The Net Ninja 的 Tailwind CSS Tutorial 觀看數很高,但從 v1 錄製,安裝與設定和現況差太多,本頁不嵌入,以免和 v4 對不上。若只想看「utility 長什麼樣」,優先用上面的 Traversy 或 Dave Gray。