3 ms·

Can someone explain the advantage of class="color-red" over style="color:red", that's the part that always confuses me.

stocknoob 2y ago
It’s an artfully constrained design system that reduces mental burden. The main benefit is what you aren’t doing: jumping between css files and html, naming class’s, trying to debug layers of cascading, wondering what other unrelated components will be impacted by a css rule change… Colors aren’t a great example because those should be set as css variables (dark mode right?). Think about padding: how many layers of margin/padding on parent wrappers is making things look strange? The best argument is just to try it though.
- gedy 2y ago
  > It’s an artfully constrained design system Have to disagree it's a design system - it's basically a theme. Consistent colors, fonts, borders, spacing is handy for sure - but Tailwind is not a great option if you expect to drop it in and have building block components, etc without a lot of work.
- spiffytech 2y ago
  And even for colors, the benefit is the consistent color scale. You've only got 10 shades of red, which are all visually distinct. You won't find slightly different RGB values all over your code base each time someone wanted red.
- andrei_says_ 2y ago
  The drawback is that you end up with an incomprehensible soup of classes on too many html elements, often redefining and redefining rules. If you work in a highly componentized scenario that’s probably convenient. You don’t have to name things as you would if you were to keep a separate css ruleset and then tie it to the html elements via naming. Very noisy compared to a disciplined, structured css though. But who has time for that.
MrJohz 2y ago
CSS as a language is different from the style attributes that you can insert into `style=`, mainly because it's a lot more powerful. You can do things like set a background colour on hover, or apply a style only to the first child element of a parent. None of that is possible with the style attribute. This is also the key difference between conventional CSS classes and Tailwind - it acts less like a set of predetermined classes, and more like a DSL for directly writing CSS inline in the "class" attribute. The result is arguably less reasonable than directly writing CSS, but on the other hand, it's a lot less boilerplate. In my experience, it really clicks if you write a lot of components, in which case you've already got a way to reuse your code, and so tailwind fits in really nicely with that. If you're mainly writing whole-page styling, then Tailwind usually results in a lot of repetition and doesn't produce much better results than writing everything in CSS in the first place.

It’s an artfully constrained design system that reduces mental burden. The main benefit is what you aren’t doing: jumping between css files and html, naming class’s, trying to debug layers of cascading, wondering what other unrelated components will be impacted by a css rule change… Colors aren’t a great example because those should be set as css variables (dark mode right?). Think about padding: how many layers of margin/padding on parent wrappers is making things look strange? The best argument is just to try it though.

gedy 2y ago
> It’s an artfully constrained design system Have to disagree it's a design system - it's basically a theme. Consistent colors, fonts, borders, spacing is handy for sure - but Tailwind is not a great option if you expect to drop it in and have building block components, etc without a lot of work.
spiffytech 2y ago
And even for colors, the benefit is the consistent color scale. You've only got 10 shades of red, which are all visually distinct. You won't find slightly different RGB values all over your code base each time someone wanted red.
andrei_says_ 2y ago
The drawback is that you end up with an incomprehensible soup of classes on too many html elements, often redefining and redefining rules. If you work in a highly componentized scenario that’s probably convenient. You don’t have to name things as you would if you were to keep a separate css ruleset and then tie it to the html elements via naming. Very noisy compared to a disciplined, structured css though. But who has time for that.

MrJohz 2y ago

CSS as a language is different from the style attributes that you can insert into `style=`, mainly because it's a lot more powerful. You can do things like set a background colour on hover, or apply a style only to the first child element of a parent. None of that is possible with the style attribute. This is also the key difference between conventional CSS classes and Tailwind - it acts less like a set of predetermined classes, and more like a DSL for directly writing CSS inline in the "class" attribute. The result is arguably less reasonable than directly writing CSS, but on the other hand, it's a lot less boilerplate. In my experience, it really clicks if you write a lot of components, in which case you've already got a way to reuse your code, and so tailwind fits in really nicely with that. If you're mainly writing whole-page styling, then Tailwind usually results in a lot of repetition and doesn't produce much better results than writing everything in CSS in the first place.