Tailwind Weekly #208: Inclusive Dark Mode, CSS Spinning Diagrams, and a 5k+ Component Library 🤩
Hello folks!
Quiet week, but more ui.sh invites went out this week. If you're on the waitlist, then check your spam folder.
I got early access to ui.sh last week and my first impression was 🤯. But just like with any other AI tool, the more design guidance you give it, the better the output so I have been learning more about how to create proper design briefs. Fun times!
🤩 Windy Picks

Build modern Tailwind websites visually, without fighting code.
Elements combines a visual workflow with full Tailwind control and clean, readable markup in a native macOS app. No abstractions, no bloated HTML, no vendor lock-in.
Right now, you can get 25% off, automatically applied at checkout. Download it for free and see how it fits into your Tailwind workflow.
📚 Learning

Inclusive Dark Mode: Designing Accessible Dark Themes For All Users
Dark mode is everywhere, but here's the thing, if it's not designed with accessibility in mind, it can actually make things worse for a lot of users. This article dives deep into the do's and don'ts of building inclusive dark themes. You'll learn why pure black backgrounds are a no-go, how to pick the right contrast ratios for readability, and what typography choices work best on dark backgrounds. It also covers how different visual impairments, from astigmatism to glaucoma to cataracts, interact with dark mode in very different ways, which is something most devs don't think about enough. There's also a great section on making sure your dark mode is machine-readable too, which matters more and more as automation grows.
Spinning Diagrams with CSS
Learn how to create 3D spinning diagrams using nothing but HTML and CSS. No JavaScript, no animated GIFs, just pure CSS transforms and animations. Harold Cooper breaks down how to build a spinning cube using translate3d for positioning and rotateY keyframes for the rotation. He also shows a clever trick to "un-spin" the text labels so they always face the reader using a counter-rotation on inner divs. It performs great even on mobile and you can even select the rotating text!
Subgrid: how to line up elements to your heart’s content
CSS Subgrid is one of those features that solves a super common problem: misaligned content across card layouts when one card has more text than the others. This article from WebKit walks you through how Subgrid fixes that beautifully. The idea is simple: you define rows in your parent grid, then use grid-template-rows: subgrid on the child elements so they all share the same row structure, perfectly aligned content across columns, no matter the text length.
💅 Showcase

Stagehand
Stagehand is an AI-native, open-source browser automation framework that’s fully compatible with Playwright, but easier to write and significantly more reliable on volatile pages by combining deterministic, atomic actions with LLM adaptability. Built for developers who want the predictability of code without the brittleness of traditional tooling, it delivers repeatable automation, fast performance, and a natural-language-friendly API for extraction and action.
🎁 Resource

Untitled UI
This is a massive open-source React component library styled entirely with Tailwind CSS v4.1 and built on React Aria for accessibility. We're talking 5,000+ components, 250+ page examples, dark mode out of the box, and a custom CLI that lets you scaffold a project with a single command. There's a generous free tier with hundreds of components, and the PRO version is a one-time purchase with lifetime updates.
👌 Cool Stuff
Learn Visual Studio Code – An ebook with 150+ tips and customizations for VS Code, covering built-in features like settings, terminal tricks, code snippets, keyboard shortcuts, and more. Great for both beginners and advanced users across Mac and Windows.
OpenStatus – Open-source status pages + uptime monitoring from 28 regions, with incident updates and SOC 2-ready audit trails.
CaptureKit – Screenshot & extract webpage content via one API call (PNG/PDF/HTML/MD), with device emulation and edge caching.
Swish – A macOS window manager with trackpad gestures for snapping, moving, and resizing apps on grid layouts.
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 😁.
Discussion