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 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.
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.
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.
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.