Tailwind Weekly #197: Package Updates, Cool Tech Deep-Dives, and New Anchor Plugin Magic ✨!

Hello folks!

I decided to try something new for the news section: package updates! I’ll be documenting the latest updates to the official Tailwind CSS packages since the last issue. I hope you find it useful 😄 !

Let's dive in!

🌟 News

Here's what's new in the Tailwind ecosystem:

Tailwind CSS Core v4.1.11

Vue 3 Developers, Rejoice! 🎉
The migration script was getting a bit too eager and changing your Vue 3 event emissions. You know how emit('blur', props.modelValue) was mysteriously becoming emit('blur-sm', props.modelValue)? Yeah, that was annoying. It's fixed now.

Clojure/ClojureScript Support Gets Better
If you're using Tailwind with Clojure or ClojureScript, class extraction is now more accurate. Keywords like :hover:text were getting split incorrectly before, but now they're properly recognized as complete variant-prefixed classes.

Vite 7 Support is Here
Using Vite 7? The @tailwindcss/vite plugin now supports it! Just a heads up though - you'll need Node 20.19 or 22.12 minimum since Node 18 support was dropped.

Better CLI Documentation
The --watch=always flag is now properly documented in the CLI usage. Small but helpful!

Prettier Plugin v0.6.13

Svelte Files Won't Break Anymore

Previously your Svelte files could completely break if you had duplicate classes in template strings. That's fixed now. The plugin will preserve duplicate classes in string literals without breaking your project.

Plugin Compatibility Improvements

If you're using multiple Prettier plugins (like prettier-plugin-multiline-arrays and prettier-plugin-jsdoc), they now play nice together with the Tailwind plugin. The load order has been optimized to prevent formatting conflicts.

VS Code Extension v0.14.23

Better Syntax Highlighting for @theme

The @theme at-rule now has proper syntax highlighting for:

• CSS variables

• Comments

• Nested at-rules

It's one of those small improvements that makes your code look cleaner and easier to read.

Astro Support Improvements

If you're using Astro, the extension now properly detects class functions and class attributes inside code fences. This means better IntelliSense support when you're working with JavaScript blocks in your Astro files.

That's it for this update! Nothing groundbreaking, but these fixes will definitely make your workflow smoother.

🤩 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

The CSS @layer at-rule

Chris breaks down how the new CSS @layer at-rule can help you control which styles take priority, even if you’re not using a build tool at all. He explains the age-old cascade problem and shows how @layer lets you group your CSS into things like “core” and “utilities” so your overrides always work the way you want, no matter what order your files load.

Why JPEG Became the Web's Favorite Image Format

Learn how JPEG didn’t just show up overnight, it was painstakingly developed as a true standard by a committee of big industry players (unlike the GIF, which was more of a one-person show), and that openness helped it take over as the go-to image format. The piece also explains what actually happens when you compress a JPEG, why it handles photos so much better than GIFs or PNGs, and even dives into the weird patent battles that nearly derailed its rise.

Passkeys for Normal People

This article is a super practical, real-world walkthrough of what passkeys are, why you should care, and how they actually work across different services like WhatsApp, LinkedIn, and Ubiquiti. The author kicks things off by showing how even two-factor authentication with authenticator apps can still leave you open to phishing attacks (with a very relatable personal story), and then dives into how passkeys offer a much more “phishing-resistant” way to log in. You’ll see step-by-step how to set up passkeys on your devices, how you can store them in password managers like 1Password to sync across mobile and desktop, and even how hardware keys like YubiKey add an extra layer of security.

💅 Showcase

Echobell

Echobell is a robust alerting platform designed to empower web developers with flexible notification options, including phone calls for urgent updates, webhook integrations for automation, and email triggers for alert management.

🎁 Resource

Anchors for Tailwind CSS

This Tailwind plugin lets you declaratively define anchors and position elements relative to them, all using readable, composable utilities like anchor/{name} and anchored-{side}/{name}. You get granular control over offsets, conditional visibility, fallback positioning, and even built-in View Transitions support for animations. The plugin is fully JIT-compatible, plays nicely with both Tailwind v3 and v4, and has clever syntax to make working with CSS variables and anchor names feel intuitive.

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

syntax-highlight-element – Use the CSS Custom Highlight API for fast, customizable syntax highlighting with native web components.

Sites – An open-source Vercel alternative to build, deploy, and scale web apps with integrated backend, SSR, and DDoS protection.

Brief – A PHP library to build stylish, extensible email templates with Tailwind CSS and modern components.

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