Tailwind Weekly #187: Variables Cleanup, v4.1 Safelisting, and Windybase launch 🤩

Hello folks!

This week we got more developer experience updates for Tailwind, a peek at v4.1 new features, and a product launch from yours truly 🙈 . I have been working on it for months and am now finally ready to show it to you all! See the Windy Picks section for more 😄 .

Now, let's dive in!

🌟 News

Two new updates this week!

The Tailwind Labs team recently released an update that removes all unused theme variables from your generated CSS, so your CSS variables will be cleaner now 😇 .

Next: CSS-based safelisting support is coming in Tailwind CSS v4.1!

It’ll use brace expansion instead of regular expressions, which makes the generated CSS much more predictable and also makes this whole thing much more compatible with how dynamic things are in v4. No ETA yet but stay tuned!

Fun part: while testing this feature, the team figured out a way to generate “over 5 million classes and at least 600mb of static CSS” 😂 

🤩 Windy Picks

🚀 Building websites takes time, unless you have the perfect starting point.

Enter WindyBase: your go-to directory for free and premium Tailwind CSS templates and components. Whether you're eyeing sleek landing pages, modern dashboards, or e-commerce templates, we've got what you need to develop faster 🌟.

Every week, we handpick the best resources to simplify your workflow. No more searching, find everything in one place!

Check out WindyBase today and never start a project from a blank canvas again 🔥 

📚 Learning

Add Custom Colors in Tailwind CSS v4

This is a great explainer about the biggest change in Tailwind CSS version 4: moving from JavaScript configuration to CSS-first theming! The video shows how to add custom colors using the new @theme directive and CSS variables instead of the old tailwind.config.js approach. I love how Shruti demonstrates it with a practical chocolate-themed website example, showing both a base "chocolate" color and a "chocolate-dark" variant. If you've been wondering how to customize your Tailwind v4 projects, this tutorial makes it super straightforward and the new approach actually feels more intuitive for CSS developers.

Why the number input is the worst input

The piece dives into the nitty-gritty of why the <input type="number"> might not be your best friend when building complex forms, especially when dealing with intricate logic and conditional validations. The author, with 15 years of front-end coding experience, shares insights from their journey, explaining how they learned to navigate the quirks and pitfalls of using number inputs. They introduce Keenforms, a no-code form builder, and discuss the challenges of using number inputs, like inconsistent browser behavior and accessibility concerns.

More Details on details

The article dives into the intricacies of styling elements within <details>, uncovering how the HTML spec and browser implementations may not always play nice together. It also explores the role of <summary> as an interactive element and the challenges it poses for accessibility tools.

💅 Showcase

NotePlan

NotePlan is the ultimate productivity hub for web developers, seamlessly integrating notes, tasks, and calendars into one powerful app. With its advanced task scheduling, customizable templates, and bi-directional linking, NotePlan allows you to manage your daily agenda, long-term projects, and personal knowledge all in one place.

🎁 Resource

GriddyIcons

These icons are a total game-changer for web design. Built with stroke-based layers and live corners for Figma and Framer, these icons give you amazing customization options while staying visually balanced and polished. The ability to request custom icons makes this perfect for any SaaS product needing a cohesive look.

👌 Cool Stuff

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

Siddharth's Newsletter – A VC investor's insights on tech startups, emerging technologies, and funding opportunities in the ecosystem.

Yemi's Newsletter – A weekly digest delivering entertaining story breakdowns, creator opportunities, and handpicked deals with a humorous, casual tone.

Marketing Simplified – A resource for business owners to master Google visibility through SEO, map listings, and ad strategies for local growth.

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