🔥 TailwindCSS v4

If you’ve been following the newsletter for awhile, you know that I’m a big fan of TailwindCSS. And I’m not alone. In the 2023 State of CSS survey, Tailwind scored in the very top on both awareness, interest and retention - and with usage that’s been steadily growing for the past several years now over 50%! See the charts for yourself here if you’re curious.

I think it’s fair to say that Tailwind has taken the CSS world by storm and is generally considered one of the best CSS frameworks out there. It’s also the go-to for many new, awesome projects like most Vercel templates, ShadCN UI and others.

But enough with the sales pitch. If you’ve tried Tailwind, chances are you already like it. And if not, the upcoming v4 release might just sway you to give it a shot very soon.

Adam Wathan, the creator of Tailwind, just published a blog post teasing the new features, including an alpha release allowing us to play around with the new goodies already. But if you’re too busy for that, here are the highlights in the order that most excites me:

• A new, CSS-first configuration model. Basically the team is trying to move away from the tailwind.config.js file and make it easier to work with the design tokens from the framework by moving it all into CSS variables. This is super cool, because I often find myself needing to use the design tokens as variables anyway. So in the past, I’ve setup my Tailwind config to simply consume CSS variables for colors and font sizes that are defined in the CSS file instead. But the new system feels a lot more like how a “CSS framework” should work - without limiting the flexibility we know and love about Tailwind.

• Less configuration in general. In v4, annoying stuff like defining your content paths, setting up PostCSS with postcss-import and autoprefixer and a CSS nesting plugin is all gone. This will make it a lot simpler to install the framework into a new or existing project, without wrestling with a ton of boilerplate setup.

• Performance. To be honest I’ve never really had any performance issues with Tailwind myself, but anything that makes stuff faster is always a welcome addition. The updated framework is using a new engine powered by Rust that should be up to 10x faster with fewer dependencies.

On top of that, there’s some smaller goodies like built-in support for container queries, new composable variants like group-has-focus:opacity-100 and automatic transpilation of some modern CSS features so they work in older browsers too.

If you’re a front-end developer who already works with Tailwind, this should be a super exciting release when it’s ready later this year. And if you haven’t tried Tailwind before, it might be a good idea to start looking into it soon.

For me, discovering Tailwind years ago was a massive gamechanger because it actually made styling fun. It just feels like a way better approach for the modern web than other CSS frameworks, helping you implement consistent and great-looking experiences - without worrying about stuff like arbitrarily naming one-off CSS classes, wrestling with default styles from something like Boostrap, or accidentally introducing inconsistent spacings, colors or fonts into your projects. Not to mention the sheer speed of development, which is just unmatched.

To try out the v4.0 alpha and learn more about the upcoming changes, check out the official blog post here.

Today’s sponsor

So you thought I was done trying to convince you of something? Not quite! Because one of my other favourte things about Tailwind is that it kind of forces you to know CSS. Because the abstraction layer is so low, you need to understand the underlying CSS in order to be productive. And to help you do just that, I’ve partnered with Packt Publishing to share one of their great technical books:

Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites using the latest HTML5 and CSS techniques.

This book goes into great detail on anything you’ll need to know in order to implement slick, modern and responsive websites using the newest CSS features like Grid/Subgrid, CSS Layers, and the many CSS functions available to create the best experiences for your users. It’s a great resource if you’re still in the early stages of your front-end career - but I also think there’s a lot to gain if you’ve been working in the field for a while and you’re looking to level up these fundamental web skills.

If any of that sounds like you, the book is available on Amazon here 🔥