✳️ 581+ Pro Blocks, lifetime updates, unlimited projects — Get 50+ fresh blocks every month ✳️ 👇
Grab the deal →

Compass

Paid

Tailwind CSS & Next.js course template.

Get now
Compass Image 1
Details About Compass
Key points:
  • 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.

Featured Templates & UI Kits

Get 220+ Tailwind templates & UI kits for landing pages & dashboards

Flex

Flex

Paid

345 Tailwind CSS components ready to use