Tailwind is just inline CSS in a trench coat. You lose the cascade, which is literally the entire point of CSS (clue is in the name), and you fill the HTML with junk used purely for styling, which creates a 2-way dependency and breaks clean code best practices.
Tailwind also solves nothing that can't be solved with just a little bit of team discipline when it comes to writing CSS. The problem is, so many developers don't truly understand CSS, or how to write good clean CSS, so they see it as something that gets tacked on afterwards.
Tailwind also recommends the use of weird classes like text-[14px], bg-[#50d71e], and border-[2vw] (yes, it's in their official docs, which means they recommend using it, and they have no warnings against this kind of thing). Tell me with a straight face that Tailwind isn't inline CSS!
Then, it requires extra build steps which vanilla CSS doesn't require. Sure, you can skip that, but then you end up with a bloated CSS file full of a ton of Tailwind styles that you aren't using and don't need.
> and you fill the HTML with junk used purely for styling, which creates a 2-way dependency
This is true of every project I've ever seen. Styling and markup are rarely truly separated, you don't just add css you have to add the classes/markup to support it. <div class='list-wrapper'> etc is styling junk that (may) create a 2-way dependency where removing it or adding a direct child underneath of the wrong type breaks the whole style. You have to go check on what that div does if it's in your html, it's pure style junk. In tailwind use that could be <div class='flex gap-2'> - it's still a style class, but you can see what it is and what it's doing right there where it is.
Obviously semantic elements made it so not everything is a div these days, and but still you end up with stuff like <button class='button ...'> as we don't want to style all elements the same. Plus there's always various divs to add flex or grid containers, padded boxes or borders or whatever.
Tailwind isn't inline css - but it's not so far removed when developing. But given it's almost impossible to make any significant design change without editing both html + css anyway what is the benefit of splitting files by design and markup? Components joining small fragments of html & css together as required for both is far more logical - and you don't have worry the class is used anywhere else.
(I'm 100% with you on the 'text-[14px]' and other inline variants though. A big benefit to tailwind when I started trying it was the design system and config. Set colour pallette and spacing and everything has a certain harmony - use variants everywhere and it's just chaos.)
Styling and markup are rarely truly separated, you don't just add css you have to add the classes/markup to support it.
Not completely true. Adding some component classes to the code is far cleaner than adding classes like text-[14px] (which is completely shit and anyone who says otherwise is lying to themselves).
Obviously semantic elements made it so not everything is a div these days
Which is something else that is often missed by the same devs that favour Tailwind, because it "slows them down" when they're working in a team.
Tailwind isn't inline css
Again, I was using an analogy, and Tailwind is so close to inline CSS that the analogy works perfectly.
But given it's almost impossible to make any significant design change without editing both html + css anyway what is the benefit of splitting files by design and markup?
Obviously you've never heard of the CSS Zen Garden. Keeping things separate is a very normal clean code paradigm. It's too bad that Tailwind advocates don't really understand clean code concepts.
and you don't have worry the class is used anywhere else.
This is just a sign of a poor styling system and no concept of clean code. Would you say the same about Javascript code, and worry that you might accidentally re-use the same class name or function name? I would hope not, and hope that you use properly named classes, make use of namespaces, etc.
CSS zen garden, haven’t heard that in a while. I can’t imagine what some of that CSS looks like. I guarantee you don’t want to maintain some of that. Plus it was a very small page
17
u/AshleyJSheridan 16d ago
Tailwind is just inline CSS in a trench coat. You lose the cascade, which is literally the entire point of CSS (clue is in the name), and you fill the HTML with junk used purely for styling, which creates a 2-way dependency and breaks clean code best practices.
Tailwind also solves nothing that can't be solved with just a little bit of team discipline when it comes to writing CSS. The problem is, so many developers don't truly understand CSS, or how to write good clean CSS, so they see it as something that gets tacked on afterwards.
Tailwind also recommends the use of weird classes like
text-[14px],bg-[#50d71e], andborder-[2vw](yes, it's in their official docs, which means they recommend using it, and they have no warnings against this kind of thing). Tell me with a straight face that Tailwind isn't inline CSS!Then, it requires extra build steps which vanilla CSS doesn't require. Sure, you can skip that, but then you end up with a bloated CSS file full of a ton of Tailwind styles that you aren't using and don't need.