You either use a generic CSS or a generic HTML.
Everybody who picks Tailwind decides to use a generic CSS and a specific HTML.
I like the old school approach of having a clean and semantically correct HTML without any styling information. And then implement the "theme(s)" in CSS.
Makes just more sense to me and goes along with the idea of CSS - separating style and content.
But the recent adoption of tailwind make me think a lot.
Styling HTML with a few classes and css selectors has drawbacks: you have tightly coupled code that is separated, and modifying one or the others implies that you recalls properly its counterpart. There are methodologies trying to address that, but it never seems to be enough helpful.
This becomes even harder when you refactor/reuse things.
It is then worse when you want to maintain.
With an approach like tailwind, with non-specific css, the coupling is ensured, the css is re-usable, the patterns are re-usable, re-factorable with a single copy paste.
I don't use tailwind yet, but just using exclusively utility classes changed my ease in writing, refactoring, re-using and maintaining code by an order of magnitude.
> what's the benefit of Tailwind over style attributes on HTML tags
For example, you can't specify hover, focus etc. style attributes. You can't specify screen sizes either. Plus there are few Tailwind classes that cover several attributes.
Plus many of those styles are just unwieldy. For example, `drop-shadow` is `filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));`
This. The secret super power in Tailwind is editing the tailwind.config.js and forcing standards. Then you have have something like only having four padding options per your style guide and them defined in one specific place. In style tags you could use a CSS var for this as well but you better hope you used it everywhere. Plus, that becomes super wordy: 'padding-left: var(--padding-1)' vs 'pl-1'
Oh I'm one of them..but incredibly clear shorthand is helpful for these kinds of cases. Writing code like `const a = 5; b = a/2; c = a/b` is pretty nonsensical. but in tailwind these things have meanings: p = padding, m = margin, then you have left, right top, bottom, (l r t b) and then X and Y. (so pl- mx- pb-) That is all of them. At the rate you use them it is pretty clear I guess.
It goes to say that it would be a computational nightmare to make computers understand styling, while HTML is very understandable for both humans and computers
I like the old school approach of having a clean and semantically correct HTML without any styling information. And then implement the "theme(s)" in CSS.
Makes just more sense to me and goes along with the idea of CSS - separating style and content.
But the recent adoption of tailwind make me think a lot.