Tailwind Weekly #84: new Headless UI update, VS Code language mode and upcoming variant grouping support!

Hello folks!

The Tailwind corner is as lively as ever! We got a few official updates plus some sneak peeks of upcoming stuff.

Even a bonus from Adam: if you find it annoying that you can't use the dev tools color picker when working with Tailwind CSS, here's how to make it work!

Now, onto our usual menu 😉.

🌟 News

We got a big official blog post on the Tailwind Blog, here's the TL;DR:

1. Headless UI v1.6 is out. Includes multi-select support, better HTML form support, and better focus trapping
2. Tailwind UI now has better team management. No more sharing passwords with your coworkers, now your company can buy licenses for each of your teammates.
3. Vue examples in Tailwind UI now use <script setup>. A small but powerful change for Vue 3 users.
4. We now got our own language mode for VS Code! No more squiggly error lines in your CSS files, now you can set your CSS files to Tailwind CSS language mode!
5. Tailwind CSS templates, the upcoming new product category for Tailwind UI, is coming soon, possibly this month.

We also got another tidbit from Adam. There's upcoming experimental support for variant grouping, imagine being able to write your classes like this:

<button
  type="button"
  class="focus:(outline-none,ring-2,ring-offset-2,ring-indigo-500)"
>
  Button text
</button>

Some people prefer it this way and have been requesting it for ages now, it'll possibly be released on the upcoming 3.1 update so stay tuned!

🤩 Sponsors

The sponsor of this issue is the DevTools for Tailwind CSS browser extension. The DevTools for Tailwind bring back designing and debugging in your browser. Intellisense autocompletion, full JIT engine support in minified production sites, and more. Get a 20% discount if you use the code TAILWIND-WEEKLY during the checkout.

We convert your design to Tailwind CSS. Focus on your business logic. Leave the markup code in our capable hands. Just fill out our 3-minute questionnaire and get a quote in 24 hours.

📚 Learning

Another great code-along video from Simon, I love watching Simon's videos because he explains why he uses some classes, and not just shows you how to use them. I always end up learning something new!

How to set up Tailwind in Yew

Yew is a front-end framework for WebAssembly in Rust, this article shows how to add Tailwind CSS to a Yew project using wasm-pack, which is like webpack but for Web Assembly. Honestly, I was surprised at how easy its to add it, I thought it was going to be a bit more convoluted.  

How to work with background images in Tailwind CSS

Here's another tailwind-specific tutorial for you, written by yours truly! This time, I wrote about 3 ways to use background images in Tailwind CSS and with some additional tips for hero images and using them on different breakpoints.

💅 Showcase

Laravel Vapor

This week I bring you an incredible landing page, the Laravel Vapor homepage. Great typography, clean design, beautiful color combinations, and pretty shapes everywhere. And the copy and structure, while a mix of traditional and modern, looks and sounds powerful!

🎁 Resource

tailwindcss-plugin-starter

Ever wanted to create your own Tailwind CSS plugin? This plugin starter is what you need! Includes examples of the Tailwind's API, tests with Jest, and even code formatting with prettier. Made by Cosmin, the author of Maizzle and various other plugins for Tailwind CSS.

👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Polypane is a great tool for testing your project’s responsive design and accessibility. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

I highly recommend LambdaTest as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

There's a reason over 2.6 million people start their day with Morning Brew — the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

If you want the latest crypto news but you don't want it to be dry and confusing, join the 60,000 people who read the CoinSnacks weekly newsletter for free every week. It’s what you need to know… without the fluff.

✌️ Partners

This Week In React: the best of React & React-Native news. Sebastien filters the noise, and you save time!

TypeScript Weekly: the best TypeScript links every week, right in your inbox.

ES.next News: learn about the latest in JavaScript and cross-platform tools

Want to share something with the TailwindCSS community? You can submit a link or message me on Twitter @vivgui.

Want to support the newsletter? You can buy me a coffee with the link below 😁.