Tailwind Weekly #103: Tailwind CSS is now the most popular CSS framework on NPM 🚀

Hello folks!

What a milestone, Tailwind CSS recently surpassed Bootstrap and became the most popular CSS framework on NPM 🎉, with 4.5 MILLION weekly downloads 🤯.

This is huge! It means more and more people are using and loving Tailwind ❤️. Now I can confidently say that Tailwind became mainstream 🤣.

Now onto our usual content 😉.

🌟 News

Shopify recently released a new blocklist feature. It basically allows you to define a list of classes you never want Tailwind to generate. Remember that Tailwind CSS generated its classes by parsing your code and looking for matches, so like the example Adam gave, if you have the word container on your page, then the container class will be added to your CSS even if you're not using the class. This new feature allows you "block" that generation.

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

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and it's 👌. Get a 20% discount if you use the code TAILWINDWEEKLY20 during checkout.  

📚 Learning

Tailwind CSS v3.2 Crash Course - Build a responsive conference landing page

Our friend Shruti just released a crash course on the latest version of Tailwind CSS and it's a must-watch! In a little less than an hour, she walks you through how to create a conference signup site that is completely responsive and has very minimal custom CSS. I think the video is both a code-along and a tutorial and a great link to share for people new to Tailwind or who want to learn about all the new stuff from v3.2.

How to use Tailwind CSS in a Shopify Hydrogen Project

Shopify recently released a new react framework for e-commerce headless site development called Hydrogen and the popular Shopify development Youtuber Chris published this video on how to set up Tailwind and how to convert their starter project to use it. If you use Shopify then you'll love this one!

Why you should never use px to set font-size in CSS

This is a great primer on why px values are horrible for font sizes and what are good alternatives to use from an accessibility standpoint, which I found very informative. It also gives you a good idea of why Adam decided to use rems instead of px for font sizes in Tailwind CSS.

💅 Showcase

Markee Lite

I saw this project mentioned on the Tailwind CSS discord and I liked the design so much that I just had to feature it this week! I particularly love the structure and layout of the design, it's simple enough but it packs a lot of readable info in such a short page.

It uses colors to correctly accentuate the most important parts but doesn't abuse them. And I think the icons and text effects add a very nice and unique touch to the page.

🎁 Resource

Defensive CSS

I have featured quite a number of articles from the talented developer Ahmad Shadeed but I believe this project is his best work yet. It's a compilation of multiple tips and tricks on how to structure your CSS code in such a way that it can handle whatever content you throw at it and it even applies to Tailwind CSS code too! Overall, I think it's a great resource to check from time to time.

👌 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. ‌

The Tech Resume Inside-Out - Learn what a good developer resume looks like, and how to write one. This is a practical guide written by the people who do the resume screening: engineering managers and technical recruiters working at tech companies.

Dracula PRO is a color scheme and UI theme tailored for programming. Made for terminal emulators, code editors, and syntax highlighters. Designed to be aesthetically pleasing while keeping you focused.

Smartr Daily is the essential newsletter for curious minds. By sourcing the smartest articles on the Web it brings you thought-provoking ideas and insights delivered straight to your inbox daily!

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