8 ms·

I’ve found what you said to be completely untrue unless you’re totally lazy. If you’re building up a bunch of components, the tailwind classes are mainly within

I’ve found what you said to be completely untrue unless you’re totally lazy. If you’re building up a bunch of components, the tailwind classes are mainly within the basic components. In the first example of vanilla extract, it uses exact px measurements which already demonstrates it’s not geared to solve one of the primary selling points of tailwind (using config as a constraint to reduce mental overhead when building things).

satvikpendem 4y ago
And have you had to work on hundreds of components that you had to refactor before? It's a write only language. > I’ve found what you said to be completely untrue unless you’re totally lazy. Ah yes, the laziness argument. Let's not blame our tools but ourselves for the tools are always good and righteous. If only those darn C programmers weren't so lazy writing their memory leaks.
- antihero 4y ago
  I have, yes. It’s fine and no more annoying than css, styled or whatever else. If anything it’s easier because there’s consistent and constrained bunch of classes you can use.
  - satvikpendem 4y ago
    Then just use CSS at that point, since the classes literally just map onto CSS properties anyway (and sometimes not even, since they have to spend time to make new, or even older, rules work). That's what I don't get about Tailwind, at its best it's as good as CSS, but oftentimes stuff like SCSS, CSS-in-TS etc are simply better.
    - dmitriid 4y ago
      > Then just use CSS at that point, since the classes literally just map onto CSS properties anyway CSS is definitely a write-only language. I've yet to see anyone understand CSS in a large system and refactor it. You end up with dozens and hundreds one-off classes and overrides everywhere.
      - satvikpendem 4y ago
        So, the same as Tailwind then? That's also why I'd consider Tailwind a write only language, except with CSS you at least have the chance of organizing it properly.
        dmitriid 4y ago
        > So, the same as Tailwind then? Worse. With Tailwind you have a consistent set of classes scoped usually per component. Thos p-x, m-x, and others don't change from component to component or from project to project. Hell if I know what `.chip-text__content` is, how it's different from `.icon-button__content`, why it interferes with my CSS, and what other 15 CSS classes I need on top of that to make it work.
        satvikpendem 4y ago
        I think there is a disconnect between what I'm talking about regarding CSS and what everyone else is. Yes, BEM and global styling is unmaintainable, I agree with you there. However these days even with Tailwind their approach is to componentize. In the same way, I can just use CSS modules with no global styles and get the same benefits of scoped styling like Tailwind provides without having something else break as a result of what I use in the current component. However, if you're using HTML without a JS framework, Tailwind can be superior to BEM and global styles, but still not as much as CSS modules, CSS-in-TS, and the like, due to maintainability concerns.
        dmitriid 4y ago
        > However, if you're using HTML without a JS framework, Tailwind can be superior to BEM and global styles, but still not as much as CSS modules, CSS-in-TS, and the like, due to maintainability concerns. How are you going to maintain consistent values across components such as spacing colors etc? Those tend to grow to the size of Tailwind
        satvikpendem 4y ago
- siquick 4y ago
  > And have you had to work on hundreds of components that you had to refactor before? It's a write only language. Once you know the syntax of Tailwind you can jump into any codebase and instantly know what’s going on. With “standard” CSS you’re forever jumping between components and class definitions.
  - satvikpendem 4y ago
    Once you know the syntax of CSS properties you can jump into any codebase and instantly know what’s going on. With Tailwind you’re forever jumping between components and figuring out what that one long line of class names is actually doing.
    - notpushkin 4y ago
      Yeah, Tailwind feels like Bash for CSS: save a few keystrokes here and there, at the cost of readability. The problem is, everybody already knows Bash. Tailwind? Not so much.
      - NayamAmarshe 4y ago
        > everybody already knows Bash Highly doubt it. > at the cost of readability. You mean the readability of "p-2 bg-red-500 text-lg font-medium" or "i-dont-remember-what-this-class-does"? I'd argue the readability in Tailwind is better. Tailwind is highly indicative of what it does and doesn't waste time when it comes to consistency. The only real argument is that it adds extra length to the class attribute, but then again, it doesn't cause issues like finding the same class in 50 different CSS files or not having any auto-completion.
        bavila 4y ago
        > You mean the readability of "p-2 bg-red-500 text-lg font-medium" or "i-dont-remember-what-this-class-does" No, I'm pretty sure he means the readability of "absolute bottom-0 text-sm md:text-base text-white leading-relaxed tracking-tighter transition-all duration-300 ease-in-out m-3 md:m-4 px-6 md:px-8 py-4 md:py-6 opacity-0 w-full", as opposed to a single well-named class such as "image-caption".
