Tailwind Weekly #59: Tailwind UI Ecommerce is out baby 😎!

Hello folks!

We took a break for a few weeks to chill but we’re back as usual now.

In the meantime, we got a brand new Tailwind UI package and a Headless UI update, the Tailwind Labs team sure has been busy!

I also wanted to mention that we recently reached 1500 subscribers 🥳. Thank you all for reading our issues every week, it’s been an absolute pleasure to write to you about a topic I love so much!

Now, let’s get on with the issue 😉.

🌟 News

Tailwind UI Ecommerce is out baby 😎! The package has everything section and component you can think of that you’ll need for a modern ecommerce website. If you work with Shopify or Woocommerce or the like then this is a great buy, even more, if you already have the Application and Marketing packages, go get it!

We also got a new update for Headless UI, now we have tabs!

🤩 Sponsor

The sponsor of this issue is Windy – the browser extension that transforms any HTML element into a Tailwind CSS component with a single click. Save hours or days when you convert your non-Tailwind sites to Tailwind or go to any website and see how you can build any element with Tailwind CSS. Get a 20% discount if you use the code TAILWIND-WEEKLY during the checkout.

📚 Learning

Exploring JIT mode in Tailwind CSS

If you somehow missed the JIT announcement and/or want to find out what’s new between the release and now then this article is a great overview. It comes with code examples and everything.

How to use custom fonts with TailwindCSS

Shameless plug! We started writing content at the Red Pixel Themes blog and here’s our first tutorial post! We know the Tailwind Labs team released a video of this a few weeks ago but we think its also good to have it in writing. Expect more posts in the future!

💅 Showcase

This week I bring you a clean and very readable landing page for a boring but incredibly useful SaaS app. This one focuses more on clean typography and good informational structure. For the folks who don’t do fancy designs but still want a good landing page, this would be a great inspiration.

For the curious:

Rails translation management platform, which can help you collaborate on your translations even with your non-tech teammates.

🎁 Resource

tailwind-merge

Oh man, this week’s resource is so cool! It’s kind of a solution to a very annoying problem you’ll probably come across if you use Tailwind with Vue or React.

The main issue is that, depending on how you handle your props on your app, you may end up with duplicated properties, something like this: border rounded px-2 py-1 p-3 which could have unintended side effects.

Tailwind Merge solves this issue for you, and it works as a utility function. . It supports Tailwind v2.0 up to v2.2, and it’s fully typed. Definitely check it out!

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

Want to learn how to improve your debugging CSS skills and reduce the time you spend on CSS bugs? Then you really need to read Debugging CSS! You can use coupon code tailwindweekly for a 15% discount ✌.

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our official blog post about the move. Our templates stay the same. We have portfolio, business, blog, and e-commerce templates if you’re interested.

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