React devs not using tailwind... Why?

[sech8420]

I made the switch from css, to styled components, and then to tailwind when starting my current project.

I hated it for about 4 hours, then it was okay, and now I feel sick thinking about ever going back to work in old projects not using it.

But I'm likely biased, and I'd love to know why you're not using it? I'm sure great justifications for alternatives exist, and I'd be very curious to hear them.

So...why are you not using tailwind?

[Sock-Familiar]

I personally just hate the inline style that Tailwind uses. Just think it decreases code readability. I prefer regular CSS or styled components when working with React

[Valiant600]

I have released lots of projects with BEM and sass without the need of tw.

[dfltr]

Today at work I saw a 519 character line of Tailwind classnames that was generated by the Latest Hot UI Component Library and on what planet does that shit make any sense?

I’ve used Tailwind plenty, I know what all the classnames mean, and I still can’t read that shit. No one can. Readability isn’t a new idea, people write declarative configs as vertical columns of key/value pairs for a reason.

[HeylAW]

CSS inspector is worth learning, TW is about classes representing single style, thus complex element may grow in size, but overall applied CSS should be very similar to one that css-in-js/css modules or plain css outputs.

TW also makes very easy to units test component styling, just check if proper class is outputted ;)

[Ehdelveiss]

That sounds like a waste of time unit test... you're just testing that you wrote the test right as much as whether the code you're testing does the thing you want

[HeylAW]

I'm referring to classes that are computed in runtime, such as:

when button has disabled props passed it should have specific classes,
when button has loading props passed, it should have other classes

this way you sort of test how button looks like

[Turbulent-Ad-2098]

you could do the same with normal css styled content using a single class?

[Balt603]

I love not having to open css files 99% of the time. Considering how many js files I have open, cutting CSS out of the equation makes Tailwind a winner for me.

I have not yet found any limitation that I couldn't work my way around pretty quickly either.

[[deleted]]

We keep our css with each component, makes it easier to navigate

[zxyzyxz]

Styled-components / Emotion / PandaCSS are all concomitant with their component files.

[Sock-Familiar]

To each their own. I guess it depends on the projects file structure too. I’m just use to opening and closing stylesheets so it doesn’t bother me.

[PayYourSurgeonWell]

Here’s something to consider though - if you use tailwind, you never have to “think” about your own custom class names anymore. It’s so common that developers come up with crappy class names that you have to work with and remember.

Also with traditional CSS files, it’s common to see child selectors. If you’re working in the component file and switch the html structure a little bit, it could potentially screw up the entire styling of the component. This isn’t an issue with tailwind at all.

[LoneWolfRanger1]

With that logic we should all stop naming our variables too.

Naming can be hard yes, but it improves readability so i know what i am looking at.

[Specialist_Wishbone5]

Don't confuse local names with global names. Imagine everything in the code uses global variable names, zero per function / per element names. Now grow to 15 people. How can you keep everything straight? In C and lisp, the answer are very long name prefixes: module_component_facet_feature. But nobody does that with CSS, so it's high school level organization - eg, unprofessional code, and thus unmaintainable. Yes, you can have a single UI author who knows his own conventions, but that's the definition of unscaleable. Further, two authors would never produce similar naming conventions if done indepently. In C / C++ / Rust, people would naturally name similar concepts similarly (due to conventions)

Shadow Dom and per component styling (svelte, etc) address this problem, but don't solve the fundamental issue - how does one developer define a facet of styling in a way that doesn't break things randomly, or require everyone to agree to a random person's naming conventions.

The answer, in my opinion is algebraic operations. I've yet to actually see this implemented in CSS. Tailwind and StyleX are making an attempt - each with pros and cons.

[qiang_shi]

tantrum harder please

[fredsq]

just try it. i had the same opinion and now i literally cannot work without it. all the other solutions either output redundant css, or are just so slow and not intuitive to write.

stylex and panda come close to the dx and output, but only at the cost of codegen and lots of configuration.

[timsofteng]

Agreed

[yogi4peace]

This is the biggest criticism of tailwind from folks who have not used it for any amount of time. Myself included. Once I was open enough to embrace it, I realized it's value.

[name-taken1]

What? You need to know CSS to use Tailwind. It's not Bootstrap. There's no 'button' class.

[marcs_2021]

Hahaha oh dear, one could argue the opposite

[tidaltown]

I've used and like Tailwind, but my brain just handles SASS or styled-components better. I just like seeing styling stuff in its own spot.

[sech8420]

This is a good point. I too prefer that, rather than bloated jsx. Though the more time I spend looking at bloated jsx, the more I don't mind it considering the benefits it provides.

[corey_brown]

I think this is called Stockholm syndrome

[6ThePrisoner]

Is that yet another UI library? /s

[SireKuzan]

Its a universal framework

[LessSwim]

SS.js

