3 ms·

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 o

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.

tuyiown 4y ago
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.
- necovek 4y ago
  Other than being shorter, what's the benefit of Tailwind over style attributes on HTML tags? (I am no frontender, though I was a "full stack developer" up to CSS 2.0)
  - dmitriid 4y ago
    > 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));`
    - agloeregrets 4y ago
      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'
      - toastal 4y ago
        Are the folks that hate single char variable names here to chime in?
        agloeregrets 4y ago
        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.
      - necovek 4y ago
        Isn't this ("forcing standards") the usual property of using CSS classes (responsibly)?
xkcd1963 4y ago
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

tuyiown 4y ago

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.

necovek 4y ago
Other than being shorter, what's the benefit of Tailwind over style attributes on HTML tags? (I am no frontender, though I was a "full stack developer" up to CSS 2.0)
- dmitriid 4y ago
  > 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));`
  - agloeregrets 4y ago
    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'
    - toastal 4y ago
      Are the folks that hate single char variable names here to chime in?
      - agloeregrets 4y ago
        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.
    - necovek 4y ago
      Isn't this ("forcing standards") the usual property of using CSS classes (responsibly)?

xkcd1963 4y ago

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