Hello folks!

No major news on the Tailwind CSS front this year, but if you got early access to ui.sh then better check the Discord chat, Adam announced huge improvements to the skill, including a cleaner install and way more guidelines.

Let's dive in 👇

🤩 Windy Picks

Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick 3-minute form and receive a tailored quote within 24 hours, and for the next 2 weeks, we're offering a 20% discount on all new projects 🤑.

📚 Learning

Chip Away

This is a really thoughtful deep-dive into one of the most confusing UI patterns out there: "small text with a background color that may or may not be interactive", aka chips, badges, pills, tags, lozenges, you name it. Donnie D'Amato breaks down why these components are so problematic, from the fact that users can't tell them apart to the bigger issue of not knowing if they're even clickable (he calls it "Schrödinger's Button" 😂). He also covers tag inputs and their accessibility pitfalls, offering simpler alternatives that work better for everyone.

Lowering the specificity of multiple rules at once

Here's a neat CSS trick you might not have thought of! Manuel Matuzovic shares how he went from wrapping individual selectors in :where() to using an anonymous @layer to lower the specificity of all rules at once in his reset stylesheet. The beauty of it is that unlayered CSS always overrides layered CSS, so your styles will always win, no matter the order of your files. He also covers the nuances of working with named layers, avoiding naming clashes, and how you can even nest anonymous layers inside existing ones to fix specificity issues.

Unstacking CSS Stacking Contexts

Gabriel Shoyombo does an excellent job explaining CSS stacking contexts using a desk-and-folders analogy that finally makes things click. He walks through three common scenarios, trapped modals, submerged dropdowns, and clipped tooltips, and shows you exactly how to debug them with a step-by-step checklist. You'll also learn about handy tools like Edge's 3D View and browser extensions that visualize stacking contexts, plus practical fixes like DOM restructuring, adjusting parent contexts, using Portals, and the underrated isolation: isolate property.

💅 Showcase

chatwoot

Chatwoot is an open-source, omnichannel customer support platform with Captain built in—an AI agent and Copilot that learns from your help center, FAQs, and past conversations to automate replies, suggest responses, and translate in real time. Extend it with developer APIs to build custom workflows and integrations, ship a fully branded live chat widget, and support channels like email, web, social, and WhatsApp from one dashboard.

🎁 Resource

SVGOMG

If you work with SVGs regularly (and if you're using Tailwind, you probably are), you need this tool in your bookmarks. SVGOMG is a web-based GUI for SVGO, the popular SVG optimizer, and it makes minifying your SVGs super easy. Just paste your markup or upload a file and you'll instantly see the before/after file size — we're talking up to 40-60% savings in most cases! What I really love is the granular control it gives you. You can toggle individual optimizations like removing metadata, collapsing groups, converting shapes to paths, and a ton more. It's recently been updated to SVGO v4.0.0 too, so you're getting the latest and greatest.

👌 Cool Stuff

Windybase - Explore weekly curated free & premium Tailwind templates, components and tools to help you build modern websites and apps fast.

RevoGrid – A powerful data grid with a simple API and quick setup, with integrations for React, Vue, Angular, Svelte, and JS.

ToDiagram – Turn JSON, YAML, CSV, or XML into interactive two-way diagrams to visualize, edit, compare, and export.

Seenode – Connect GitHub, pick a repo, see it live in 4 minutes. Claim it when you're ready. No account needed, no credit card. 7-day free trial.

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