Why I think TailwindCSS is overhyped

These days, I have been seeing a lot of posts promoting Tailwind and how amazing it is, etc. To be honest, I was thinking the same thing because I am not in love with design and TailwindCSS makes my life easier. But is it really true?

I started working on a big ecommerce website alone, without anyone to consult, and I chose Tailwind. I loved how it looked with the Indigo color, so I started working on it. It started out okay, and everything was nice, like my button:

<button class="bg-indigo-600 hover:bg-indigo-700 py-2 px-4 rounded-lg text-white font-sm leading-wide">Click me</button>

I continued to work and make the first and second components, and everything was good. But at some point, I got some partners to discuss the color scheme because our targets changed, and we decided to go with blue. Now all the indigo elements in multiple files (components) need to be converted to blue, but that's not all - elements with hover, active, ring, border, and all similar things need to be converted too. Instead of looking in the CSS and going to the .btn class, I needed to go to each component file and look for classes with indigo to switch them to blue.

What I learned is this: Don't follow the masses without using your brain.
I switched to beautiful Sass and with super simple tricks, got much better results with even better control over my style.

$r: 8px;
$pc: #ff23ed; //primary color
$pch: darken($pc, 5%); //primary color hover
.btn {
color: white;
border-radius: calc($r * 1.5);
background-color: $pc;
&:hover {
background-color: $pch;
}
}


With this kind of code, I can easily change the color (you don't need to declare variables in each component, you can have global ones). When you change $pc once, all your colors automatically adjust, even for the hover state. If you want to get a triad color scheme, it's easy:

$secolor: adjust-hue($pc, 120deg);
$thcolor: adjust-hue($pc, -120deg);

It uses the color wheel with degrees. If your primary color is red, $secolor will be 0+120, which is equal to 120 and is green on the color wheel. $thcolor will be 0-120, which is 240 on the color wheel and is blue.

I still think tailwind is nice for small projects but if you plan to use it on big one think twice is it really smart move.

I think that's all for now. Thank you for reading, and if you have any questions, feel free to ask.