7 ms·

Reading an article about the evolution of CSS and ending up at…Tailwind…really feels like a bait and switch. I don't consider Tailwind at all a "solution" for w

Reading an article about the evolution of CSS and ending up at…Tailwind…really feels like a bait and switch. I don't consider Tailwind at all a "solution" for writing scaleable CSS. It's a non-standard DSL for providing styling commands to a build tool, and the HTML/CSS output overloads class attributes everywhere in an absurd way. The "just use @apply" retort is also a non-starter if you want to write stylesheets that aren't vendor-locked to Tailwind's build tooling. I'm actually working on a large design system that's in the process of stripping Tailwind _out_, because it's in fact not scaleable if you want to provide vanilla component styling APIs via custom properties. And as some others here have mentioned, we're not even talking yet about web components, shadow DOM, shadow parts, etc. Scaleable CSS should adhere to the actual spec of CSS and how its evolving in browsers. Tailwind is a massive, non-standard deviation from the development of CSS.

alehlopeh 4y ago
The conclusion I took from the article was that CSS simply isn’t scalable. I’ve been hearing about web components for years and nothing seems to have materialized. I’ve never built something where I thought to even use shadow DOM. Tailwind is the only solution that meets the stated aims. If tailwind doesn’t adhere to the dogma for how CSS should work in principle, well that’s a lovely problem to have.
- weo3dev 4y ago
  "Nothing seems to have materialized..." --> https://nordhealth.design/ https://nordhealth.design/ -- these are all custom components. And here is D. Darnes explaining in part how they get things done: https://web.dev/custom-properties-web-components/ https://web.dev/custom-properties-web-components/ CSS is scalable. You have to actually know CSS in order to accomplish it. I've been here since mid-90s, when CSS first existed. It isn't until the past four or five years that things have really blossomed into (imho) what it should have been from the outset. Unfortunately, since we have had to use filler tools for things like layout (tables, hacked flexbox for grid), CSS itself has taken a beating in perceived usefulness/weildability. I believe because of THAT, fewer and fewer people have decided to actually learn CSS. CSS is a robust language. It is programmable. It is scalable. You just have to learn it, practice it, and approach problem solving from the top down, bottom up, and sometimes sideways. :-)
  - Fire-Dragon-DoL 4y ago
    Well, CSS have enough problems to probably suggest it failed. It can work, but it failed for massive amount of people, it doesn't make it a successful paradigm.
dogcomplex 4y ago
Tailwind's just a shorthand style for writing [a particular snapshotted older version of] CSS based on the theory that saving on keystrokes is worth more than understandable naming. It then leverages this brevity to let people over-define styles directly in the HTML, which would otherwise take paragraphs of normal CSS and therefore be unwieldy to do (so you'd just alias it into a new CSS property in a separate file). That's about it. While brevity is a nice feature, and we should always strive to make the dev experience as elegant and simple as possible, methinks Tailwind is just asking to become yet another dead-end standard which I very much hope has a standardized compiler back to vanilla CSS. (Does it not?)
- danielvaughn 4y ago
  Tailwind is neither a DSL nor is it any kind of standard. It's literally just utility classes. The "compiler" is really just tree-shaking. I feel like I'm taking crazy pills.
  - jaredcwhite 4y ago
    Tailwind stopped being "just utility classes" a long time ago and it's really become its own language with TW-specific terminology. https://tailwindcss.com/docs/adding-custom-styles https://tailwindcss.com/docs/adding-custom-styles https://tailwindcss.com/docs/hover-focus-and-other-states https://tailwindcss.com/docs/hover-focus-and-other-states
  - dogcomplex 4y ago
    I hope you're right, and it's always easy to automatically replace Tailwind with vanilla CSS, but I'm not so sure anymore
- bastawhiz 4y ago
  > Tailwind's just a shorthand style for writing [a particular snapshotted older version of] CSS based on the theory that saving on keystrokes is worth more than understandable naming. Tailwind takes the "cascading" and "sheets" out of CSS. Instead of describing what types of things look like, it forces you to describe how each individual instance of everything looks. Which is a valid thing to do, but it's absolutely not a parallel track to the purpose and paradigm of vanilla CSS.
Chris_Newton 4y ago
Scaleable CSS should adhere to the actual spec of CSS and how its evolving in browsers. The more experienced I get, the more strongly I agree with this sentiment. Modern CSS provides numerous features to solve real-world problems, from building practically useful layouts and effects to organising and efficiently representing the style rules for large and complicated sites and applications. These features enjoy broad support in browsers, so unless you’re among the unlucky few who really do still need to support legacy browsers like IE or early versions of iOS Safari, you can probably use them as-is without any special tools or heavyweight build processes. One genuine, qualitative improvement I’ve seen in modern tools is CSS modules. Those let you tidily avoid the old namespacing problems for styles used locally, while still having global styling available for your overall design system, colour scheme, typography, etc. That’s often useful, and as far as I know it can’t yet be done with widely-supported native CSS alone. If you stick to native CSS and maybe some light tooling like CSS modules, SASS and/or PostCSS, you can work with negligible lock-in, excellent portability and longevity in all the code you write, and access to the full power and flexibility that CSS offers both now and in the future. That means everything you do is effectively scalable by default.

