Tailwind Weekly #77: improvements to Tailwind Play and an upcoming new product!

By Vivian Guillen — Apr 2, 2022

Hello folks!

What an exciting week! We got an update to Tailwind Play and a new product category sneak peek for Tailwind UI.

If you do want to hear the behind-the-scenes story behind the new product the Tailwind Labs team is cooking I recommend you listen to this podcast episode from "The Art of Product" where Adam is very candid about it.

Now, onto our usual menu 😉.

🌟 News

First things first!

Steve made a very exciting announcement this week, regarding a new future project from the Tailwind Labs team. It seems the next product will be full-blown templates, instead of just component snippets.

Overall, I think it's a great move for the team and I, as someone who uses Tailwind UI components quite a lot, am very excited to see what designs they come up with. This will definitely be a must-buy for me 💸.

✨ New exciting things happening at @tailwindlabs.

Over the last few weeks, @jamesm and I have been designing a collection of official Tailwind CSS templates.

Here's a little peek. Stay tuned for more 👀 pic.twitter.com/wMnOeo9iKo
— Steve Schoger (@steveschoger) March 30, 2022

Second, Tailwind Play got a very big update with lots of features, including automatic code formatting, a new "Generated CSS" panel, and a new "Copy" button on the code editor, among other things.

We also got a very cool announcement from the creators of Windy and our very own sponsor Devtools for Tailwind, they launched a free tool that generates style guides automatically from your Tailwind config files.

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.

Sema has just published a white paper on why code reviews matter and how to integrate them effectively into your team and organization. You can read the white paper here.

📚 Learning

Using the Specificity of :where() as a CSS Reset

I kept hearing about the new :where pseudo-class a few months ago and didn't think much of it until I read this article. Now I understand why the Tailwind CSS team used to achieve the not-prose component reset feature, :where() works beautifully for resets and for carefully managing the specificity of your custom CSS. While I don't think it's a feature that you'll use often, I think it's valuable to have it in your arsenal.

💅 Showcase

Charlie Joseph

First of all, that logo is beautiful 😍!

This week's showcase is a personal site and while the design is very simple I find it clean, very well structured, and I love the typography too (Inter ftw!). Oh, and it's also fast as hell 🚀.

🎁 Resource

TailwindCSS V3 Design System

Do you love working with Figma and with Tailwind CSS? Then you'll love this week's resource. It's basically "an unofficial design system tokens for Tailwind CSS". Great as a nice starting point when designing a website and wanting to stick to Tailwind CSS defaults.

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

Design2Tailwind - We convert your design to Tailwind CSS. Focus on your business logic. Leave the markup code in our capable hands.

Inspect Flow - The complete developer tool for Tailwind CSS. 50% off sale: inspectflow.io

Designing on your own and want fancy icons? Check out Iconfinder, they have the biggest and best selection of icons I have ever seen. All from highly talented designers from around the world.

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

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