Tailwind Weekly #102: Tailwind CSS turns 5 š„³
Hello folks!
First off, Tailwind CSS turned 5 years old last October 31st, what a milestone! I started using Tailwind in 2018, only 1 year after it was out and it has come such a long way! I still remember when we had to use PurgeCSS as a separate build step and the file sizes in dev mode were in the megabytes š¤£.
Now Tailwind CSS is a mature framework and it's more powerful than ever, let's hope for more great years to come!
Now onto our usual content š.
š News
As part of the 5 year celebration tweet, Adam shared some metrics and I wanted to highlight them here too.
Tailwind CSS:
- š Has a team of 7 full-time developers and designers
- šµ Is a sustainable bootstrapped business
- š² Is used by 2.8 million projects on GitHub
- š¤Æ Has over 168 million total downloads
- š„ It's just days away from becoming the most downloaded CSS framework on npm
I also want to mention the new Showcase page on the official website. It features websites with very unique designs, all made with Tailwind, in an effort to show developers just how varied and unique websites can be, when coded with Tailwind CSS.
š¤© 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.
We convert your design to Tailwind CSS. Focus on your business logic. Leave the markup code in our capable hands. Just fill out our 3-minute questionnaire and get a quote in 24 hours.
š Learning
Using CSS Container Queries with Tailwind CSS
This excellent video shows how powerful container queries in Tailwind can be. It shows you the old way of coding a responsive design and then it walks you through how to transform that into container queries. A great watch indeed!
Use cases for CSS comparison functions
Another great piece from Ahmad Shadeed, this one shows you multiple use cases that AREN'T about fluid sizing, for comparison functions like min(), max(), and clamp() . The use cases range from positioning elements to creating decorative elements, all the way to creating a fancy loading bar. Overall, a great read.
I also wanted to encourage you to follow our friend Simon, he has been tweeting great tips about Tailwind CSS, like how to use arbitrary properties, how to use container queries, and how to use the new data attribute variants. The best part is that all the tips are in video form so you can actually see Simon coding the tip!
š Showcase
FSJam
This week I'm showcasing the website for the FSJam podcast with a twist, it's actually using a customized version of the podcast template Transmit from Tailwind UI. This one uses a dark mode and it's more on-brand with the logo I have to say I love the tech logos pattern they're using! Overall, it's a great example of how to make those templates your own.
š Resource
tailwindcss-fluid-type
This one is a cool plugin to do fluid typography in Tailwind CSS. If you're wondering what that is here's a CSS Tricks article explaining it but in short, it's a way to make font sizes scale depending on the size of the viewport. In my opinion, it's a more involved and customizable way to work with font sizes and can be a great choice for some use cases.
š 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.
Inspect Flow - The complete developer tool for Tailwind CSS. 50% off sale: inspectflow.io
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.
Join more than 3.1k Web Weekly subscribers and become a better web developer with quick-to-read resources that you won't find elsewhere. Learn more about fundamentals, discover new tools, and have a good time!
āļø 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 š.
