Tailwind Weekly #196: ARIA mental models, v4 instal for Nuxt, and clever container queries 🤓

Hello folks!

No major news on the Tailwind front, the Labs team is chilling this summer with a well-deserved rest.

But we still got fancy stuff to show, and I hope you like this week’s sponsor 😃 

Let's dive in!

🤩 Windy Picks

#1 Dev Tool for Tailwind CSS Developers

Tailwind developers run into the same loop every day. Say you want to adjust the margin for a button. So you set mt-2 in the code editor, save, reload the page, notice the space is wrong, go back, try mt-4, reload again, and repeat.

This back-and-forth is the main thing that slows them down. The task isn’t hard, it's just repetitive. So even tiny fixes start to inherently consume time.

Tail Lens solves this problem. Tail Lens is the fastest way to work with Tailwind CSS. It lets you tweak Tailwind class, get smart suggestions, search classes and preview changes all in the browser without tabbing to the code editor.

Key features

• Smart class alternatives

• Search & preview any class

• Custom config support

• Search by CSS property

• Undo, redo support

• Efficient element navigation

• Tailwind v3, v4 support

• Layout & spacing guidelines & more

You can try it live here: https://taillens.io

📚 Learning

What I Wish Someone Told Me When I Was Getting Into ARIA

Eric breaks down all the mental models and gotchas that nobody talks about when they're teaching accessibility basics. He explains why your perfectly valid ARIA might not work with certain screen readers, why adding more ARIA doesn't automatically make things more accessible, and why the official ARIA Authoring Practices Guide can actually lead you astray. The best part is how he explains the historical context (ARIA was built in 2006 for Windows XP-era interactions) which makes all those weird keyboard navigation requirements finally make sense!

Installing Tailwind CSS v4 on Nuxt 3

What I love about this guide is how straightforward it is: just install the package, add the Vite plugin, import Tailwind in your CSS, and you're basically done. No complex config files or wrestling with PostCSS like the old days.

Container Query for “is there enough space outside this element?”

This is a brilliant little CSS trick that solves a problem you probably didn't even know you had! Chris shows you how to use container queries to detect if there's enough space outside an element to place things like pagination arrows. Instead of hardcoding breakpoints or guessing, you can actually test whether the viewport has room for your arrows plus some gap space, and if not, move them inside the component instead. The magic happens by combining viewport units with container queries - basically asking "is my container smaller than the viewport minus the space I need for arrows?" It's one of those techniques that feels almost too clever, but once you see it working, you'll probably find a dozen places where you could use this approach.

💅 Showcase

Help Kit

HelpKit is the no-code solution for web developers who want to transform their Notion documentation into professional knowledge bases and help centers without leaving their favorite writing environment. Simply connect your existing Notion pages and get a blazingly fast, SEO-optimized knowledge base with custom domains, embedded widgets, and professional branding in minutes.

🎁 Resource

uifonts.app

This is such a clever tool! UI Fonts lets you test and preview fonts in real-time across actual UI components instead of just boring Lorem Ipsum text. You can see how your typography choices look in forms, cards, navigation, modals, basically all the real components you're actually building. What I love is that you're not just picking fonts in isolation, you're seeing them in context with actual interface elements. It's perfect for when you need to convince clients or stakeholders that a font choice actually works in practice, not just in theory.

👌 Cool Stuff

Level up with Tailwind CSS v4 – A comprehensive eBook and video course covering advanced Tailwind concepts, tips, and real-world examples.

Claude Squad – A CLI tool to manage multiple AI code assistants like Claude and Aider in isolated git workspaces

Zero – An AI-native email client with keyboard shortcuts, smart summaries, and natural language commands to process emails faster.

LicenseDNS – A DNS-based software licensing system that uses DNSSEC for cryptographic verification without complex implementations.

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 😁.