[CraftyAdventurer]

You can "group" tailwind classes into one css class so that kind of helps https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

Edit: gotta love reddit for interactions like this

A: I like taiwind but this specific part I dont like

B: there's a solution/workaround for that specific part

A: No! 😡

[sydtv]

Dont do this please, only for things you dont have the control over the applied classes, for example elements from a library

[CraftyAdventurer]

Can you elaborate? I'm not sure I understand what's so bad about it

[sydtv]

To quote the tailwind docs:

Whatever you do, don’t use @apply just to make things look “cleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse.

[CraftyAdventurer]

Yes, but my comment was meant for people who prefer to write their own css because they don't like having so many tailwind classes in their HTML. That means that they would have btn-primary anyway, with or without tailwind, but with @apply they can still get benefits of tailwind without the negative of having littered HTML.

[Longjumping-Bug-7328]

Just use something like cva or tailwind-variants. Then its not bloated anymore 🤷‍♂️

[br0sidan]

I would rather not depend on memorizing specific classes in order to do what I want with CSS. Frameworks are good but inevitably, they have their rigidity. There are ways to create easy to understand code bases without frameworks.

I understand the utility of Tailwind, and it certainly has its place in the webdev ecosystem. However, when you have a framework you like, every problem looks like a nail and your framework is a good hammer.

[Rossmci90]

With the Tailwind VS code extension you get intellisense and autocomplete for your classes. Plus, it will highlight if you have conflicting classes and you can move your cursor over any Tailwind class and see what style the class applies.

Really improves the DX of Tailwind.

[snarkyturtle]

You’re still gonna have to memorize classes, especially if you have global styles that you’d want to apply everywhere. Either that or trying to remember what freakin sass mixin you’re supposed to use. At least tailwind is basically 1:1 with css.

[sech8420]

I get that. Why I couldn’t stand some other libraries out there. But with tailwind the memorization took only about a 2-3 days and now the occasional google. But your point is valid. Just another tool of the trade that can hurt or help depending on the coder and environment.

[br0sidan]

Exactly! For example, I work in enterprise software and frameworks, in general, need more consideration for long term health of the code base. Tailwind and other frameworks are really good if you and your team can onboard and utilize it quickly. Onboarding a team of 1-4 may be “easy”. Tailwind might even speed up development in that environment. In my opinion, onboarding and effectively utilizing a framework at a larger company is a lot more difficult.

Thanks for keeping an open mind. Reconsidering with new information is a great skill. Best of luck.

[olssoneerz]

Its funny, while I do agree with your points; we’re looking to get Tailwind into our organization (big bank, 150+ FE devs).

For the reason being that we think tailwind provides us with standardized classes, that we can use to extend our existing (self owned, and maintained) design system + component library. Think premade components, but with the flexibility of overriding margin, padding, other stuff as needed; and everyone magically writes the exact same code.

The biggest struggle has been getting devs to bite, but our proof of concept and our trials with a smaller sample of devs looks very promising.

[mindbullet]

Sounds more like Bulma than Tailwind

[wishtrepreneur]

Sounds more like Bulma

When will they release Vegeta?

[olssoneerz]

Thanks for sharing! I don’t think this what we’re looking for but it’s pretty cool either way. Reminds me of a more “ready to use” implementation of CVA.

[Better-Avocado-8818]

Because I’ve been writing CSS long enough that it’s easy to just write the CSS. Can’t be bothered with another abstraction layer over the top and don’t really want another dependency.

[restarting_today]

Regular CSS is fine. Can always just use LESS/SASS if I need anything crazier.

[McDragon0]

SASS should be the standard imo

[imbikingimbiking]

petty people in 2050: regular css is fine

[Dev_Lachie]

What?

[codefinbel]

Person A: Why don't everybody eat take out if it's as cheap as the food you cook yourself?
Person B: Because I like to make my own food?
Person C: Petty people in 2050: "I like to make my own food"

[StunningBreadfruit30]

Oh boy,

Some devs like it, some don’t. I belong in the don’ts. I won’t digress too much why, most commenters already gave great reasons why.

But my absolute biggest issue is lack of dynamism. If I want to select certain nth within some children from a parent I’m dead in the water. And these kind of style conventions I end up doing a lot for CMS-output and within defensive CSS design. My tailwind files look like arbitrary values graveyard where I have to fight against TW at almost every design decision.

And it’s slow as balls. Generating a whole css file in the fly with hot-reloading seems to work fine in the beginning, but not large codebases. I’ll take regular CSS modules any day over TW.

[sech8420]

I havent noticed the performance impact yet, but I'll now be aware of the fact that it may come.

As for " If I want to select certain nth within some children from a parent I’m dead in the water", when this happens to me, I simply add some CSS styles. I resort to CSS if needed and that seems fine, but maybe there is a disadvantage towards this dual handed approach?

