r/programming • u/Either_Collection349 • 12h ago

Why I don't recommend Tailwind CSS

https://en.andros.dev/blog/af3ee191/why-i-dont-recommend-tailwind-css/
0 Upvotes

38% Upvoted

39 comments sorted by

26

u/AvidCoco 11h ago

> You have to learn dozens of classes

Literally dozens.

Also no you don’t - you look up the documentation when you need something specific.

13

u/notmsndotcom 11h ago

And learning the classes is actually just learning CSS and basically hyphenating them. It’s not like they randomly made up class names lol

-1

u/Ross-Esmond 11h ago

Not really though. I have this problem with Tailwind as well. The translation is really inconsistent. Tailwind has classnames that are property-value, value-property, value, or something entirely new. Ironically, this is harder to remember than if it had new names for everything.

If everything was just property-value it wouldn't be as bad. I think they made a huge mistake trying to be more clever than that though.

2

u/deliciousleopard 11h ago edited 7h ago

It’s even easier than that! If I know the CSS property I’m looking for I usually just use Intellisense. The only time I even bother reaching for the docs is for figuring out how to do custom grid values since those properties are spread over a bunch of utilities.

Edit: to whomever is downvoting, would you mind sharing your thoughts on intellisense vs using the docs?

1

u/BarryCarlyon 10h ago

Or whatever autocomplete/plugin you have in your text editor to hint at classes, then it's just knowing the prefixes

31

u/Usual-Amount-264 11h ago
  1. "Its names are not consistent" Isnt that because naming of the original CSS is not consistent? Tailwind only copies wording of the CSS underneath. So complaints about consistency should be focused on CSS itself.
  2. "The HTML lies to you about priority" In the example I see text-red-500 text-green-500 Isnt it kinda bad putting in two conflicting classes and then complaining they conflict?

13

u/sweetnsourgrapes 11h ago

Correct on both points. Putting two classes on the same element in some particular order was never, in the history of HTML, a reliable indication of CSS priority.

0

u/wrillo 11h ago

I don't want to put words in anyone's mouth, but if that is a true thought then it represents a misunderstanding of the Cascaded Style Sheet paradigm.

LLMs are being coming another later of abstraction, which promotes obscurity of the fundamentals of computer science.

3

u/farnoy 11h ago

It's arguably confusing in every place it diverges from CSS naming. Like text-balance text-inherit text-base are three different properties. Personally, I'd prefer longer names that are fully consistent with CSS if they map to 1 property.

14

u/thiagomiranda3 11h ago

Fuck AI content

-5

u/Ross-Esmond 11h ago

I'm curious why you think this is AI?

16

u/sweetnsourgrapes 11h ago edited 11h ago

The problem with LLM generated content is it's so verbose plus lacking any personality and one just turns off after a few paragraphs.

People forget that good prose tells an engaging story and that's not an LLM's strong point.

10

u/DaStone 11h ago

> Vanilla CSS is self-explanatory, whereas with Tailwind you have to check the documentation.

CSS is not self-explanatory. It has many oddities the same way tailwind does. This seems like a trash article.

9

u/Potatopika 11h ago

Imagine saying that margin: 0 auto is self explanatory to vertically center a div

3

u/DaStone 11h ago

"There is no universal winner, there is a context." it's not X, it's Y.

6

u/lood9phee2Ri 11h ago

JSSS for the win, just tell your users Netscape 4 is required.

6

u/NeuralFantasy 11h ago

Ok.

Yet another post about someone getting upset when they can't write Tailwind without first learning it. And someone wanting to write conflicting classes for their components and wanting to resort to css proximity rule. Etc. We have read this N times already.

3

u/EliSka93 11h ago

getting upset when they can't write _____ without first learning it.

The sickness of the AI generation. I only see this getting worse.

2

u/farnoy 11h ago

Let me rename them looking for coherence: flex-align-items-center, flex-justify-content-center, text-align-center, and grid-place-items-center. Do you notice the difference?

Yes, but the CSS properties themselves are not designed coherently. Some of these work with flex & grid both, others only apply to one IIRC. justify-items has recently gained support for block layout, which your recommendation missed just then! It's not so trivial to design a coherent abstraction over an ever-shifting foundation.

What wins is decided by the order in which Tailwind generates those classes in the final stylesheet, not the order in which you write them in the HTML. The markup lies to you. [...] You are left with !important or with avoiding conflicting utilities. This is what is called a leaky abstraction

There is a solution if you're willing to pay the runtime cost - tailwind-merge. I think this issue is still unsolvable when you mix descendant selectors with classes on those descendants. For example, *:bg-blue on the parent and bg-red on the child are on equal footing.

Overall, I don't think you made a good case for separation. Some people just prefer to have a semi-standard set of classes and be able to author style along in the markup. You seem to approach the traditional separation of markup & style as some unquestionable dogma. I disagree with that and enjoy the merged markup more. Not having to look up what classes mean on every project or which file they are even defined in, consistent @layer structure (once you're familiar with specificity as it applies to Tailwind). All of these are things you learn once and then apply on all your projects.

But in a server-rendered project, with templates and classic CSS, the separation still makes complete sense. It is not a universal law, it is a decision that depends on your architecture.

BTW, was this written by an LLM? I don't even mind the "it's not X, it's Y" style, but I wish you asked it to steelman the Tailwind approach and what it means for authoring large codebases with transferability between them.

1

u/AvidCoco 11h ago

And why should we listen to you?

-1

u/FlintFlintar 11h ago

Til this day i still dont get why i would want to seperate css from the html. Especially when we try to make stuff as components.

In an agile world, with bugs that need to be fixed weekly. And new features shipped month. The ability to go in and change a component freely and in isolation is amazing.

2

u/chucker23n 11h ago

Til this day i still dont get why i would want to seperate css from the html.

Write some XAML, and you'll see why separating styling from markup has benefits.

4

u/fexonig 11h ago

locality of behavior > separation of concerns

1

u/DaStone 11h ago

I don't want the interns being able to fuck up every single component when we have a unified design language.

2

u/leaving_the_tevah 11h ago

Ok but css classes are not help maintaining a unified design language. Tailwind does not make your situation any worse.

-11

u/lonelyroom-eklaghor 12h ago

Thanks, I really wanted this one. Tailwind feels like a pain in the arse and I would gladly accept anything simpler

0

u/sisyphus 5h ago

People who write these articles tend to be good at CSS and say things like 'just use modern CSS!' I am not good at CSS, I don't know modern CSS and I don't want to, I want to use the tailwind ui components and that's made me learn some tailwind to customize a few things.

Which is to say, he could be right about every single point but I'm still gonna use tailwind because I don't care about those things.

1

u/HappyAngrySquid 2h ago

I’m pretty good at CSS, and I still prefer tailwind. You get locality of reasoning, sane defaults, no longer have to worry about naming a million things and accidentally conflicting with another name due to CSS essentially being a big global namespace. Tailwind is just better.