- Tailwind Weekly
- Posts
- Tailwind Weekly #198: Tailwind Insiders Launch, Maizzle v5 is A Game Changer, and More Dev Tools 🚀
Tailwind Weekly #198: Tailwind Insiders Launch, Maizzle v5 is A Game Changer, and More Dev Tools 🚀
Vivian Guillen
July 05, 2025
Hello folks!
What a week! Tailwind CSS just dropped their first-ever sponsorship program, and it's way more interesting than your typical "support us" setup. We're talking private Discord access, custom AI rules, and behind-the-scenes content that'll make any Tailwind enthusiast pretty happy.
Let's dive in!
🌟 News
Tailwind CSS just launched their sponsorship program 🎉
Adam and the team are calling it "Tailwind Insiders" and it's packed with some genuinely useful perks that go way beyond just supporting the project.
What makes this interesting:
Private Discord access - This is the big one for me. Adam mentioned it's already got a way better vibe than the massive public servers, and he's planning to share work-in-progress stuff there. That's pretty exciting if you're into seeing behind-the-scenes development!
AI rules that actually work - You get access to Adam's custom Cursor/Claude rules that make LLMs stop generating terrible Tailwind code. If you've ever fought with AI trying to use outdated syntax, you'll appreciate this 😅
Custom VS Code themes - Four Tailwind-inspired themes based on what they use on the website. Adam says he's been using the "Dark (Enhanced)" one for years and can't switch to anything else.
Raycast extension - Super handy for quick lookups like getting CSS for specific classes, checking specificity, finding the nearest Tailwind color for hex codes, or converting pixel values to Tailwind utilities.
Early access - Pre-release docs and behind-the-scenes source code + Figma files for all those little demos they build for social media and YouTube.
Honestly, even if you're not a huge Tailwind fanboy, the Discord community alone sounds like it could be worth it. There's something appealing about being part of a smaller, more focused group where the actual team is actively participating and sharing their process.
Now let’s talk about updates in the ecosystem!
Theme Namespace Highlighting Fixed
Previously, using theme namespaces could cause syntax highlighting issues.
The extension now properly highlights code when you use theme namespaces inside --value() and --modifier(). This means your custom CSS variable references like --value(--var-spacing) won't break the pretty colors anymore.
It's a small fix, but if you're working with custom theme values, you'll appreciate having proper syntax highlighting back.
If you're building HTML emails with Tailwind CSS, Maizzle 5 is a game-changer. Here's what launched with v5:
The Big Stuff
10x Faster Local Development* Remember waiting forever for your email templates to compile? Those days are gone. The new dev server with Hot Markup Replacement™ (HMR) makes development blazingly fast.
Modern Tooling
npx create-maizzle- Start a new project in secondsRevamped CLI with better commands
Streamlined configs that actually make sense
Better CSS Support
Finally, you can use modern CSS features like:
CSS variables (
var())calc()functionsBetter handling of color opacity modifiers (important for Gmail!)
New Template Tags
<env:?>- Conditional rendering based on environment<template>- Better template composition
Content Source Globs You can now use glob patterns to specify which templates to build. Way more flexible than the old system.
🤩 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.
📚 Learning
This beautiful piece dives deep into why Tailwind CSS sparks such strong opinions, both good and bad, and gives a really fair look at both sides. The author has years of hands-on experience and totally gets why some people see Tailwind’s “opinionated” approach as a pain, there’s a learning curve, the classes can get long and messy, and adding another build step isn’t always fun. But at the same time, they make a strong case for why those opinions actually help teams move faster, avoid decision fatigue, and keep design consistent (which designers love, by the way).
This is a super practical breakdown of how different values for grid-template-columns, like 1fr, 50%, and auto, actually behave in CSS Grid, even though at first glance they all seem to give you two equal columns. It goes beyond the basics and shows you with real examples (and gotchas!) how things start to diverge when you add column gaps, squeeze in images, or deal with unpredictable text. You’ll see why percentage columns can be awkward, why auto can get weird with text sizing, and why fr units usually feel the most intuitive, but also learn about their surprising quirks, especially with overflowing content.
The author breaks down the concept of the “critical rendering path”, basically the step-by-step process your browser takes to get actual content on the screen. You’ll learn why certain resources (like HTML, CSS, and sometimes JavaScript or fonts) are considered critical, how tools like Lighthouse help you spot slowdowns, and why optimizing which files load first can seriously boost your page speed (and even your Google rankings). There are also some handy tips about what counts as a critical resource, how to spot render-blocking files, and why extracting and inlining only the CSS needed for what’s visible “above the fold” can make a big difference.
💅 Showcase
Artillery is a cloud-native, serverless load testing platform built for developers who demand fast, scalable, and reliable systems. Simulate millions of users, test everything from GraphQL APIs to WebSockets, and integrate with your CI/CD and observability stack, all while running distributed, cost-efficient tests directly in your own AWS or Azure account.
🎁 Resource
This fluid token calculator lets you create as many custom fluid tokens as you need, then instantly grab the CSS to drop into your projects. There’s even built-in visualization for tweaking your min and max values, plus extra calculators if you want a more comprehensive setup for type and space. Definitely worth a look if you’re aiming for that perfect balance between flexibility and control in your designs.
👌 Cool Stuff
Tail Lens - A browser tool to tweak classes and preview the results instantly in-browser, then copy the final classes straight into your code for a guaranteed productivity boost.
Mailfrom.dev – Easily test, preview, and debug transactional emails in your local development environment.
BlockAlert – Instantly see why your site visitors are blocked and get actionable steps to resolve security triggers fast.
Amber – A modern, type-safe language that compiles to Bash and catches bugs at compile time.
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 😁.