[cluckindan]

Maybe you need to figure it out before jumping to conclusions like that.

I think it’s much easier to understand what

    <input class=”input input--email input--valid”>

is supposed to be compared to

    <input class=”bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal”>

[gjsman-1000]

Bull. I have no clue at this glance what .input specifies, or what I can override without a conflict. Heck, .input might not even exist, resulting in only stock browser styles. The bottom one, I can fully picture while it isn’t much longer, the above is opaque and gives me no information at all about the look.

Secondly though, and why this opinion is frankly stupid, is that I can just put this in my CSS code before it’s built through Vite:

input { @apply bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal; }

And then lo and behold, I’ll do you one better:

<input type=“text”> </input> is now fully styled, with Tailwind only.

[cluckindan]

It says ”input” right there in the classname. @apply might be the only sane way to use Tailwind, but it seems like a post-hoc mixin construct, and definitely has the same level of indirection of styles that you claim is an issue with classnames.

Strange you would be worried about accidental overrides with class selectors but then go ahead to target styles with tag selectors. Is that not objectively worse?

Btw, targeting input[type=”text”] means now you cannot apply those styles to a regular <span> or <div> using a class, which is sometimes useful, especially in very large projects.

I am still not at all convinced Tailwind is even slightly useful. It feels like shoehorning HTML4 <color>, <font> etc. into HTML5 classes.

All in all, your arguments come off as ad hoc rationalizations for a personal preference, not as substantial examples of Tailwind’s superiority over more traditional CSS approaches.