alehlopeh 4y ago

The conclusion I took from the article was that CSS simply isn’t scalable. I’ve been hearing about web components for years and nothing seems to have materialized. I’ve never built something where I thought to even use shadow DOM. Tailwind is the only solution that meets the stated aims. If tailwind doesn’t adhere to the dogma for how CSS should work in principle, well that’s a lovely problem to have.

weo3dev 4y ago
"Nothing seems to have materialized..." --> https://nordhealth.design/ https://nordhealth.design/ -- these are all custom components. And here is D. Darnes explaining in part how they get things done: https://web.dev/custom-properties-web-components/ https://web.dev/custom-properties-web-components/ CSS is scalable. You have to actually know CSS in order to accomplish it. I've been here since mid-90s, when CSS first existed. It isn't until the past four or five years that things have really blossomed into (imho) what it should have been from the outset. Unfortunately, since we have had to use filler tools for things like layout (tables, hacked flexbox for grid), CSS itself has taken a beating in perceived usefulness/weildability. I believe because of THAT, fewer and fewer people have decided to actually learn CSS. CSS is a robust language. It is programmable. It is scalable. You just have to learn it, practice it, and approach problem solving from the top down, bottom up, and sometimes sideways. :-)
- Fire-Dragon-DoL 4y ago
  Well, CSS have enough problems to probably suggest it failed. It can work, but it failed for massive amount of people, it doesn't make it a successful paradigm.

dogcomplex 4y ago

Tailwind's just a shorthand style for writing [a particular snapshotted older version of] CSS based on the theory that saving on keystrokes is worth more than understandable naming. It then leverages this brevity to let people over-define styles directly in the HTML, which would otherwise take paragraphs of normal CSS and therefore be unwieldy to do (so you'd just alias it into a new CSS property in a separate file). That's about it. While brevity is a nice feature, and we should always strive to make the dev experience as elegant and simple as possible, methinks Tailwind is just asking to become yet another dead-end standard which I very much hope has a standardized compiler back to vanilla CSS. (Does it not?)

danielvaughn 4y ago
Tailwind is neither a DSL nor is it any kind of standard. It's literally just utility classes. The "compiler" is really just tree-shaking. I feel like I'm taking crazy pills.
- jaredcwhite 4y ago
  Tailwind stopped being "just utility classes" a long time ago and it's really become its own language with TW-specific terminology. https://tailwindcss.com/docs/adding-custom-styles https://tailwindcss.com/docs/adding-custom-styles https://tailwindcss.com/docs/hover-focus-and-other-states https://tailwindcss.com/docs/hover-focus-and-other-states
- dogcomplex 4y ago
  I hope you're right, and it's always easy to automatically replace Tailwind with vanilla CSS, but I'm not so sure anymore
bastawhiz 4y ago
> Tailwind's just a shorthand style for writing [a particular snapshotted older version of] CSS based on the theory that saving on keystrokes is worth more than understandable naming. Tailwind takes the "cascading" and "sheets" out of CSS. Instead of describing what types of things look like, it forces you to describe how each individual instance of everything looks. Which is a valid thing to do, but it's absolutely not a parallel track to the purpose and paradigm of vanilla CSS.

Chris_Newton 4y ago

Scaleable CSS should adhere to the actual spec of CSS and how its evolving in browsers. The more experienced I get, the more strongly I agree with this sentiment. Modern CSS provides numerous features to solve real-world problems, from building practically useful layouts and effects to organising and efficiently representing the style rules for large and complicated sites and applications. These features enjoy broad support in browsers, so unless you’re among the unlucky few who really do still need to support legacy browsers like IE or early versions of iOS Safari, you can probably use them as-is without any special tools or heavyweight build processes. One genuine, qualitative improvement I’ve seen in modern tools is CSS modules. Those let you tidily avoid the old namespacing problems for styles used locally, while still having global styling available for your overall design system, colour scheme, typography, etc. That’s often useful, and as far as I know it can’t yet be done with widely-supported native CSS alone. If you stick to native CSS and maybe some light tooling like CSS modules, SASS and/or PostCSS, you can work with negligible lock-in, excellent portability and longevity in all the code you write, and access to the full power and flexibility that CSS offers both now and in the future. That means everything you do is effectively scalable by default.