Skip to content

建立 2026-09-15 更新 2026-09-15

YouTube 精選

官方單集一次講一個觀念。若你想先用兩分鐘建立直覺、或一次跟完一個落地頁,下面這幾支社群課程補得比較完整。來源都是長期更新的教學頻道,不是轉載或不明剪輯。

仍建議先看 官方影音 的 Utility-First 與 v4 Beta,再選一支對應程度的長課程跟做。v2/v3 課程的 class 多數仍能用;安裝步驟以本站 安裝與建置 為準

Tailwind in 100 Seconds(Fireship)

Tailwind in 100 SecondsFireship)用極短時間講 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 CourseTraversy Media)從 CDN 設定講到顏色、排版、Flex,並做出一張卡片與簡單版面。節奏快、畫面就是日常開發,適合看完官方 Utility-First 後想看「整段真實操作」的人。此片為較早版本,正式專案請改走 Vite。

對照閱讀:顏色與字體Flex 與 Grid

Tailwind CSS V4 Crash Course 2025(PedroTech)

Tailwind CSS V4 Crash Course 2025PedroTech)約 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 HoursDave Gray)把課程拆成五章,從安裝講到做出 Acme Rockets 落地頁(頁首、表單、手機選單、主題設定與上線)。節奏清楚、有配套原始碼,適合想跟完整專案而不是只看單一連珠的人。內容以 v3 為主。

播放清單:Tailwind CSS for Beginners

Learn Tailwind CSS – Course for Beginners(freeCodeCamp)

Learn Tailwind CSS – Course for BeginnersfreeCodeCamp.org,講師 Guillaume Duhan)約四小時,依顏色、字體、間距、Flex、Grid、版面、邊框、效果、動畫、設計系統、深色模式分段。適合想當參考書、用時間軸跳到單一主題的人。同樣是 v3 時期的 tailwind.config.js

文字介紹:freeCodeCamp 文章

較舊的播放清單

The Net Ninja 的 Tailwind CSS Tutorial 觀看數很高,但從 v1 錄製,安裝與設定和現況差太多,本頁不嵌入,以免和 v4 對不上。若只想看「utility 長什麼樣」,優先用上面的 Traversy 或 Dave Gray。

相關資料