Yes, one of the big problems with Bootstrap was that it came with a theme. TailWind fixes this by breaking everything down into smaller "utility" classes instead. This is a smart move, and noteworthy.
Another problem with Bootstrap (and early TailWind) was that it included a ton of unused styles, slowing your site down. TailWind uses PurgeCSS to fix this.
But there are still lots of other problems with Bootstrap that TailWind has, too. And they're unavoidable, despite how fervent TailWind's fanbase is. In fact, honestly, it's like a cult: "Here's a long post explaining why 'separation of concerns' doesn't apply here". Sorry, I don't want to drink the KoolAid.
HTML is concerned with semantics. CSS is concerned with presentation. Two concerns, separated.
But let's go further: Why is this good? Because if you're skilled at writing OOCSS you can write all of your HTML, with all of the styles you will need, without ever having to think about presentation. One pass and you're done.
A skilled front-end developer can write their HTML and never have to come back to it. That also means another developer can pick up the styles without needing to ever edit the HTML. In fact the only reason you would need to edit the HTML again is because the content of the page changed.
But then the TailWind fans try to compare it with other CSS frameworks ("it's smaller!")... as if being smaller than other CSS frameworks is some sort of accomplishment. Let's not overstate things, a "CSS framework" is just library of styles. Competent CSS developers shouldn't be using CSS frameworks with production websites. (Rapid prototyping, sure. Otherwise, no.) TailWind being smaller than Bootstrap isn't a sign of... anything.
Then there's talk about how small it is when it's gzipped. Again, as if this is some sort of accomplishment. Bootstrap 4 is only 20kb once it's been minified and gzipped. The problem has never been the payload size, the problem is the number of styles your browser has to parse! CSS is a render blocking resource, which means that the browser won't render anything until the CSSOM is constructed. Once 20kb of minified gzipped CSS has been ungzipped, that's 147kb of classes that need to be parsed!
The true comparison is the number of CSS selectors for a site written in TailWind vs good OOCSS. (The answer is obvious.)
So in the end, TailWind is good at two things:
Taking a CSS framework (aka library of CSS classes) and making it as small as possible. Given that CSS frameworks should only be used on prototypes, I don't know what the huge benefit of this is. ("My prototype is a bit faster!" Cool.)
It gives developers who hate CSS the ability to avoid CSS. And boy are they fervent about it.
That's it.
Actually it's good at one more thing: Making it harder to rapidly prototype because it doesn't come with a theme, so replying on you trying to make it look good instead. So maybe focussing on utility classes wasn't such a smart move after all.
Be honest, all you TailWind fans: You like it because you don't have to write CSS.
It feels like a boyfriend trying to convince his girlfriend that it's good for their relationship if he sleeps around: "Just read blog post and watch this video! See all the good arguments? It's GOOD for us if I sleep with other women!"
Yes, one of the big problems with Bootstrap was that it came with a theme. TailWind fixes this by breaking everything down into smaller "utility" classes instead. This is a smart move, and noteworthy.
Another problem with Bootstrap (and early TailWind) was that it included a ton of unused styles, slowing your site down. TailWind uses PurgeCSS to fix this.
But there are still lots of other problems with Bootstrap that TailWind has, too. And they're unavoidable, despite how fervent TailWind's fanbase is. In fact, honestly, it's like a cult: "Here's a long post explaining why 'separation of concerns' doesn't apply here". Sorry, I don't want to drink the KoolAid.
HTML is concerned with semantics. CSS is concerned with presentation. Two concerns, separated.
But let's go further: Why is this good? Because if you're skilled at writing OOCSS you can write all of your HTML, with all of the styles you will need, without ever having to think about presentation. One pass and you're done.
A skilled front-end developer can write their HTML and never have to come back to it. That also means another developer can pick up the styles without needing to ever edit the HTML. In fact the only reason you would need to edit the HTML again is because the content of the page changed.
But then the TailWind fans try to compare it with other CSS frameworks ("it's smaller!")... as if being smaller than other CSS frameworks is some sort of accomplishment. Let's not overstate things, a "CSS framework" is just library of styles. Competent CSS developers shouldn't be using CSS frameworks with production websites. (Rapid prototyping, sure. Otherwise, no.) TailWind being smaller than Bootstrap isn't a sign of... anything.
Then there's talk about how small it is when it's gzipped. Again, as if this is some sort of accomplishment. Bootstrap 4 is only 20kb once it's been minified and gzipped. The problem has never been the payload size, the problem is the number of styles your browser has to parse! CSS is a render blocking resource, which means that the browser won't render anything until the CSSOM is constructed. Once 20kb of minified gzipped CSS has been ungzipped, that's 147kb of classes that need to be parsed!
The true comparison is the number of CSS selectors for a site written in TailWind vs good OOCSS. (The answer is obvious.)
So in the end, TailWind is good at two things:
That's it.
Actually it's good at one more thing: Making it harder to rapidly prototype because it doesn't come with a theme, so replying on you trying to make it look good instead. So maybe focussing on utility classes wasn't such a smart move after all.
Be honest, all you TailWind fans: You like it because you don't have to write CSS.
It feels like a boyfriend trying to convince his girlfriend that it's good for their relationship if he sleeps around: "Just read blog post and watch this video! See all the good arguments? It's GOOD for us if I sleep with other women!"
Uhuh, okay.
Whilst I don't necessarily agree with everything you said, it's a good post with some interesting points raised.
I do have you pull you up on this though - "Competent CSS developers shouldn't be using CSS frameworks with production websites".
It really doesn't matter what you used to accomplish it, but what really matters is if people are willing to use or pay for your product?
If two production sites both look good and one happens to be using a CSS framework and the other was painstakingly hand-crafted, what does it matter?
If they portray the right brand image and drive usage / revenue, I'd argue the latter was a waste of time to a certain extent?
Anyhow, this thread was a good read, very lively!