There. I said it. I know every cool kid likes it, but I don't. Never seen the point of it. Always seemed way too complicated to do simple things. I don't like to have, you know, run a whole build system when I could just write css classes that work fine.

And it seems I'm not the only one, since I've recently read these two articles:

https://heydonworks.com/article/what-is-utility-first-css/

https://nuejs.org/blog/tailwind-misinformation-engine/

Which I highly recommend, obviously.

But it works!

Yes, sure it works. But at what cost ? In order to make tailwind work, you need to have a build pipeline to analyze which utilities are used in order to include only them. Not possible for you ? Too bad !

By using only utilities (and I'm not saying utilities, as such, are bad... I do like having a little spacer utility here and there or a flex class to do flexy stuff), you end up with a big pile of classes in your html. Sure you can refactor that into a custom class... but isn't that basically writing old, traditional css then?

<!-- Before extracting a custom class -->
<button class="py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75">
  Save changes
</button>

<!-- After extracting a custom class -->
<button class="btn-primary">
  Save changes
</button>

And why on earth would I want to use @apply when I could just write css ? Where I could just, write things, refresh my page, see the changes ? (You can do that in tailwind, but not without tooling).

And in this specific example, it's very likely that you would actually have two classes. A global btn class, and a btn-primary variant. So even this example taken straight from Tailwind docs is not quite realistic. How do you split these properties in two in Tailwind? I don't know (it's probably possible, but since I don't use it...),

What about customization ?

So you have your pretty tailwind.config.js file where you store your configuration.

But you know, css can have configuration too, even without using scss or anything.

    colors: {
      'blue': '#1fb6ff',
      'pink': '#ff49db',
      ...
    },

Could really just be:

--color-blue: '#1fb6ff';
--color-pink: '#ff49db';

That works just fine :-) And you can scope them if needed. Make them responsive. Have fallback values. So if you want a design system, as advertised as one of the strengths of Tailwind, you could very well do something like https://www.pollen.style/.

My dislike for Tailwind is very similar to my dislike for Typescript. I don't like adding a tool unless it really brings a big added value. Most of the time, the cost of adding/learning/dealing with upgrades/changes of version of these tools are not worth the effort. Regular css and js is actually quite fine these days (I wouldn't have said that 5 years ago, but here we are).