Tailwind Weekly #189: New Catalyst Update, Course Template Sneak Peek, and New Editor Themes coming soon 🔥

Hello folks!

We got some cool updates this week and some very nice learning resources; hopefully, you learn something new with this issue!

On a side note, if you’re planning to go to Laracon US this year, then don’t miss the Q&A panel with Adam, Evan (the creator of Vue), and Taylor (the creator of Laravel). I won’t be able to attend this year, but I’ll definitely watch the livestream!

Let's dive in!

🌟 News

New update for Catalyst ⭐️ 

The team shipped a brand new Combobox component, as well as three new auth page examples, including a login page, a registration page, and a forgot password page. Also this is a free update for existing Tailwind Plus subscribers!

New official template coming soon 🎨 

Adam teased the initial design of the next official template, and this looks like it’ll be for online courses. Already looking pretty good, and I’m excited to see the full list of pages!

New Tailwind CSS editor themes just around the corner 💻️ 

If you have seen any of the recent Tailwind CSS channel videos, then you probably saw that they have their own custom editor theme. Well, they decided to share it with everyone and are planning to release it soon 😄

🤩 Windy Picks

🚀 Master Tailwind CSS Faster & Smarter! 🚀

Struggling to master the full power of Tailwind CSS? Sure, the basics are easy, but hidden tips, advanced workflows, and nuanced flexibility? That’s where Level up with Tailwind CSS v4 shines. 🌟

Authored by the global conference speaker and educator Shruti Balasa (creator of 30+ popular Tailwind tutorials), this guide takes you from beginner to pro with real-world examples, creative techniques, and time-saving tricks. Available as:

✨ eBook ($33): Dive deep with sample codes & demos.
🎥 eBook + Videos ($59): Hands-on visuals for faster learning.

Get better at using Tailwind CSS!

📚 Learning

First Look at The Modern attr()

Ahmad's article walks you through the modern attr() function, which now supports multiple value types like colors, numbers, lengths, and more. The tutorial is packed with practical demos showing how to use this for grid layouts, animation delays, progress bars, and even mini utility frameworks (think Tailwind-like attributes without the classes). What I found most valuable were the real-world examples that demonstrate how this approach can make your code cleaner while separating content from styling. Though it's currently Chrome-only, this powerful feature is definitely worth keeping on your radar.

CSS Relative Colors

Another great one from Ahmad! He walks through the powerful new relative colors feature that lets you dynamically modify colors without needing Sass or color pickers. The interactive demos really shine here - you can see exactly how to take an existing color and adjust its opacity, lightness, or even create complementary colors with simple syntax like oklch(from var(--brand) l c calc(h + 90)). What I found most valuable was the comparison between different color spaces (HSL vs OKLCH) for creating accessible color palettes with consistent contrast ratios. The practical examples cover everything from button hover states to shadows, gradients, and even creating grayscale versions of colors.

Three Approaches to the “&” (ampersand) Selector in CSS

This helpful article walks through three practical ways to use the ampersand selector in native CSS: linking class names for modular components, targeting parent elements for state-based styling, and managing recurring selectors for spacing. The author nicely explains how & works differently in vanilla CSS compared to Sass (representing complete selectors rather than strings), and shows you workarounds using attribute selectors to achieve similar naming patterns. If you've been looking to organize your CSS better without relying on preprocessors, these techniques offer a nice balance of maintainability and clean structure for your stylesheets.

💅 Showcase

Update

Update is a developer-focused toolkit that makes implementing authentication, billing, and subscriptions in your app ridiculously simple. It seamlessly integrates with Supabase and Stripe, letting you add payment systems and user permissions in minutes instead of weeks. If you're building a SaaS product and want to skip the headache of piecing together payment infrastructure, this might be the biggest time-saver you'll find this year.

🎁 Resource

Brands Tail Color

I just came across this awesome little utility that's super helpful if you're working with brand colors in your Tailwind projects. It's basically a configuration generator that lets you easily add popular brand colors (think Twitter blue, Spotify green, etc.) as background, text, or border colors in your Tailwind setup. The colors are sourced from brandcolors.net, so they're accurate, and the tool outputs ready-to-use config you can drop right into your project.

👌 Cool Stuff

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

Pico.sh – Developer toolkit for deploying websites, tunneling localhost, and sharing content - all via SSH commands you already know.

Wasp – Rails-like framework that combines React, Node.js and Prisma with a simple config language, helping you build full-stack web apps in record time.

shiki-stream – A library for streaming syntax highlighting with Shiki, perfect for real-time code highlighting in LLM outputs and text streams.

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