How can you hate tailwind?, it's literally just css class names.

Too thick of a brush. You’ll need a thinner one really soon, but real css mixes with tailwind like oil and water

Oh, and then there’s the build system

css frameworks are awkward. easier to write your own css, if you have the experience for it I guess

I did like stylus but you have to keep adding it as a transpiler everywhere so it's not really worth the effort. but it let you generate css using loops and variables and such

I like it

The people who hate tailwind are a subset of the people who hate css.

because it's literally one css class name per css rule you want to apply, but all in one line, cluttering your markup.

I always love to see a div with 200 classes on it just to have a round border and aligned in the center. How can it be worse ?

@Grumm yes. We separated html and css 30 years ago for a reason

I guess true frontend people hate it because it creates huge mess in HTML code.

On my side I hate having to edit many files for one feature (and I hate frontend) so the the faster I am done the better.

Tailwind was cool at first. Started all my projects with it.

But, Tailwind fails at complex styles. It's just unwieldly, imo. The markup starts to look dumb.

So, now I only use it for simple responsive styling. This is my solution for keeping things clean while using tailwind and normal styling together.

@kiki Sure, that is a good think.

But this :

<div class="grid grid-cols-3 gap-4 place-items-start mt-4 md:mt-0 md:ml-6 bg-red-100 md:items-center pt-6 md:-8 px-8 py-12 sm:max-w-xl"> </div>

Sure, great but at some point, isn't it better to call it <div class="myPersonalGrid"> </div> and put all the styling there ?

Never really used Tailwind so can't say I hate it - but I can say it doesn't appeal to me at a surface level.

I'm used to one or two classNames, not dozens.

The code example written above me looks too much line inline CSS to me.

`div class="grid grid-cols-3 gap-4"`

just looks like

`div style="display: grid; grid-template-columns: auto auto auto; gap: var(--gap) * 4)`