Compass

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.