[dbbk]

"Less verbose" I guess by a few characters... at the expense that you're not writing real CSS rules. So you're having to translate every rule into whatever Tailwind's syntax is for the same thing.

[9dev]

It's not the same thing, though. Tailwind applies rules from your design system, not plain CSS values. Assuming you're updating your corporate design to use border-radius 2 vs 4 everywhere, with Tailwind it's a matter of reconfiguring your design system configuration; with styled components (and other approaches) you're going on a string hunt.

[onion2k]

Styled components are code. You could easily have a value from a central config rather than a string, like ${company.padding.px}.

[9dev]

Sure. But now you need to maintain both places, you must think of units, and all the edge cases the Tailwind code base already handles.

[dbbk]

What you're talking about is really a theming design system, which yes Tailwind does have out of the box and Styled Components does not. But the companies I work in always have their own in-house design system, which means you have to maintain it yourself no matter what.

[bernawil]

hey no need to make this an hypothetical! styled components come with ThemeProvider that does just that.

  const StyledButton = styled.button`
    background-color: ${props => props.theme.primaryColor};
  `