The Tailwind Labs team continues being hard at work on project Catalyst and Steve is showing the love by sharing more UI sneak peeks. Do check the news section for more info.
Adam mentioned on the announcement that they would be releasing it this summer so it'll probably be a few weeks more 🤞🏻.
P.S. I'm currently looking for my next role. If you're looking for a seasoned frontend dev who loves Tailwind CSS, has 7+ years of experience with Vue & React, and wants to learn backend, email me 😁.
Now onto our usual content 😉.
We got another great sneak peek from Steve about project Catalyst and it seems the project is partly on the documentation stage.
Steve also shared another set of components for project Catalyst, this one is all about checkboxes, radios, and toggle switches. I'm honestly loving the color combinations and the simplicity. Definitely looking forward to tinkering with them soon!
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.
Another great piece from the Polypane blog. This one is a fun guide to understanding two complex and powerful CSS concepts, offset parent and the stacking context.
Think of the offset parent as the "where" we place things on a webpage, and the stacking context as the "which goes on top" rule. By getting these, you'll be able to create beautiful elements and position them anywhere you want on a 3-dimensional plane.
If you've ever been curious about those cryptic
d attributes in SVG paths, this interactive guide demystifies them, explaining how they're more than just outputs from vector graphics editors. Dive in to learn about the different types of path commands and how they shape those beautiful icons we all love.
This site is another great example of taking a beautiful template and personalizing it to the fullest. Ligalio uses the Salient template from Tailwind UI but has different colors and fonts, and it even features different elements from the Tailwind UI library! Overall I think it looks elegantly simple.
I became more active on Twitter/X recently and posted about expanding the Tailwind spacing scale. Well, Patrick, a friend, replied with an even better idea! He shared this Github Gist with a function that autogenerates the Tailwind config values in whatever increment you want. I really like the default which is increments of 5 and I'll be adding that snippet to my starter projects.
👌 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!
Check out Shruti's new book, "Level up with Tailwind CSS"! Dive into real-world Tailwind examples and discover tips even seasoned users will find valuable. Plus, there's an accompanying video course with fresh content every week. If you're serious about improving your Tailwind CSS skills then this book is for you!
Dive into the world of web security with "The Beginner's Guide To Web Security", a comprehensive 100+ page book by Gokul, a Google Developer Expert based in Bangalore. This guide covers everything from the basics of how the web works, HTTP, HTTPS, TCP/IP, SSL certificates, to various web security vulnerabilities and how to counter them. It's a must-read for both junior and senior web developers, offering a wealth of information in a concise format.
Designing on your own and want fancy icons? Check out Iconfinder, they have the biggest and best selection of icons I have ever seen and at very affordable prices.
PixelSnap 2 is the fastest tool for measuring anything on your screen. I use it as part of my front-end development workflow to make sure I'm translating screens as close as possible to the design.
This Week In React: the best of React & React-Native news. Sebastien filters the noise, and you save time!
TypeScript Weekly: the best TypeScript links every week, right in your inbox.
Weekly Web Development: A weekly newsletter that helps you to stay up-to-date on the latest and greatest tools in web development!
Want to support the newsletter? You can buy me a coffee with the link below 😁.
Stay up to date with the Tailwind CSS firstname.lastname@example.org
Join other subscribers today.