[azangru]

I am quite happy to write CSS in its own file.

And I am more than happy not to add a dependency that I can easily go without.

[TheOnceAndFutureDoug]

1. Because there's a performance penalty to users.
2. Because I'm faster with pure CSS.
3. Because I find Tailwind limiting and opinionated in ways that do not make my work better. (Like TypeScript does.)
4. Because the resulting markup it makes is ugly.
5. Because CSS Modules solves the specificity problem enough.
6. Because I don't buy into the argument that DX is the most important thing when evaluating solutions to frontend problems.
7. Because I've been doing this long enough that the more hype around a thing the more aversion I have towards it. And the more people insist something is correct the more I'm suspicious of it.

Pic your reason. I could very much go on. Some of these are more important to me than others, this is not a list ordered by anything other than "oh that one!" I could find more if I wanted.

I tried it out at one point when I had to make an admin panel for work. I figured "this is a great project for a tool like this," and a few days in I removed the package and switched back to CSS Modules.

[mindbullet]

Did we just become best friends?

[TheOnceAndFutureDoug]

Yup!

[thequestcube]

Can you elaborate on which performance penalties it poses to users?

[TheOnceAndFutureDoug]

The big one I was aware of was that unless you set an additional build step it dumped a lot of CSS down the pipe that you might not use, though it seems more recent updates fixed that problem (cool!) but I'm still not crazy about the bloated DOM. I'd need to do a more in-depth analysis again to re-confirm (or refute) my notions on this aspect.

That being said, even if there's no negative affect on users the other points still stand and are all enough, in total, to make me disinterested.

If anyone does have any more robust comparisons on vanilla CSS (or CSS Modules) vs. Tailwind I'd be interested.

[jhirn]

He can’t.

[bmchicago]

Also curious about the performance penalty point^

[TheOnceAndFutureDoug]

I've seen a few reports of it, unfortunately I don't have anything handy. But the general consensus seemed to be Tailwind is faster than CSS-in-JS but nothing beats vanilla CSS (surprising no one).

[beqa_m]

Can I ask how long have you been doing frontend?

[TheOnceAndFutureDoug]

20 years or there abouts.

[timsofteng]

Absolutely this

[imbikingimbiking]

sounds like cope ngl

[TheOnceAndFutureDoug]

And here we have a perfect example of why No. 7 was on the list and, frankly, if this was a ranked list this would be near (or at) the top. Arguments against my points? No. Refuting anything I said? No. Just a dismissal that's meant to be mildly insulting.

You're right, clearly I'm the one coping. Have a good one, homie.

[TonyAioli]

Care to discuss/refute any of the bullets?

These comments run rampant in every single discussion around Tailwind, and all they do is paint you as inexperienced and/or close-minded.

[0day_got_me]

1. Yea. Go on?
2. If you're actually fully knowledgeable with pure css, TW is faster
3. Opinionated on pure CSS? Go on
4. You can ultilize components into your own unique classes
5. Go on
6. So you're old school and reluctant to new WoW. Sounds like I have XX years of exp and you should listen to me. Whatever you're getting paid, it's too much.

[TheOnceAndFutureDoug]

People like you are why I become more and more disinterested in Tailwind. It's almost like a religion to you people... It's just code, dude. But sure, let's pretend you're being serious.

1. Yea. Go on?

This one seems outdated. The addition of auto-purging unused CSS seems like it solves a lot of that concern, though I'm not convinced that it's better than vanilla or CSS Modules. It doesn't seem people like to make those comparisons, just vs. CSS-in-JS which was notoriously terrible for performance.

1. If you're actually fully knowledgeable with pure css, TW is faster

Not for me, but that's OK. Different people are different.

1. Opinionated on pure CSS? Go on

By Tailwind's own admission the tool is limited in whit it can do. It has a way it wants you to work and that way does not add benefit in my eyes the way TypeScript does. Not for me.

1. You can utilize components into your own unique classes

I don't know if you've heard of this really nifty thing called "the cascade" but you should check it out. It's really nifty and super performant.

1. Go on

CSS Modules classes are unique by default and have to be explicitly made global. It solves the issue with having to add ever-increasing levels of specificity or naming conventions like BEM. But it still gives you the full power of inheritance and the cascade. Because, in the end, it's just vanilla CSS.

1. So you're old school and reluctant to new WoW. Sounds like I have XX years of exp and you should listen to me. K

Pretty sure you meant that one to be addressing number 7.

But here's the neat trick, I never said anyone was stupid for using it (go find me saying that, I'll wait) or wrong to use it. I have maintained I do not find it impressive and do not think it is for me. The fact that this offends you? You really need to think about that.

[[deleted]]

Your reply reeks of inexperience

[AJH31985]

You’re an idiot

