I've never understood the appeal of TailwindCSS. I've watched friends and colleagues get amped for it, seen their code, and just felt like it was a meaningless abstraction of the existing technology. Brian does a solid job of delving into why Tailwind can also be a problematic tool that champions bad practices over good ones.
The tl;dr involved is that:
- Tailwind isn't DRY, making maintenance trickier (and bugs more likely); (he claims it's WET, but it's not even that, it's just repetitive);
- It ignores the principle of separation of concerns by stuffing CSS back into HTML;
- Its naming is willfully obtuse and non-semantic, making it harder to read, debug, and maintain (both in language and structure i.e. horizontal code lines rather than vertical code blocks);
- It breaks core CSS functionality, such as grouping (classes), the cascade, combinators (
* + *), and media queries; - It introduces polyfills to recreate some of this functionality, thereby admitting its own model is inflexible and problematic;
- It is a solution in want of a problem;
- Better ideas exist (styled-components, Emotion, Sass);
- And, well, this:
Or in his words:
You're basically left with a less readable, more complex version of inline styles, a coding technique that we've been trying to breed out of junior developers for the past decade or so.
He also makes a very valid point about imagining the inverse situation. Let's say CSS works like Tailwind does today and then a CSS 2.0 is announced which gives you the equivalent of modern CSS... that would be a godsend!
If you could go from the limitations of Tailwind to CSS, wouldn't you consider that a quantum leap forward? Expressive syntax! Semantic naming! Style grouping! Selectors and combinators!. It would be like moving from Assembly to C for the first time.
So why is Tailwind the hot new thing? I'm still utterly unsure 🤷♂️
