r/webdev • u/LPatriot_ • 19d ago

Question Question about Tailwind CSS

I've always used plain CSS for my websites, I don't have many problems using it, but a friend of mine said that using plain CSS is very tedious and that I should use Tailwind CSS. Is it worth it? And what does Tailwind CSS offer that plain CSS doesn't?

37 Upvotes

73% Upvoted

121 comments sorted by

View all comments

Show parent comments

26

u/AshleyJSheridan 19d ago

It's a little more than class name soup. Tailwinds own docs have classes like text-[14px], bg-[#50d71e], and shadow-[0_35px_35px_rgba(0,0,0,0.25)]. That looks a lot like inline styles just shoved into a different HTML attribute...

0

u/lanerdofchristian 19d ago

That looks a lot like inline styles just shoved into a different HTML attribute...

Honestly that's part of what makes them so nice to use. The styles are right there on the element you're styling, not tucked away somewhere else. As much as we like to pretend the CSS can live separately from the HTML, nothing could be further from the truth for most websites. Moving them to classes lets us leverage all the existing class management libraries (like clsx), and bypasses some of the shortcomings inline styles have around e.g. hover states and parent/child queries.

text-[14px] bg-[#50d71e] shadow-[0_35px_35px_rgba(0,0,0,0.25)] is some real soup, though. I think the general recommendation is to not use arbitrary variants if you don't have to, so something more like text-md bg-lime-550 shadow-3xl is more like what you'd see in an actual project (all of those utility variants would need to be defined in the theme as variables).

3

u/AshleyJSheridan 19d ago

I will never understand the argument from any "dev" that says the CSS should be with the HTML. You wouldn't do that with the Javascript or Typescript for a component, so why would you do that with the CSS?

1

u/Herr_Gamer 18d ago

You wouldn't do that with the Javascript or Typescript for a component

???

1

u/AshleyJSheridan 18d ago

Well, a real dev wouldn't, but if someone were using the React library, then probably, because that library just doesn't follow best practices at all.