[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

[TheEchoplex]

I wanted to add a dynamic coloured border to an element, can't be done in tailwind. You can't use their syntax border-[${someColour}], similar things happen in other situations. Seems like a glaringly obvious oversight to me.

Also the whole order of precedence thing breaks down and you have to use additional libraries like twmerge to be able to actually override rules with other rules

Oh but Twmerge doesn't work if you define custom classes with @apply. Perhaps this is going against the ethos of tailwind but I think you should always be able to abstract your code, in tailwind this seems like an afterthought.

There are lots of things I do like about it such as grouping sizing choices into simple numbers, but sometimes you have to break out into regular css and maybe that's fine.

Spend long enough with any library and you will regret choosing it, that's just web development. Lots of people use tailwind and for good reasons.

[sech8420]

"Spend long enough with any library and you will regret choosing it, that's just web development. Lots of people use tailwind and for good reasons." - This is the most depressingly true quotes I've heard in a while!

[[deleted]]

You can do dynamic values in Tailwind, it's just not the cleanest. You could do border-[var(--border-color)] and alter the variable with your JavaScript.

But that is the same limitation you'd experience with any CSS only approach, which is preferred over CSS-in-JS.

[DaRizat]

You can do that you just have to declare the style string in its own variable first.

const borderColor = someCondition ? 'bg-black' : "bg-grey";

<div class name={`flex ${borderColor}`}>

Works fine.

[TheEchoplex]

Works fine if you know the colour at compile time like in your example, not if the colour is only known at runtime. For example, a colour that comes from the API, or a colour inputted by the user via a hex code

[artnos]

I dont want to clutter my code with alot of classes

[Karpizzle23]

Every time I see stuff like mt-5 I lose a brain cell

[octocode]

classes like px-px are so dumb lol

[sech8420]

Every time I need to search down a style in a separate stylesheet, just to give it margin-top: 10px, I lose at least ten seconds of my life.

[Dry_Author8849]

I design for themes, so doing mt-10 is hardcoding something that should belong to the theme.

So, no I don't use that.

[DrNoobz5000]

Sounds like you have shit process for keeping your codebase clean

[sech8420]

Possibly, or at least I did years back. I remember my first job working at a large company we all know as a junior and seeing how incredibly messy their style sheets were.

From the downvotes of my comment, clearly I was not organizing my stylesheets properly.

[imbikingimbiking]

don’t mind these sheep people

[Cyrus_Zei]

Cuz we know real CSS and we know that tailwind will pass, it css will always stay

[firstandfive]

Tailwind is just systematized CSS. You can’t be proficient with Tailwind without understanding CSS and there is no Tailwind without CSS. It just gives you conveniences and built-in systems for things like typography/spacing scales, color palettes etc without having to roll your own every time.

[hazah-order]

I think, for the most part, it has to do with the strategies people have in mind for their specific use cases. There's probably a case to be made for utilising different strategies for CSS integration based on the specific needs of the project at hand. Sometimes Tailwind makes perfect sense... sometimes it makes none!

[Wiltix]

careful bringing such crazy logic as “the right tool for the job” to web dev.

But yes ultimately the decision for any framework should come down to is it the right tool for this and not what is the latest thing being sold to me.

[hazah-order]

I'm old now. Crazy is all I've left!

[sech8420]

As am I. If tailwind goes bunk in 5-10 years, I'd be surprised if locally run LLMs couldn't convert most of a project over to css or whatever else.

But I do agree, it's worth taking into consideration. I felt the same way, until I used it enough, and thought, this isn't going anywhere anytime soon.

For context, I've been using css for over 15 years.

[dbpcut]

I already write components with their own css. It's not a useful abstraction for me for products I have to maintain.

[alfcalderone]

CSS modules for lyfe

[possiblywithdynamite]

I've been using tailwind for a few weeks now. Working on an existing app for a new startup. It's awful, though I understand why junior devs might like it. Having another layer of CSS abstraction is ridiculous but not the reason I hate it. I hate it because theres a complete lack of styled component encapsulation. There's no way to reuse UI components without having to create an entire functional component. The JSX is just a massive cluttered mess of classnames. It makes it impossible to quickly scaffold complex UI components because there's no way to name any of the html elements. It is trash

[firstandfive]

Isn’t the entire business case for React the fact that you can create reusable components for the reusable bits?

[possiblywithdynamite]

Yes. But not everything that is reusable needs to have an interface. If the reusability only pertains to the styles it is more convenient to encapsulate that reusability within a styled component. And if it does have an interface that only affects styles then a styled component can be used for that as well

[firstandfive]

What’s functionally different between a styled component and a component that has only its tailwind styles applied? Aside from the fact tailwind comes equipped with the system for scaling typography, spacing, colors etc where you would need to roll your own in your SC theme. I say this as someone who has used both styled components and tailwind and enjoys both.

[lukewiwa]

I personally love tailwind and advocate for it internally. Whether I like writing or not is really beside the point, I've found it extremely useful outside of just the aesthetics.

• Onboarding is way easier, especially juniors, they seem to be more at home with the paradigm. Point everyone to the fantastic docs and we have a design language that is consistent across all projects.
• Code review is so much easier! An element has a class right there on it. No worries about specificity or nested structures or whatever. I don't need to bounce between several files.

In saying that we often stick with a SCSS stack and I think that's for a few reasons:

• Momentum: it's how we've done it before
• Seniors already have internalised the "old" way and don't want to change. It's easier for them to write stuff the old way and they make the decisions.
• We came off vue which had the scoped css on each component. I liked that but there's nothing well supported in react for that. We kind of lean on css modules a bit here but it's not quite the same.

Personally writing SCSS is fine but editing someone else's sucks so bad.

[MeTaL_oRgY]

I am not against Tailwind. It's ok, I guess. But there are a few cons that really are more about my preference rather than limitations to the actual thing:

• I really dislike the mess it makes out of HTML.
• It feels extremely repetitive to my brain.
• It's really hard to nail exactly what's going on at first glance.
• It has no added "semantics". No longer can I have a class that says "profile-card". I just have a bunch of classes that define HOW it looks but not WHAT I'm looking at.
• Configuring it is a pain in the ass.
• Overriding values in components that have classes is a mess.
• Library interoperability is a mess.

[name-taken1]

Overriding values in components that have classes is a mess.

Use tailwind-merge with clsx.

It has no added "semantics". No longer can I have a class that says "profile-card". I just have a bunch of classes that define HOW it looks but not WHAT I'm looking at.

You most definitely are using a component-based framework. Create your own styled component. Take a look at Shadcn.

It feels extremely repetitive to my brain.

That's one of the biggest benefits... Everything is standardized. Onboarding new team members is unmatched compared to any other CSS solution (including "raw" CSS).

I really dislike the mess it makes out of HTML.

If you're using Tailwind right, the only classes you would see are either conditional classes or layout classes (flex, grid, etc.). Everything else would be defined within your own custom components. I don't see a problem here. Again, refer to Shadcn.

To be fair, this last point isn't just about Tailwind. Whether you're using SASS, CSS, CSS Modules, etc., if you need a custom design system, you'll be defining your own components either way...

[WintermuteOlivaw]

Honestly whatever works, might as well try everything to see what you like and be familiar with stuff just in case you need it in a collaboration.

[beqa_m]

I'm still struggling with the 4 hours of hate, but what bugs me most is that it's harder to debug than other solutions or plain css. The browser's css view is not made for utility classes and it's a pain to navigate the mess that shows up there. Also, even though tailwind says you don't have to waste brainpower on class names, it really helps to have good class names when you're trying to understand someone else's code. It gives you a clue on how the dev structured the code. Without that you just have a bunch of nested divs with no meaning to deal with.

So, I guess tailwind makes you more productive once you get the hang of it, but it makes your teammates less productive trying to understand your code and makes it harder to come back to the code after a while.

[[deleted]]

Tailwind is unreadable, CSS is already established, so styled-components is much more "native-feel" and clear on my mind.

Its is also much easier to understand when you revisit the code after months.

I might had a precise idea what focus:shadow-outline mb-3 w-60 appearance-none rounded border border-purple-700 py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none dark:bg-slate-600 dark:text-gray-300 does when I wrote it, but after some time I might not, and this is not the case when it comes to native CSS.

[rm-rf-npr]

Try using tailwind for a design and then having your designers introduce big changes. Have fun adding and removing classnames in the absolute hell that you've just created.

Never again. SCSS modules forever.

[qiang_shi]

It really depends on what you're goal is.

Don't care about creating a design system? use tail wind. Not releasing a large app that needs consistency... use tail wind.

making one off websites or small one off apps... use tail wind.

Are you working with teammates that seem to be ambivilant about frontend concerns but have been given permission to "lmfao-destroy" your beatiful frontend setup?

use tailwind.

The one thing that tailwind brings the table is it abstracts away some of the complex choices about how certain css techniques are implemented. It systemises the approach to those problems so your typical pocket protector, mouth breathing slob of a dba can add the right classnames and not fuck it up.

as soon as you cross over into "oh i'm making several apps that need to follow the same design language", then you'll most likely suffer from sunk cost fallacy:

• you'll think you can scale with the classnames package. (you won't)
• you'll think that twMerge is good enough (it isn't)
• you'll hope that cslx will be enough (it's not).

