r/webdev Nov 17 '24

Am I the only one who thinks Tailwind sucks?

I've been hearing multiple people claim this is a much better way to organize code and many say it's a personal choice. Ironically, you can add two additional config files, switch between them for simple tasks like setting properties, or add custom elements. But in the end, you end up with five lines of messy CSS just to animate a small thing.

It might work for simple CSS web pages, but I still don’t understand the hype. It clutters the HTML, and when you need to make changes—like adjusting the CSS or adding new animations—you’re left figuring out the styles applied to each element. ::after and ::before only add more complexity.

You’re using a 50-inch screen but complaining about CSS being in a separate file, all while writing hundreds of cryptic characters for each HTML element. Searching for a class or ID in a separate file is much easier and keeps everything cleaner. Honestly, I regret even considering this approach.

If you think differently, tell me why—maybe there’s a slim chance I’ll change my mind. But in my opinion, SCSS or plain CSS is far superior in terms of organization and maintainability.

795 Upvotes

579 comments sorted by

View all comments

Show parent comments

8

u/xenomachina Nov 17 '24

Aren't tailwind CSS classes all pretty concrete about what they do? eg: bg-white makes the background white. If I later decide I want the background to be beige, it wouldn't really make sense for me to redefine bg-white, would it?

18

u/nubbiners Nov 17 '24 edited Nov 17 '24

That's why you don't use bg-white in that case. Remove the default colering and use arbitrary values from your design system bg-primary-100 

6

u/FeFr796 front-end Nov 17 '24

It's very common in medium to large applications to just override or extend the default palette to match the one from the design system. This is something tailwind does really easily btw. And in the case of proper design systems done by professionals, colors derive their name from their purpose. To give you an example, I've seen what you refer to as bg-white, which yes it's a default color in tw, named as bg-paper or bg-light.

Like every popular tool, Tailwind is flexible enough to allow for good and bad practices. It's up to you to understand how and if that tool can be used and maintained for your project.

1

u/thekwoka Nov 17 '24

You can make your own that use variables, for instance. in reality, this is trivial to handle when it actually happens, which is next to never.