Actually, two trees. Separated. Very far from one another.
Recently a Twitter beef kicked off between team Windi CSS and Tailwind CSS, over the release of Tailwind JIT and whether Tailwind labs' hat was tipped firmly enough to Windi's groundwork.
Without getting too bogged down pointing to heroes or villains, I'm a big fan of the work of both Anthony Fu and Adam Wathan (head honcho of Tailwind Labs). Voorjar/Satireven (creator of Windi CSS) is a new name for me in this saga. It'd be great if they all could combine forces, but having competition will still boost progress. If it weren't for Windi's moment, Tailwind JIT wouldn't have become a reality so soon. So there's plenty more lemonade to come from these lemons being launched.
As a fork in the road emerges, I may have to pick one. Which will it be?
It's too early to say if Windi will find its place in my toolkit. Like most David vs Goliath battles, I'd be lying if a part of me isn't cheering the underdog. However, I've been a major fan of Tailwind CSS since 2018 and it's been amazing for me, and I don't see them as an enemy to fight. So the code and execution will be the decider.
Briefly looking at their codebases Windi is built using more modern JS/Typescript without requiring dependencies (even able to run the browser!). Whilst Tailwind runs as a PostCSS plugin, which allows easier installations across different systems. So there may be some tricks and key points of difference that pop up from this. I'll be leaving that for another day.
For me, the decision may simply be from some brackets.
Windi's utility groups feature is honey to the eyes. I'm interested if TW can embrace this, or something similar:
<div class="bg-white font-light sm:hover:(bg-gray-100 font-medium)"/>
<!-- instead of -->
<div class="bg-white font-light sm:hover:bg-gray-100 sm:hover:font-medium"/>However, it's Tailwind's wrapping of custom JIT values in brackets [ ] that sparks joy. It's a prime example of Tailwind Labs' ability to think through and execute the little things so elegantly.
<div class="mt-[210px]"/>
<!-- instead of the potential footgun, when refactoring later -->
<div class="mt-210px"/>My initial concerns, from early previews of these new compilers, were offering an all-you-can-eat smorgasbord of utility classes with no rules. A liberal utopia that's perfect for rapid prototyping but chaos in any longer-term production builds, and a doorway to becoming the regexes of utility CSS.
I penned a prayer on Twitter. Perhaps a leading ! for custom JIT utilities to flag caution, ala !important? But the square brackets gets a solid kudos from me.
Windi CSS appears to be taking the road of freedom as a feature at the moment, which could still change. But that alone won't woo me. Tailwind's config is a massive part of its genius. It helps set order and consistency whilst still easy enough to customize and consciously break the rules for edge cases. It scales well, technically and for communication across teams and departments as you start considering style guides and design systems.
Team Windi have drawn their line in the sand and begun flexing on their rapid speed to drop new features. They're fired up and turning the competition level up to eleven. To them, I say, "Hold my popcorn, so I can fetch some more popcorn."
Wherever all this ends up, the future of utility CSS is alive and looking fucking fantastic.