重點整理
- Compass 是 Tailwind CSS 與 Next.js 打造的免費線上課程起始套件
- 內建滾動時影片自動縮到右下角的子母畫面效果，提升觀看體驗
- 支援 WebVTT 字幕檔解析，可自動辨識說話者並渲染成客製化介面
- Markdown 圖片支援深色模式自動切換與尺寸標記，避免版面跳動
為什麼這篇跟你有關？
越來越多中小企業主、講師、行銷人想把自己的專業做成線上課程，但往往卡在「平台不好用」或「開發太花時間」。Tailwind CSS 團隊最近發布了一個叫 Compass 的免費課程起始套件（starter kit），用 Tailwind CSS 和 Next.js 打造，專門用來發布線上課程。即使你不是工程師，了解這套工具的設計思路，也能幫助你在規劃課程網站時做出更好的決策。
亮點一：子母畫面影片，邊看邊讀不打斷
現代瀏覽器其實原生支援「子母畫面」（Picture-in-Picture）功能，也就是可以把影片拉出來變成一個小視窗，讓使用者邊滑頁面邊看影片。Compass 團隊原本想用瀏覽器的子母畫面 API 來實作，但發現基於隱私與安全考量，這個 API 不能在使用者滾動頁面時自動觸發，必須要有點擊動作才行。
於是他們改用自己寫的方式：透過 IntersectionObserver（一種用來偵測元素是否出現在畫面中的瀏覽器 API）搭配影片播放事件，判斷影片是否正在播放且已經滾出畫面，再用 Tailwind CSS 的 data 屬性條件式樣式，把影片固定到右下角。這樣做的好處是程式碼讀起來更像一般的 Tailwind 寫法，不需要塞一堆 JavaScript 的條件判斷。
亮點二：用 WebVTT 字幕檔自動生成訪談逐字稿
Compass 裡有一個訪談單元，頁面上方是影片，下方是排版精緻的逐字稿介面。團隊一開始想過把內容直接寫在 MDX 檔裡，但覺得這種自訂格式對內容作者來說太不友善。
後來他們選擇使用 WebVTT 格式——這是一種專為網頁設計的字幕檔格式，類似常見的 SRT，但額外支援標記「說話者」資訊。只要把 .vtt 檔放進專案，Compass 就會自動解析出時間戳、說話者和內容，再用 React 渲染成漂亮的逐字稿 UI。這也意味著，你甚至可以用 AI 工具自動產生 VTT 格式的逐字稿，丟進專案就能直接顯示。
亮點三：Markdown 圖片支援深色模式與防版面跳動
Compass 的範例內容包含大量圖解，而且需要配合深色模式和淺色模式顯示不同圖片。為了不破壞 Markdown 的簡潔感，團隊在圖片網址裡加了一個 {scheme} 佔位符，系統會根據使用者目前的色彩模式，自動載入對應的圖片檔名（例如 neuro-proof.light.png 或 neuro-proof.dark.png）。如果某張圖不需要區分，不放佔位符就好。
另外，為了避免圖片載入時造成版面跳動（layout shift），他們參考了筆記軟體 Obsidian 的做法，在 Markdown 的替代文字裡用 |2000x990 的格式標註圖片尺寸，再透過自訂的 MDX 元件把尺寸套到圖片上，讓瀏覽器預先保留空間，頁面載入更平順。
崴米的建議
- 評估線上課程平台前先想清楚需求：如果你只需要簡單的影片＋文字課程，像 Compass 這類開源起始套件可以大幅節省開發時間；但如果需要金流、會員系統、學習進度追蹤等功能，建議找專業團隊評估整合方案。
- 善用 AI 工具降低內容製作門檻：原文提到可以用 AI 產生 VTT 字幕檔，這表示現在製作逐字稿、字幕的成本已經很低。中小企業主可以善用 AI 轉錄工具，把課程影片快速轉成文字內容，同時兼顧 SEO 和無障礙體驗。
- 注重網站的細節體驗：子母畫面、深色模式圖片切換、防版面跳動——這些看似小小的技術細節，加起來就是使用者對你品牌的整體印象。規劃網站時，別只關注功能有沒有，也要思考體驗好不好。
