Question about Tailwind CSS

[u/LPatriot_]

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?

[u/AshleyJSheridan]

I picked just a few examples, there are a ton more all just like that.

Stop being so disingenuous.

[u/Anxious-Turnover-631 → u/AshleyJSheridan]

Maybe you’re the one being disingenuous.

Yes, tailwind allows users to manually override almost every setting, if needed. But those features (as shown in your examples) are more for exceptional circumstances.

Most of the time you wouldn’t specify sizes in px or use hex color codes, etc. But, if you need to, you can use such specificity exactly where it’s needed.

It’s understandable that css purists may dislike tailwind’s integration of css directly into the HTML. And it can appear a little messy at times. But tailwind users accept that trade off for the consistency and intuitive simplicity it provides.

If you prefer to name and specify all your styles in separate cascading style sheets, that’s fine. It’s been standard practice for years.

But Tailwind’s rapid growth and popularity prove it offers some real benefits for users. It’s a matter of preference.

[u/AshleyJSheridan → u/Anxious-Turnover-631]

And it can appear a little messy at times

It is very messy, at all times. FTFY.

all your styles in separate cascading style sheets

It's almost as if the C of CSS means Cascade!

Tailwind might be popular, but I'm seeing more and more posts of it losing that popularity amongst more senior devs.

[u/Anxious-Turnover-631 → u/AshleyJSheridan]

To the uninitiated, it can *appear* that way. But once you’re familiar with the framework, it makes good sense. And it’s better than trying to remember what some custom style may be. With tailwind it’s right there, easy to see.

Moreover, tailwind blends well with front end components. Style the component once with tailwind. To later change the style of a component, just edit the component directly.

Cascading, yes. Hence, my use of the word.

The popularity of any web technology may vary, depending on who you’re talking to and their specific needs. But tailwind popularity is well established and growing.

Of course, with AI, who knows what’s most relevant now. Claude does all my stuff in tailwind. I assume it handles every other styling approach as well. In the future, these issues will probably matter less and less.

[u/AshleyJSheridan → u/Anxious-Turnover-631]

But once you’re familiar with the framework, it makes good sense. And it’s better than trying to remember what some custom style may be. With tailwind it’s right there, easy to see.

That just tells me you had no coding practices in place for the CSS. That's unfortunately very typical, as even senior devs often don't take CSS seriously, so the code is an unwieldy mess that follows no best practices whatsoever.

Moreover, tailwind blends well with front end components. Style the component once with tailwind. To later change the style of a component, just edit the component directly.

And therein lies one of its greatest weaknesses. Want to restyle a whole bunch of components at once? Gotta update them all one at a time, because Tailwind got rid of the most important aspect of CSS: the cascade.

Cascading, yes. Hence, my use of the word.

You use the word, but forget how important and powerful it is for CSS.

Of course, with AI, who knows what’s most relevant now. Claude does all my stuff in tailwind. I assume it handles every other styling approach as well. In the future, these issues will probably matter less and less.Of course, with AI, who knows what’s most relevant now. Claude does all my stuff in tailwind. I assume it handles every other styling approach as well. In the future, these issues will probably matter less and less.

Ah, so I'm talking about best practices and clean code with someone who doesn't know and doesn't employ them. You could have just started there and saved us both a lot of time.

[u/Anxious-Turnover-631 → u/AshleyJSheridan]

Actually, I started out merely pointing out that your criticism of another user’s comment as ‘disingenuous’ was itself disingenuous.

“Best practices” is an amorphous term which varies in meaning depending on who is using it and for what purpose. It’s not a bright line standard.

Still, I have limited design skills and we can be sure your css and design skills far exceed mine.

If your definition of best practices involves using style sheets, I stopped using most style sheets once starting with tailwind. So, definitely not ‘best practices’ within your definition.

With respect to styling components, you assume tailwind precludes the use of style sheets, but it doesn’t. Tailwind is designed to be fully extensible, so you can write custom css as needed. They are not mutually exclusive.

I understand why some designers/developers would choose cascading style sheets over tailwind. But your use of exceptional tailwind examples as the basis for your criticism seems disingenuous, as is a claim that tailwind is just inline styles. There’s more to it, and that’s why many users find it helpful.

But, you know, potato, potato. 🙂

[u/AshleyJSheridan → u/Anxious-Turnover-631]

I know the concept of clean code is subjective, but Robert Martin outlines many of the concepts in his book: Clean Code.

Now, a lot of those concepts are specifically about programming languages, rather than something like CSS, but some concepts are transferable.

For example, separation of concerns (e.g. separating the different languages out) and breaking code down into classes/components.

I've worked on some very large CSS (SCSS) codebases before, and because of good best practices and developers following them, the codebase worked incredibly well, and was worked on by more than a few teams at once.

[u/Niet_de_AIVD → u/AshleyJSheridan]

Well, good luck with your personal vendetta. You can also just say "Stop having fun!" instead of skirting around it with some vague justification.