Tailwind Weekly #105: Learn all about color formats, the history of CSS and :where() 🤓!

Hello folks!

It's been a quiet week on Tailwind CSS land, the Tailwind Labs team is probably recharging and taking a breather, which is very well deserved ❤️!

I did want to remind you that our friend Simon is continually posting cool short videos about different Tailwind features, be sure to follow him on Twitter!

Now onto our usual content 😉.

🤩 Sponsors

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.

"Rethinking Reusability in Vue" is a 150+ page book about Vue 3 best practices. It's full of code examples and diagrams, with extra advice for Tailwind users. Perfect for alumni of Adam Wathan's "Advanced Vue Component Design" course! $49 $39 with code TAILWINDWEEKLY at checkout.

📚 Learning

Color Formats in CSS - hex, rgb, hsl, lab

Another incredible guide from Joshua, this guy is a machine! This is everything you need to know about working with colors in CSS plus a look at what's coming soon to evergreen browsers. Overall, a great read!!

The evolution of scalable CSS

This is a great recap of how CSS first started, how it has evolved over other years, how people have come up with strategies on how to better use it, and how we got to the utility classes trend led by Tailwind CSS. I have to admit it made me quite nostalgic!

CSS :where() to replace complex multi-selectors

Another great post about the use of :where() to optimize your CSS selectors. :where allows you to stop repeating yourself when writing custom CSS and its browser support is excellent.

💅 Showcase

Florian Kapfenberger

Another personal site this week but this one is special, it's so colorful! Even tho it uses Tailwind CSS default colors, the combinations really pop. Also, the dark mode is gorgeous and the big font really helps with readability. Overall a great personal site example!

🎁 Resource

Tinymotion

Love Tailwind, Vue, and animations? Then you'll love this library! Tinymotion is a small animation library made for Vue.js and it's compatible with Tailwind CSS utility classes. The setup is pretty simple so you can get started with it pretty quickly!

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

Become a Pro at building components & layouts with CSS Flexbox and Grid with the Complete Guide to CSS Flex and Grid ebook by Shruti Balasa. I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

Ankur Tyagi's The Prime Guide For Next Gen Developer contains everything you need in a typical career path of a software engineer or developer. From starting at a company as a fresher or new grad to a senior software engineer.

Caleb Porzio's ​Make VS Code Awesome course is an excellent course on customizing and improving your VS Code experience. I bought it recently and it completely changed how I set up and use VS Code, for the better!

Many of the most impactful leaders know exactly what they need to accomplish before the day starts. They use productivity apps like Sunsama to help them organize their weekly goals and smaller tasks to become the most productive version of themselves. Signup for a 14-day trial (no credit card needed)

✌️ Partners

CSS Simplified by Shruti Balasa: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

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

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