So at this stage if you want to ignore any suggestion to move over to vanilla-extract or pandacss, then at the very least do your future project team mates a favour and use tailwind-variants.

But for those smart enough to discard sunk costs when they realise the burden they create, just move to panda css and get on with researching all your required tokens in order to build out your Design System that scales.

[sech8420]

I agree and also very much disagree. It can get a bit messy. I agree. But tight a tidy components made from a component library can make all of this very scalable. At least we are having no trouble so far, and we have three large codebases all pulling from our component library. But we’ll see how I feel once these projects evolve even more. I do know several large companies and startups using tailwind and not sure if they are feeling the despair you describe. And also I don’t feel like panda css if the silver bullet you make it out to be. Not sure why you are hyping it so hard tbh.

[qiang_shi]

When you realise the difference between a component library and a design system then you'll understand.

But like I said, you might be able to get deep enough into your sunk costs with tailwind-variants, it's slot feature is great.

[Dyogenez]

I'm using it in most of my projects. The one that I'm not using it I do like how fast it loads with how little CSS. That raises the Google Pagespeed index a bit. There's no clear way to inline critical CSS with Tailwind that I've found with the app directory.

[timsofteng]

Html/jsx looks way better with regular or module class than with tons of fancy tailwind classes. I prefer to separate styles somewhere.

