Compass: A starter kit for online courses

Source: Tailwind Labs Date: 2025-05-14 URL: https://tailwindcss.com/blog/2025-05-14-compass-course-starter-kit

Summary

Compass is a free Tailwind Plus starter kit for online course sites, built with Next.js. Key technical contributions: scroll-based PiP-like video behavior using IntersectionObserver and data attributes (native PiP requires user gesture), VTT transcript parsing with speaker support and custom React UI, and a dark mode image URL pattern ({scheme} placeholder in Markdown image paths) for automatic light/dark asset switching.

Implications

• Custom scroll-based video repositioning rather than native PiP API (which requires user gesture) is a pragmatic workaround — the blog post documents the limitation explicitly, which is the “verify, don’t trust” instinct applied to browser API constraints.
• VTT for transcripts over SRT reflects speaker annotation support — VTT’s cue metadata allows speaker names, making it suitable for AI-generated transcript workflows. This is forward-looking: AI transcription tools typically output to formats with speaker diarization.
• The {scheme} Markdown image URL pattern for dark/light mode switching is a small but useful convention that addresses a gap in Next.js + MDX dark mode image handling — expect this pattern to propagate into documentation and content sites that use the Tailwind stack.
• Compass is free to Tailwind Plus subscribers, continuing the pattern of using templates as a retention mechanism rather than a upsell. The commercial bet is on subscription value density, not per-template revenue.