Top "css library" of 2020s, tailwind css with the its message "Rapidly build modern websites without ever leaving your HTML" and with the sample code in the home page:
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="...">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<blockquote>
<p class="text-lg font-medium">...</p>
</blockquote>
<figcaption class="font-medium">
<div class="text-sky-500 dark:text-sky-400">...</div>
<div class="text-slate-700 dark:text-slate-500">...</div>
</figcaption>
</div>
</figure>
This cannot be a real think, this is a joke. What is this mess that is presented as the example. The code does not even fit in the pre tag they have. This is a classic example of a taking a good idea that solves well a very specific problem in some specific situation and assuming that it can be expanded to solve the universe.
In our case this good idea is creating some small classes to describe a common css property that is not bound necessarily with the rest of the context and it is independent of the rest of the rules, eg. a class named center that just sets the text align to the center (and even this can be argued that has an effect in the around paddings and margins and if they have to be symmetric)
And the bad idea, the whole tailwind css main gimmick, that with infinite classes and dumping everything in the html file will solve everything. When in reality you solve nothing and contribute just in the reduction or readable code. Which is an other common insane idea, that you should be able to write code very fast even if it not readable. This is true only for prototyping, in the lifetime of a peace of code you have 1 write in the beginning and 1 read with a possible 1 write/change after that, so with very complex math we know that the the reads is always greater that the writes.
done_