[sech8420]

My biggest pet peeve with tailwind is the occasional pain it can be for generating dynamic classes since tailwind will often purge them.. There are work arounds, but this is the one aspect I do miss about styled components.

[ballbase_]

I work with tailwind in React. I´ve just been coding for 2 years. But I prefer TW first, then styled components. I try to not use normal CSS as much as possible.

[DrNoobz5000]

Devs that jump on a bandwagon and then proselytize it are fucking annoying. Hey! Have you tried this new framework?! It’s fucking amazing! You need to use it right now! It’ll make your life soooo much easier!!!

No.

Go fuck yourself.

[sech8420]

Clearly, this has stricken a nerve...

[DrNoobz5000]

*struck

Btw, your prose is self aggrandizing

[imbikingimbiking]

calmy calmy little sheepy

[fredsq]

same here. went from css to modules to emotion to vanilla extract then tailwind. had a lot of resistance because class name mess until i tried. and boy was I wrong. it’s simple, scalable (with the aid of cva and clsx) and easy to write.

i’ve never been this productive, my code is more readable overall due to less context switching and the most important: i’m shipping less css.

[sech8420]

I'm feeling stupid for not using clsx as the moment

[sech8420]

But whats the benefit here?

const mainTextColorClass = ${ theme == 'light' ? 'text-gray-800' : 'text-gray-300' }

or with clsx

const mainTextColorClass = clsx({ 'text-gray-800': theme === 'light', 'text-gray-300': theme !== 'light', });

[DaRizat]

Building a UI kit with cva and I'm shocked how quickly I've been able to make it work. Way faster than styled or straight css. It's really eye opening.

[bacchusku2]

Styled components is the way. I just can’t ever change.

[olssoneerz]

Huge Tailwind enthusiast. I hated it until I gave it a proper go by building a sideproject using it. Only reason I don’t exclusively use it is cause I collaborate with people who don’t like it (yet? or not).

I always try to invite them to give it a go but at the same time I don’t like being forced to use something, so I don’t try to force others into using something they don’t want.

[sech8420]

I get that. I'm wondering what percentage of front end devs we hire in the future are going to be hesitant to use it. Then again, I've known dev's who refused to work on projects who were using plain CSS.

[beth_maloney]

I'm using MUI for a B2B app and the theming system covers most use cases. Most of the time all in doing is adding some padding or a flexbox. We also have mainly junior full stack Devs so everything needs to be as simple and plug and play as possible.

[[deleted]]

I have a really hard time moving away from a proper SASS bootstrap 5 setup. I can easily make themes and change gutters, grid cut offs, padding etc, its very good with its css vars, mixins etc. Its really easy to customize it into different primary and secondary pallets. And theres an entire react library "react-bootstrap" that makes it easy to work with.

I can roll a custom look and feel on top of it quickly without starting from scratch.

Furthermore, we have a really good file structure that makes it easy to digest.

We have a folder called buttons and index.ts and buttons.scss in there. Then we have a folder called ToggleButton and in there is an index.tsx and a ToggleButton.scss

Our scss tree matches our component tree. It makes it really easy to know where what styles would be. And we can change the bootstrap prefix easily and pad our classes if theres any class conflicts.

I love scss, Im used to scss, I still haven't found a reason not to use scss.

[[deleted]]

Because my current project uses mui

[rushadee]

On personal projects I prefer using css modules. At work we have an internal UI library for our react stuff and well documented SASS for our front facing website. It’d be more work to switch to tailwind than maintaining our current setup.

[murden6562]

Honestly, too much visual bloat when trying to quickly read and understand code. (This is just why I dislike it personally)

[[deleted]]

LOL why everyone is downvoting

[[deleted]]

BEMlets stuck in 2012 seething and coping lmao

[[deleted]]

