On the left, Tailwind. On the right, vanilla CSS

Perfectly illustrates my displeasure at Tailwind. I know the common refrain is "that's why you use React components", but I can't help but feel bothered by this idea that <X framework has traction> and it requires <Y and Z frameworks too> and all of them are each independently really big and complicated for <reasons so deal with it>.

As someone who writes CSS for a lot of small projects, it's true that the code on the right is tighter and easier to read and manage, but that's not what frameworks are for. CSS frameworks like Tailwind and Bootstrap were designed to give large scale products easy patterns to remember and implement site- or app-wide, standardizing the language so that teams quit duplicating existing functionality under different, but still obscure, names.

Yes, if we scale down out projects we can write custom CSS for our HTML without the need for specific class names that refer to specific CSS aspects and make it more readable, but that's not what frameworks were built for, and comparing the two like this is disingenuous.

Coming to that project with fresh eyes (both, when someone else had written it or I’d written it six months ago), I’d know immediately what to do to make a change confidently in the left picture, and I’d be dreading trying to piece together what rules exactly apply to DOM components after untangling specificity hell.

The left picture has everything I need in that screenshot, the right picture would require me to work out how specificity rules cascade down to each DOM component to even start thinking about what to edit.

This is a great showcase of why people ought to choose tailwind if they value their time and just want to get on with things in the real world.