Look at the button from his article:
<a class="text-xl rounded bg-orange pt-1 pb-1 pr-4 pl-4 text-white hover:text-white no-underline leading-loose" href="#">Buy for $10</a>
That's way too granular.
On this page it documents how you can create component classes https://tailwindcss.com/docs/extracting-components/
<button class="btn-blue">
Button
</button>
.btn-blue {
@apply bg-blue text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
@apply bg-blue-dark;
}On a small one page website, do use them. However in something more complex like an e-commerce website theme or a complex web app, you will regret it quickly.
<a class="text-xl rounded bg-orange pt-1 pb-1 pr-4 pl-4 text-white hover:text-white no-underline leading-loose" href="#">
is no better than
<a style="font-size:16px; border-radius:5px; background:orange; color: white; text-decoration: none;" href="#">
It is simply a fancy way to use inline styles.
One of the selling points of CSS is the ability to scale and refactor very quickly and easily. Class based frameworks remove all those benefits. Extracting components and building sementically is the solution. As I said in my previous comment, that framework they are using supports it. They say it themselves:
“*While we strongly believe you can get a lot further with just utilities than you might initially expect, we don't believe that a dogmatic utility-only approach is the best way to write CSS.*”
.btn-blue {
background:blue; color:white; font-weight:bold; padding:
4px 2px; border-radius:50%
}It may be hard to see now how it will bite you now, but I promise you, it will. It would take hours to explain why, but I am speaking from years of experience here.
There is a reason large organizations have abandoned this approach, and it isn’t just personal preference.
This talk gives a pretty good explanation, Airbnb.design, Netflix, Facebook, and Instagram have many others
I understand that maybe adding a bunch of classes for every element will increase the overall size of the page but if it's served with gzip compression doesn't it actually (maybe only technically) work better to have repetitive classes everywhere instead of unique class names?