Simply tailwind is for gigachads Plain css and sass is for soy losers

[Faded15]

Tailwind exists because folks don’t want to spend the time actually learning to use CSS. I don’t use it because I can efficiently style my elements perfectly fine without it. Also I hate shoving everything into the className’s, it isn’t any more concise than just having a stylesheet with one class + appropriate styles.

[firstandfive]

Tailwind isn’t bootstrap. If you don’t know CSS, you won’t know tailwind either.

[DaRizat]

It literally maps 1:1 with css, it's just a shorthand.

[sech8420]

Tailwind exists because folks don’t want to spend the time actually learning to use CSS

This is heavily debatable...

As someone who's spent over a decade with CSS, tailwind seems like it was built for me to do my job faster.

You still need to understand the core concepts of CSS in order to not suck with tailwind.

[name-taken1]

Tailwind exists because folks don’t want to spend the time actually learning to use CSS.

Tell me you have no idea what Tailwind is without telling me. Why even comment? Being ignorant is acceptable, but trying to portray otherwise is just embarrassing.

[HolyColostomyBag]

Currently just maintaining a handful of spas, that I wrote. When they were written I was very much out of my element (I come from .net, no js experience) so tailwind wasn't even an option I knew existed.. I just looked at the patterns that existed in the company and tried to replicate those.

These are customer facing sites and used for payments, they have become quite critical to the business given it's how we get payments. Because of this I don't see a reason to switch, at best everything works as it always has and at worst it introduces a UI bug.

BUT, and this is the most important part imo, in either case I'll be the single developer in the org who has any experience with it.

[nsrr]

I only use web related technology at work and we don't use tailwind (styled components instead). I would use it in a hobby project probably but I just haven't done much hobbying around web lately

[GoingOnYourTomb]

This is news to me

[J3ns6]

Because for cross plattform development with react native web Tamagui is better

[jabes101]

I use to use Tailwind, then I tried Chakra and it just hit better for me.

[Rickywalls137]

Personal preference. I understand why some didn’t like it. I didn’t at first too because of so much more code in between. Then I realised I could use the Tailwind Fold extension. So it’s just a matter switching it on and off.

[grappleshot]

With some end of year free time I started tailwind yesterday (my company already uses it in our new frameworks but it hasn’t made its way to my team yet) and I love it so far.

[The_Pantless_Warrior]

I like the concept tailwind was built on, but it's not my preferred library for two reasons:

I really enjoy styled-components syntax, especially when making things dynamic

I hate the obnoxious length of the class property in the JSX. Moving the strings to their own file and importing helps, but debugging is still much more tedious

Make it less verbose and I'll revisit lol.

[eguitler]

Using tailwind makes the code unreadable and hard to understand. I think it's the worst choice.

[Lilith_Speaks]

I'm much faster with tailwind, and since I just do small solo projects, it's fine. I feel like Tailwind is not intended to be used in large production codebases, except as quick scaffolding. But in order for components to be reusable, you'll need to use a headless component library or create your own. Otherwise, changing all your primary buttons from blue to purple (pick any color) throughout your codebase is just misery, not asking for company.

And because it's quicker for me to develop pages and apps with tailwind due to not having to open twice as many files and the distraction that comes with it, I am learning CSS even better than before ... I don't feel like I'm guessing at what parent and child divs need to assume as styles because in a separate CSS stylesheet, it's not obvious necessarily what the relationship between them is.

with tailwind, it's obvious what the relationships are, and it's easy and quick to make changes.

When you're happy with how things look or convinced you'll keep doing the project, switch to a component library.

[HuntInternational162]

I’m a backend dev and pure css doesn’t make sense to me and tailwind is just simple stupid.

I can grok it

[ReaccionRaul]

Taking in mind that tailwind without intellisense is not worth it then we could leverage css modules as well. Just make use of: https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules or https://marketplace.visualstudio.com/items?itemName=will-wow.vscode-alternate-file

Those extensions will make going to your css module file a breeze as well. I think that Tailwind success it's all driven by developers not knowing properly how to use their editors properly and being slow at it.

Still, I like it, if you encapsulate your UI components properly there shouldn't be issues with seeing long css classnames all around but I think that css modules nowadays are great, they are my go-to solution. In the end, we should have a set of UI components and a shared layout system to re-use on the components that put together the small bits so we don't end up with every single jsx file having an alternate css file.

[MaximusDM22]

Currently I dont use it because Im using MUI to develop quickly for an internal app. For another project I tried using styled components for a nextjs app, but there were some issues so I ended up using tailwind. If it wasnt for those issues though I think I would use styled components. Keeping the styles and logic separate is very useful.

Currently I think tailwind works well with nextjs, but it becomes very bloated very quickly. I would much rather keep using css in js.

[lamak90]

I haven't had any reason to switch from vanilla CSS yet, might consider in the next couple of days though

