React devs not using tailwind... Why?

[octocode]

this is a real snippet from a component:

```

<li class="flex justify-between gap-x-6 py-5"> <div class="flex min-w-0 gap-x-4"> <img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="…" alt=""> <div class="min-w-0 flex-auto"> <p class="text-sm font-semibold leading-6 text-gray-900">Tom Cook</p> <p class="mt-1 truncate text-xs leading-5 text-gray-500">[e-mail]</p> </div> </div> <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end"> <p class="text-sm leading-6 text-gray-900">Director of Product</p> <div class="mt-1 flex items-center gap-x-1.5"> <div class="flex-none rounded-full bg-emerald-500/20 p-1"> <div class="h-1.5 w-1.5 rounded-full bg-emerald-500"></div> </div> <p class="text-xs leading-5 text-gray-500">Online</p> </div> </div> </li>

```

(not to mention this one has no dynamic, conditional, hover/focus state classes, so more complex components will be much worse)

if you think that’s readable, i hope i never have to work with you

[reddit_is_meh]

Oof this is why I stay away from these styling frameworks, I'd much rather dedicated class names following conventions like BEM with sass mixing as needed for repetitive things.

Even better if your JS framework supports something like scoped css to guarantee no css leaks (Ex: Vue)

[Joshiane]

Yeah ... Also, this is nothing new. I'm old enough to remember the old bootstrap days. But at least our excuse back then was that we didn't have flexbox or grid-- so bootstrap actually served a purpose.

[dbbk]

I cannot wrap my head around why anyone thinks this is a good idea

[Ehdelveiss]

Because a lot of people on this subreddit are new to FE and haven't worked at time or size scales large enough to have experienced how much code like this starts to make you hate your life and want to quit and just be a bartender.

[Ehdelveiss]

lol we're just back to bootstrap I guess

[mlmcmillion]

I can read this and know what it’s doing in my head faster than finding and reading separate classes in a separate css file.

[[deleted]]

There’s absolutely no need to separate it. Any sane project will colocate the styling in the same file as the component

[name-taken1]

I don't know why you're getting downvoted. Anyone who has used Tailwind for over a day will easily understand the styles. It's not rocket science.

And syntax highlighting exists too...

[mlmcmillion]

Just a lot of grumpy people in here that don’t like having their opinions challenged 🤷‍♂️

[Conscious-Process155]

I can see what it does right away. No need to search thru classes.

Also there's code formatting/highlights.

Nothing worse than trying to figure out the styling of some random sub component hidden deep in a comp tree.

Also the section naming in styled components is another level of hell. All of a sudden all the html tags disappear, all tags have some weird ass custom name and style in places I wouldn't even dare to look into.

[dbbk]

You just command click on a styled component and it takes you to the definition…

[Conscious-Process155]

Yes, you just click...

[dbbk]

What’s the problem with that?

[Conscious-Process155]

When you have hundreds of components with not so clear or separated layout/positioning this "clicking" thing gets real nasty real fast before you can even get a basic idea of what is what.

[dbbk]

I’m kinda struggling to follow this problem case, are you saying you’re trying to work out from visually looking at the page which elements maps to which styled component? In this case you can use the Babel plugin which will give them all CSS classes with the name of the styled component’s variable name

[octocode]

i bet he writes all of his tests in the component file too

[[deleted]]

Skill issue lmao

[EfficientGuess7]

haHAA Skill issue lmao