Tailwind Weekly #52: now you can use JIT mode with the CDN + new video!
Hello folks!
This week we have a new video, this time about animations in Vue with Headless UI.
We also got an awesome article from Sara Dayan. It outlines the best defense I have ever seen against calling TailwindCSS just inline styles. Definitely a good read.
Plus, of course, the usual 😉.
🌟 News
We got a couple of important pieces this week.
- Adam mentioned on Twitter that v2.2 is coming and it’s looking pretty awesome. You can check out the unreleased stuff so far, here.
- The people behind Windy and Tint just came up with another cool thing, now you can use the JIT mode with the CDN. You can even add config to it, it’s 🤯.
- New video! Orchestrating Nested Transitions in Vue.js with Headless UI and Tailwind CSS
🤩 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
No, Utility Classes Aren't the Same As Inline Styles
If you have been on Twitter lately you probably saw all the drama related to TailwindCSS in the past few weeks. This article addresses some of the biggest criticisms towards tailwind that were the focus of the drama and it does it VERY well. This has become my go-to article whenever I hear the classic “but tailwind is just like inline styles” line.
💅 Showcase
Granor Farm
You know I’m a huge fan of shapes for web design but I’m ALSO a big fan of drawings, and this site has A LOT of them. They look very classy and almost pencil-drawn. That, coupled with the pattern backgrounds and the subtle colors gives it a soothing vibe.
For the curious:
Granor Farm is a certified organic farm located in Three Oaks, Michigan. We grow organic vegetables, flowers, herbs, and grains. Membership in a seasonal…
🎁 Resource
Hypercolor - Tailwind CSS Gradient Palette
Ever since we got gradients in Tailwind I have been playing around with them but I must admit that I sometimes lack creativity and I’m sure you face this too. So many pretty colors but which combination would look good? This site addresses exactly that!
Hypercolor is a curated collection of beautiful premade gradients using default colors from the Tailwind CSS color palette. 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!
At Tailwind Made, we launched our newest template, Masterclass! Masterclass is a premium template with a beautiful design, tailored specifically for online courses but can be used for digital products in general. We also have a portfolio, business, blog, and e-commerce template if you’re interested.
Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using this link you’ll get 20% off your subscription applied at checkout.
From the makers of Windy, comes Tint, the color picker for TailwindCSS developers. But it’s not like any other color picker out there, no sir, this thing automatically takes the color of whatever you have your cursor on and translates it to the nearest Tailwind CSS color. It’s macOS for now and supports Tailwind v1, v2 and v2 extended color palettes.
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 😁.
