Compass
Tailwind CSS & Next.js course template.

- Documentation
- Tailwind CSS v4
- Responsive Design
What Is the Compass?
Compass is a polished, production-ready course template built by the Tailwind CSS team with Next.js, MDX-powered lessons, and a fully componentized React codebase—perfect for launching your own online course site quickly and cleanly.
Features ✨
Expert-crafted UI built with Tailwind CSS utility classes—no extra CSS files.
MDX lesson support so you can drop in video, text, and interactive content.
Keyboard & screenreader accessible markup for inclusive design.
TypeScript + JavaScript codebases included—pick your flavor.
Production-ready tested across modern browsers, with easy deployment.
Included Components 📒
Prebuilt lesson pages, module overviews, and course landing layouts.
Navigation, progress bar, and video player components.
Utility hooks for MDX rendering and responsive design.
Pros and Cons
Pros ✅
Built by Tailwind Labs: trust in best practices and long-term updates.
Highly customizable: everything in markup—just edit classes.
Inclusive design: keyboard-first and screenreader friendly.
Well-structured Next.js code: ideal learning resource and starter kit.
Cons ⚠️
Paid template: $99 for Compass alone (or included in the $299 Tailwind Plus bundle).
Next.js required: not a vanilla HTML/CSS starter—needs React setup.
Integration
Deploy anywhere you can host Next.js (Vercel, Netlify, etc.).
Plug into MDX workflows for lesson authoring.
Extend with headless CMS (Sanity, Contentful) for dynamic content.
FAQ
Can I use Compass without Tailwind Plus membership?
Yes—you can purchase Compass standalone for $99 and use it on unlimited projects.
Is there built-in support for transcripts or captions?
You can parse VTT files into captions using the provided MDX utilities and video components.
Can I integrate third-party analytics?
Absolutely—just drop your analytics script into the Next.js _document.js or use a React hook.