Tailwind Weekly #194: New Compass Template, Vanilla Headless UI Teaser, and Dark Mode Updates Coming Soon! 🚀

Hello folks!

Sorry for the silence the past few weeks, I was having major health issues but I’m back now!

Since the last issue, we got a brand new template, a promising upcoming Headless UI update, and possible dark mode support coming soon to Tailwind Plus!!

Let's dive in!

🌟 News

Compass, the new Tailwind course platform starter kit, just dropped! 🚀

Compass is basically a full-featured starter kit for anyone wanting to publish an online course, and it shows off a ton of new ideas you can absolutely steal for your own projects. It’s also a free update for Tailwind Plus folks.

There are some really clever features packed in here. For one, the course videos support a custom mini-player: scroll and it’ll pop down to the corner so you can watch and read at the same time (and yes, there’s a whole bit about browser APIs and data attributes here, super neat if you’re into advanced UI tricks). There’s also an awesome section for interview-style lessons, with automatically parsed video transcripts from VTT files, makes adding speaker-labeled transcripts way friendlier, especially if you ever end up using AI for transcription.

If you want to launch a course, build a learning platform, or just see how the Tailwind team thinks about content-heavy UIs in 2025, give this a look. You can grab the codebase and poke around, or just steal their transcript/image approaches for your next project. Honestly, super inspiring work!

A new Headless UI is coming 🤩 

Adam and the crew are working on a “vanilla” version of Headless UI, and it’s all about web components. No React, no Vue… just drop in a single <script> from a CDN and boom—you get access to a whole set of custom elements for things like dropdowns, dialogs, popovers, tabs, and plenty more. And the real kicker? You don’t have to write a line of JS to start building interactive UIs.

Dark mode coming soon to Tailwind Plus 🌓 

Dan Hollick just shared a sneak peek of a cool tool he’s been hacking on: a custom script that takes all the new Tailwind Plus components and converts them to dark mode using Claude AI. Here’s the wild part: there are around 600 components ‼️ , so doing this by hand would be a serious grind. With this setup, Dan’s hoping to automate the process and seriously speed up getting the entire component library dark mode-ready.

🤩 Windy Picks

💰 Frontend Devs: Earn Up to $50/Hour Training AI (Remote & Flexible)

Tired of the 9-to-5 grind? Your HTML, CSS, and JavaScript skills can now unlock a lucrative side hustle with Outlier AI. You'll review AI-generated code, write prompts, and evaluate UI/UX designs, basically helping train the next generation of coding AI. No AI experience needed, just your existing frontend skills!

The best part? Weekly payouts, fully remote work, and you set your own schedule (most devs work 5-10 hours/week). While other developers worry about AI replacing them, you'll be the one training it, and getting paid well to do it. Featured in Forbes and trusted by innovative companies worldwide.

Start earning with your frontend skills →

📚 Learning

The Height Enigma

Ever wondered why setting height: 50% on an element in CSS sometimes just…does nothing? This blog post finally clears up that classic CSS mystery. The author breaks down the difference between how width and height are calculated, turns out, they’re opposites!, and explains why percentage heights only work when the parent has an explicit, “knowable” height. You’ll get practical visuals and analogies for understanding the circular paradox that trips up so many devs, plus real solutions using rem units, Flexbox, and Grid to make layouts behave the way you want.

EASIEST Way to Animate Tailwind

This video introduces Tailwind Motion, a plugin that brings easy, accessible, pure-CSS animations right into your workflow. You’ll see how to use presets for classic effects, mix and match base animations like scale, opacity, translation, and more, and even customize every detail (think: delays, easing, and hover-pausing) just by stacking classes. There’s also a cool Chrome extension if you want to build animations visually and copy-paste the result. Even better: it’s free, open source, supports Tailwind v4, and feels way more modern than Tailwind Animate.

Tailwind's @apply Feature is Better Than it Sounds

And looking at the other side of the pond, here’s a interesting topic for you. This piece dives into the often-overlooked @apply feature, showing how you can blend Tailwind’s utility-first approach with classic CSS techniques. The author doesn’t sugarcoat their dislike for “vanilla” Tailwind, but they make a compelling case for how @apply can act like Sass mixins, letting you define and reuse custom utilities right in your CSS and HTML, including responsive variants. There are practical, real-world examples (like switching between vertical and horizontal layouts or building simple CSS grids) that make everything feel immediately useful, and you get a balanced take on the strengths and limits of this approach.

💅 Showcase

Plain Framework

Plain is a modern Python web framework built for developers who want to ship full-featured products fast, without the bloat. Forked from Django and tested in real SaaS environments, Plain gives you modular packages, from robust models and authentication to first-class Tailwind integration, that you can mix, match, and customize. Whether you're launching a startup, building internal tools, or prototyping a side project, Plain lets you go from local dev to production with a single command and all the batteries you need included.

🎁 Resource

Lucide Icons

Lucide it's a huge collection (over 1,500 SVG icons!) made by the open-source community, and the key here is that everything is crisp, consistent, and easily customizable right out of the box, think color, size, stroke width, you name it. I love that all the icons are super lightweight, tree-shakable (so you only bundle what you use), and you can install Lucide from basically any package manager.

👌 Cool Stuff

Tailscan – Instantly build, debug, and refine Tailwind CSS sites visually with real-time updates, all within your browser.

Tempest – A zero-config PHP framework with modern templating, auto-discovery, decoupled ORM, and frictionless setup.

Clop – Instantly optimise images, videos, PDFs, and clipboard content for fast sharing and minimal file size on macOS.

Do you want to share something with the Tailwind CSS community?
You can submit a link or message me on Twitter @vivgui.

Want to support the newsletter? You can buy me a coffee with this link 😁.