4 ms·

Tailwind is 100% an antipattern, spitting in the face of well-written CSS. It is essentially a crystallization of the 'utility class abuse' anti-pattern. There

by grose 4y ago

Tailwind is 100% an antipattern, spitting in the face of well-written CSS. It is essentially a crystallization of the 'utility class abuse' anti-pattern. There is already a well-defined way to write CSS inline, no need to obscure it with 'helpful' utility classes... right? In reality, I don't think that's necessarily a bad thing. When Rails came out, people ranted about how PHP was bad practices because it mixed display and business logic. Look at what the frontend has become now with React and Nuxt and the like, basically just PHP all over again. Is that bad? Well, people seem to like it, so I don't think so. In other words, I totally agree with this article but I've given up trying to make any sense out of the frontend world. Tailwind is for people who don't want to learn CSS[1], which seems like a frighteningly large amount of web devs. But, ultimately, that's OK. I will continue to happily ignore it. My hope is that will some CSS changes landing soon (in particular :has and nesting selectors) we will see more respect given to CSS as a declarative language for defining UI, instead of just some boilerplate to make your page look pretty. [1]: see replies below, this is wrong :). nisegami said it much better: Tailwind is for people who don't want to use CSS as it was intended. It's like a simplified execution model for it.

super256 4y ago
> Tailwind is for people who don't want to learn CSS I wholeheartedly disagree with this. You need to understand CSS to be able to use tailwind. Tailwind's class names are close (most of the time identical, even!) to the pure css equivalents. Furthermore, concepts like flex and grid need to be understood to produce what you want.
nisegami 4y ago
>Tailwind is for people who don't want to learn CSS This reveals a fundamental misunderstanding on your part about Tailwind. Tailwind classes map very directly onto CSS properties. You can't use Tailwind effectively without knowing about the corresponding CSS ideas (although you can be unaware of how exactly to apply them in pure CSS). Rather, tailwind is for people who don't want to _use_ CSS as it was intended to be used. Named classes and stylesheets just don't mesh with how my brain processes these things.
- grose 4y ago
  You (and super256) are right. You do need to understand CSS to use Tailwind well, which is more or less the point of this article. I should have probably said "it's for people who don't want to deal with cascading", but IMO cascading is CSS's most powerful property. I can see how it gets confusing though.
  - pcthrowaway 4y ago
    Cascading is also why CSS becomes so unmaintainable
    - grose 4y ago
      I think that's a fair take. Tailwind and css-in-js's popularity points to a mismatch between how people want to actually use CSS and how CSS was designed to be used. It looks like people want isolated components, not complex cascading hierarchies. I think that when :has becomes viable, we will open to the door to CSS-driven declarative UIs as opposed to imperative JS components, but this is pure speculation :-). I believe that a development style that takes advantage of cascading instead of fighting against it could perhaps become one of the new 'schools' of frontend development. I do not think it will become the most popular one, though.
gregors 4y ago
I felt the same way about bootstrap honestly. Quick, dirty and useful.
- grose 4y ago
  Exactly! I think a lot of people are reading my comment as a takedown of Tailwind but that was not the intention. My point is that these kind of quick and dirty tools that others may consider an anti-pattern can be extremely productive and useful, and even become the de-facto standard. Ultimately, what is and isn't an anti-pattern is just a cultural concept between developers (although it can certainly have its roots in hard facts).
naasking 4y ago
> There is already a well-defined way to write CSS inline, no need to obscure it with 'helpful' utility classes... right? Inline CSS doesn't support lots of CSS that is critically important, like media queries, pseudo selectors, etc. That's the big reason why inline CSS should generally be avoided. There's nothing intrinsically wrong with it otherwise. You're almost certainly using a templating language to generate your markup anyway, so if you're worried about the need to repeat common styles then factor out the common style declarations into shared variables in your template language. Yes, it's a way to avoid writing CSS, but look what it gets you: you've reduced the number of languages and files you have to manage and context switch between when developing. Typically this is programming language + template markup language + HTML + CSS + JS. Eliminating 20% of your cognitive overhead is nothing to sneeze at. You can add something like htmx and remove most of the JS too for a 40% reduction. Front-end development actually starts approaching something close to pleasant.

by grose 4y ago

super256 4y ago

> Tailwind is for people who don't want to learn CSS I wholeheartedly disagree with this. You need to understand CSS to be able to use tailwind. Tailwind's class names are close (most of the time identical, even!) to the pure css equivalents. Furthermore, concepts like flex and grid need to be understood to produce what you want.

nisegami 4y ago

>Tailwind is for people who don't want to learn CSS This reveals a fundamental misunderstanding on your part about Tailwind. Tailwind classes map very directly onto CSS properties. You can't use Tailwind effectively without knowing about the corresponding CSS ideas (although you can be unaware of how exactly to apply them in pure CSS). Rather, tailwind is for people who don't want to _use_ CSS as it was intended to be used. Named classes and stylesheets just don't mesh with how my brain processes these things.

grose 4y ago
You (and super256) are right. You do need to understand CSS to use Tailwind well, which is more or less the point of this article. I should have probably said "it's for people who don't want to deal with cascading", but IMO cascading is CSS's most powerful property. I can see how it gets confusing though.
- pcthrowaway 4y ago
  Cascading is also why CSS becomes so unmaintainable
  - grose 4y ago
    I think that's a fair take. Tailwind and css-in-js's popularity points to a mismatch between how people want to actually use CSS and how CSS was designed to be used. It looks like people want isolated components, not complex cascading hierarchies. I think that when :has becomes viable, we will open to the door to CSS-driven declarative UIs as opposed to imperative JS components, but this is pure speculation :-). I believe that a development style that takes advantage of cascading instead of fighting against it could perhaps become one of the new 'schools' of frontend development. I do not think it will become the most popular one, though.

gregors 4y ago

I felt the same way about bootstrap honestly. Quick, dirty and useful.

grose 4y ago
Exactly! I think a lot of people are reading my comment as a takedown of Tailwind but that was not the intention. My point is that these kind of quick and dirty tools that others may consider an anti-pattern can be extremely productive and useful, and even become the de-facto standard. Ultimately, what is and isn't an anti-pattern is just a cultural concept between developers (although it can certainly have its roots in hard facts).

naasking 4y ago

> There is already a well-defined way to write CSS inline, no need to obscure it with 'helpful' utility classes... right? Inline CSS doesn't support lots of CSS that is critically important, like media queries, pseudo selectors, etc. That's the big reason why inline CSS should generally be avoided. There's nothing intrinsically wrong with it otherwise. You're almost certainly using a templating language to generate your markup anyway, so if you're worried about the need to repeat common styles then factor out the common style declarations into shared variables in your template language. Yes, it's a way to avoid writing CSS, but look what it gets you: you've reduced the number of languages and files you have to manage and context switch between when developing. Typically this is programming language + template markup language + HTML + CSS + JS. Eliminating 20% of your cognitive overhead is nothing to sneeze at. You can add something like htmx and remove most of the JS too for a 40% reduction. Front-end development actually starts approaching something close to pleasant.