- infinitezest 4y ago
  To quote you from another thread in this discussion: > I've often found that people who are in the frontend don't properly learn CSS and just hack it together. That was me too for a long while which is why I hated it. Then I started learning it from first principles and it makes a lot of sense. Now I can build whatever I need in plain CSS classes. So sometimes people just... misunderstand or use the tool wrong?
  - satvikpendem 4y ago
    If you look at my later comments, you will see that I don't equivocate all tools.

satvikpendem 4y ago

And have you had to work on hundreds of components that you had to refactor before? It's a write only language. > I’ve found what you said to be completely untrue unless you’re totally lazy. Ah yes, the laziness argument. Let's not blame our tools but ourselves for the tools are always good and righteous. If only those darn C programmers weren't so lazy writing their memory leaks.

antihero 4y ago
I have, yes. It’s fine and no more annoying than css, styled or whatever else. If anything it’s easier because there’s consistent and constrained bunch of classes you can use.
- satvikpendem 4y ago
  Then just use CSS at that point, since the classes literally just map onto CSS properties anyway (and sometimes not even, since they have to spend time to make new, or even older, rules work). That's what I don't get about Tailwind, at its best it's as good as CSS, but oftentimes stuff like SCSS, CSS-in-TS etc are simply better.
  - dmitriid 4y ago
    > Then just use CSS at that point, since the classes literally just map onto CSS properties anyway CSS is definitely a write-only language. I've yet to see anyone understand CSS in a large system and refactor it. You end up with dozens and hundreds one-off classes and overrides everywhere.
    - satvikpendem 4y ago
      So, the same as Tailwind then? That's also why I'd consider Tailwind a write only language, except with CSS you at least have the chance of organizing it properly.
      - dmitriid 4y ago
        > So, the same as Tailwind then? Worse. With Tailwind you have a consistent set of classes scoped usually per component. Thos p-x, m-x, and others don't change from component to component or from project to project. Hell if I know what `.chip-text__content` is, how it's different from `.icon-button__content`, why it interferes with my CSS, and what other 15 CSS classes I need on top of that to make it work.
        satvikpendem 4y ago
        I think there is a disconnect between what I'm talking about regarding CSS and what everyone else is. Yes, BEM and global styling is unmaintainable, I agree with you there. However these days even with Tailwind their approach is to componentize. In the same way, I can just use CSS modules with no global styles and get the same benefits of scoped styling like Tailwind provides without having something else break as a result of what I use in the current component. However, if you're using HTML without a JS framework, Tailwind can be superior to BEM and global styles, but still not as much as CSS modules, CSS-in-TS, and the like, due to maintainability concerns.
        dmitriid 4y ago
        > However, if you're using HTML without a JS framework, Tailwind can be superior to BEM and global styles, but still not as much as CSS modules, CSS-in-TS, and the like, due to maintainability concerns. How are you going to maintain consistent values across components such as spacing colors etc? Those tend to grow to the size of Tailwind
        satvikpendem 4y ago
siquick 4y ago
> And have you had to work on hundreds of components that you had to refactor before? It's a write only language. Once you know the syntax of Tailwind you can jump into any codebase and instantly know what’s going on. With “standard” CSS you’re forever jumping between components and class definitions.
- satvikpendem 4y ago
  Once you know the syntax of CSS properties you can jump into any codebase and instantly know what’s going on. With Tailwind you’re forever jumping between components and figuring out what that one long line of class names is actually doing.
  - notpushkin 4y ago
    Yeah, Tailwind feels like Bash for CSS: save a few keystrokes here and there, at the cost of readability. The problem is, everybody already knows Bash. Tailwind? Not so much.
    - NayamAmarshe 4y ago
      > everybody already knows Bash Highly doubt it. > at the cost of readability. You mean the readability of "p-2 bg-red-500 text-lg font-medium" or "i-dont-remember-what-this-class-does"? I'd argue the readability in Tailwind is better. Tailwind is highly indicative of what it does and doesn't waste time when it comes to consistency. The only real argument is that it adds extra length to the class attribute, but then again, it doesn't cause issues like finding the same class in 50 different CSS files or not having any auto-completion.
      - bavila 4y ago
        > You mean the readability of "p-2 bg-red-500 text-lg font-medium" or "i-dont-remember-what-this-class-does" No, I'm pretty sure he means the readability of "absolute bottom-0 text-sm md:text-base text-white leading-relaxed tracking-tighter transition-all duration-300 ease-in-out m-3 md:m-4 px-6 md:px-8 py-4 md:py-6 opacity-0 w-full", as opposed to a single well-named class such as "image-caption".
infinitezest 4y ago
To quote you from another thread in this discussion: > I've often found that people who are in the frontend don't properly learn CSS and just hack it together. That was me too for a long while which is why I hated it. Then I started learning it from first principles and it makes a lot of sense. Now I can build whatever I need in plain CSS classes. So sometimes people just... misunderstand or use the tool wrong?
- satvikpendem 4y ago
  If you look at my later comments, you will see that I don't equivocate all tools.