The Tailwind 4 alpha looks awesome
Earlier this month, the Tailwind team announced that Tailwind’s 4.0 alpha is now open sourced. I love Tailwind1 and there’s a lot in the post that’s getting me excited 🤩.
Here’s what I found interesting
It’s faster and smaller. Improvements here are always welcome. Tailwind is already fast and small, though 🤔. So I question how much of an impact we’ll see2. On the other hand, there’s no downside. And who knows, maybe it’ll be noticeable on large projects.
There’s one dependency - Lightning CSS. Technically this doesn’t seem to be true… I see 3 dev dependencies for the current Tailwind 4 alpha 🧐. In any case, that’s a lot better than the 22 dependencies there are now. As someone who frequently has to manage dependency hell in codebases with many devs, I really appreciate having less dependencies.
Rust where it counts. Writing bundlers for CSS and JS in native code make a lot of sense to me. Eking out max performance during bundling can make a huge difference to a lot of people. The choice of language is interesting to me, though. Many bundling tools are choosing Rust right now (Lightning CSS, Rolldown, SWC, Turbopack, etc). The odd one out is esbuild, which uses Go. I’d be interested in seeing an analysis of choosing different languages for frontend tooling3.
No more need for postcss. Another set of dependencies that won’t be needed. Postcss, autoprefixer, and whatever postcss plugins you’re using. Less dependencies are better.
Cascade layers. Tailwind 4 will use and support cascade layers. This is awesome because they let you control what CSS takes precedence over others. You can do things like allow Tailwind to override a component library’s styles (or vice versa) without needing to worry about their import or load order.
Container queries. There will be container queries built in to Tailwind! I’m irrationally excited for this, for some reason. Countless times I’ve wanted to use a media query, but for a parent element’s size, not the viewport’s size.
CSS configuration. Last, we’ll now be able to configure Tailwind in CSS instead of a config file. At the end of the day it’s the same thing, but it feels right to set Tailwind theme values by setting a CSS variable. Very CSS-y.
That’s it! Let me know what you found interesting in the comments below.
Need help developing a web app or setting up your team for success? Hit me up at https://landslide.software, and we’ll chat about how I can help.
Tailwind is amazing for keeping styles consistent, stylesheets small, and styles from applying where they shouldn’t. I find it especially effective in projects with many teams or developers working on them.
As an example (making up numbers), going from 50ms to 25ms is a huge “improvement”, but maybe not noticeable in some circumstances.
Does JS tooling need the memory management that Rust offers? Or is Go’s garbage collection just fine?