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 😉.
We got a big official blog post on the Tailwind Blog, here's the TL;DR:
- Headless UI v1.6 is out. Includes multi-select support, better HTML form support, and better focus trapping
- 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.
- Vue examples in Tailwind UI now use
<script setup>. A small but powerful change for Vue 3 users.
- 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!
- 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!
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.
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!
Yew is a front-end framework for WebAssembly in Rust, this article shows how to add Tailwind CSS to a Yew project using
, 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.
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.
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!
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.
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.
Want to support the newsletter? You can buy me a coffee with the link below 😁.
Stay up to date with the Tailwind CSS firstname.lastname@example.org
Join other subscribers today.