3 ms·
"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 Tail
by dbbk 3y ago
"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 3y agoIt'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 3y agoStyled components are code. You could easily have a value from a central config rather than a string, like ${company.padding.px}.
- 9dev 3y agoSure. 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 3y agoWhat 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 3y agohey 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}; `