DEV Community

Tony Khaov
Tony Khaov

Posted on

Why I prefer tailwindcss over styled-components?

tailwindcss vs styled-components
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:

  1. I don't need to name things especially classnames (.welcome .mention) and components (DivStyled) every time I want to add styles.
  2. 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.
  3. 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?
  4. 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)
  5. 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

Discussion (4)

Collapse
codingjlu profile image
codingjlu • Edited on

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

Collapse
thexdev profile image
M. Akbar Nugroho

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.

Collapse
resistdesist profile image
Tayomide

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.

Collapse
rjsworking profile image
rjsworking

This is the way