These are the reasons why I believe using tailwindcss is better than using styled-components:
I don't need to name things especially classnames (
.welcome .mention) and components (
DivStyled) every time I want to add styles.
- I don't need to search for the styles. It is colocated to the HTML/JSX so I can the see that the div has a border black of 1px, it's explicit. And if there are too many utility classes, I can just store them in a variable.
I don't need to maintain CSS declarations. If I remove the element with the classname
.mention, I will have not forget to remove the styles I declared in
.mentionstyles are declared below but what if it is declared in the parent element that is in another file?
I don't need to create a design system, tailwindcss has amazing default settings (spacings, colors, etc.). If I have to use my own custom design system, I'll just have to declare it in
tailwind.config.jsand I'll use as if it's normal (check out this video: https://youtu.be/cZc4Jn5nK3k)
It urges me to use coherent spacings. I won't do any pixel perfect integration because I'll have to use
text-xl(20px), etc. And if I ever need to be precise then I'll use arbitrary styles