Why I prefer tailwindcss over styled-components?

#react #tailwindcss #css #javascript

On the left with styled-components and on the right the same code using tailwindcss.

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 DivStyled. Here .mention styles 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.js and 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-lg (18px), text-xl (20px), etc. And if I ever need to be precise then I'll use arbitrary styles

Top comments (4)

codingjlu • Jan 26 '22 • Edited

Well, I prefer styled-components because I like to keep my JSX (or HTML) clean :). Also, I can be more specific and add rather custom styles as I'm a slight CSS perfectionist that gets very annoyed at a slight uncompletement...

M. Akbar Nugroho • Jan 26 '22

I agree with you before I working with large design system. My company has its own design system and it pushes me and my team to develop the entire codebase to implement the design system.

I don't say tailwind not possible to do that, but I've tried using tailwind, configure and put all design system values into it. Take a long time, really.

So, me and my team do our research and we found styled-component is a perfect match for our project. We put all design system values and all of our codes can access the values from the theme context. It looks so natural with React and we have more control of the UI.

Since we follow component driven development, It also easier to integrate with storybook and publish our UI package to NPM.

Tayomide • Jan 25 '22

I feel the more I use tailwind the less it feels like CSS. But that's just me, I love seeing things get created while typing new codes and styled-components orders the code way better than even traditional CSS format.