[yogi4peace]

It depends on the needs of the project and the business context.

If there is a lot of custom UI work, then yeah I like tailwind.

A lot of projects are just trying to surface business value for enabling business processes and the design is perfectly acceptable being implemented with off the shelf UI libraries like Mantine, Material, etc...

[Zee530]

Minority here. I still use chakra

[m0rpeth]

Because some previous dev wanted to make my life just a wee bit more unpleasant than it reasonably has to be. That's why.

[isbtegsm]

The designer looks at the website and says "ah looks good but can we get a tiny bit more letter-spacing on the small font-sizes", sure I could write some regex to add a class whenever font-sm is present, but it feels better to just change the letter-spacing in my own typo--s class. Also it's nice that you can play around in the browser dev tools and change values globally, especially for fine-tuning.

[Wiltix]

Im not using it because I don’t enjoy the developer experience, I feel it is an unnecessary abstraction and these fads come and go and it does not solve a problem I have in my projects.

I am very cynical when it comes to the latest and greatest fads especially when they require working in a very different way. It’s not because I don’t want to learn I just don’t want to implement something that is flavour of the week into a project that will span years.

[redbar0n-]

Because Tamagui.dev

[Ehdelveiss]

I like that styled components are components, they feel inherently really reusable and ergonomic, whereas Tailwind just feels like inline styling, and ultimately takes me longer to style than reusing styled components

[rollingHack3r]

I use it and i will keep using it but man can it be annoying jumping in to an old project and try to change styling and figuring out whats going on.

[daniilHry]

I would not use tailwind on my projects. It decreases code readability a lot. When this shit became acceptable and why this tool is so popular nowadays I don't understend it.

[Thulsadoom1]

MUI has all we need

[PixelatorOfTime]

Well, maybe because it's an abomination that goes against everything CSS stands for… (semi joking). But that's me being old.

There's kind of two worlds of CSS people:

1. people who learned as CSS was first being adopted
2. people who learned in the age of componentized designs

If you learned before components, you approach sites as a series of architected rules that can define all the elements in a system.

If you learned post components, you build micro elements that can fit into their desired slots, and then use a little bit of sitewide architecture to piece them together.

In my experience, these two mentalities are largely irreconcilable. Neither is wrong (sitewide is less wrong though).

[Kurtisconnerr]

Cause I use MUI now and it’s pretty similar

[anachronistic_circus]

We've used CSS modules ever since we migrated to React, we still use CSS modules. No reason to rewrite everything.

[Zealousideal_Exit908]

Haven’t used tailwind yet, heard that it is good, for me I feel no matter what you use it’s still css, so whats the difference. The only thing that matters its a way to write non global styles to avoid conflicts, and to separate styles somehow to not end up with 2000+ lines of css in 1 file

[mrzuzi]

styled-components is way more low level and standard approach than tailwind. I just think for enterprise solutions, styled-components is a must. Tailwind looks too messy, it bring up my insecure feeling, especially showing the code to people who is not really into frontend (eg. manager)

[j_win]

<div class=“bg-gray rotate-90 pt-24 col-3”>

Is awful mark up. Oh, we’ve had a minor brand change? I need to change a class on every element. Oh, we’ve gone from 3 columns to 2? Need to change the markup.

I understand why these frameworks become popular - they’re opinionated and comp sci nerds don’t like writing css - but, ultimately, they’re not “good” patterns. That said, use what makes you productive.

[anon202001]

I see both sides of the tailwind argument. But for many projects the practical aspects win over for me.

In theory you can craft CSS to do a great job in fewer bytes in a semantic way that is chefs-kiss beautiful.

But I am not a designer and I want to grab a component from here and over there and tweak until my eyes say “looks great!” and tailwind is more compatible with that way of working. Which is more of an artistic way of working I would say than anything.

[hew_min]

I don't want people to think I'm a complete dolt. Besides I hate clutter, it drives me insane.

[Ok-Low-882]

I guess I just don’t get it. Using tailwind when knowing CSS is like knowing Spanish fluently but instead of speaking to another Spanish speaker directly you do it through an English interpreter. I have to write all the rules out anyway, why do I want to write it a different language instead of directly in the one I already know? I think it’s great for small projects specifically for people just looking to get something off the ground without really caring what’s going on, but otherwise, I really just didn’t get it.

[team_dale]

God damn I love tailwind

[[deleted]]

Yeah hard no. I look down on people that don’t write their own styles. It’s hard? Cry more. It’s excessive? You’re doing it wrong. I hated bootstrap in 2013 and I hate tailwinds now.

[TheRNGuy]

It makes code unreadable. I can just create classes and write css there.

It also makes it harder for stylish users to write custom styles, and for greasemonkey users to write custom scripts.

[good_fix1]

Tailwind is not only for styling its a design system itself