How are CSS frameworks like Tailwind actually more efficient at writing CSS? [closed]

Question

I've started to look into modern popular css frameworks such as tailwind. The "paradigm" in these frameworks is writing all the css in the html essentially applying classes as properties. E.g. If I wanted a title to be have bold red text, I could write:

<h1 class="font-bold text-red-400">Title</h1>

But while this may make it easier to write CSS in the short term, it seems like a really awful strategy of going about writing CSS in the long term. What if I have 20 different titles and I decided that I wanted to make them blue instead of red? Then I will have to edit the html 20 times! If I instead just used the classic approach and wrote:

<h1 class="title">Title</h1>
...
<style>
.title{
    font-weight: 700;
    color: rgb(248 113 113);
}
</style>

I would only have to update the css once to make all the changes. Although it's a bit more verbose, this surely scales much better. In fact, if I remember correctly, wasn't inline css discouraged not too long ago? Wasn't this why elements like <center> were starting to be phased out? And tailwind is used on large websites---so there must be a reason why people prefer this method. Does it in some way scale in a way I am not understanding? The only true benefit I can really see are offering an out of the box responsive grid, but everything else seems much more efficient to do the traditional way.

Answer 1

This article by the creator of TailwindCSS talks about the cons of semantic CSS classes. One argument is that semantic classes are a lot harder to maintain that it seems to be and using utility classes such as in TailwindCSS is easier to maintain than it seems.

And as for the specific points you mentioned, Tailwind aims to take best advantage of the reusability of components in modern frameworks such as React and Vue, so you don't end up changing the css of 20 different titles, but just one title component that gets reused 20 times.

A difference between this approach and inline css is that using utility css classes means you have a pre-defined design system with consistent differences between classes, no magic numbers and so on.

Answer 2

The main pro that people have for using something like tailwind is the utility class usage explains more about what has been done to an element, then a random class name could. This makes it easier to onboard new employees because they can just get a quick grasp of the utility classes, and then while looking through the HTML understand what all is being done to something, and make changes to specific items without worrying about changing something else unintended. The cons usually are what you're saying, it makes it really hard to make style changes to many things, makes HTML code look gross, and requires an extra layer of learning all of the utility classes.

In the end I've found that most people just use tailwind as a quick way to get something rolling, and build a prototype, but once something has become a larger project it's time to shift over to something better. Overall I've just found a pretty large hatred for tailwind across the internet.