Hacker News Reader

Comment by dbbk | Hacker News Reader

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

View on HN

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.

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

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.

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.

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};
  `

Reply on news.ycombinator.com