DEV Community

loading...
Cover image for TailwindCSS vs Styled-Components in ReactJs

TailwindCSS vs Styled-Components in ReactJs

willholmes profile image Will Holmes ・5 min read

A few days ago I posted a new blog post in which I detailed my experience with styled-components, and how it was a nice way of incorporating dynamic styling into the js domain staying away from CSS files. I later found out about yet another way to incorporate styling into your applications... that was TailwindCSS.

I had seen some conversation around this before as well as a lot of videos and posts mentioning TailwindCSS but thought nothing more of it. So seeing as I had been told of it again and also wanted to try it out so I could compare my experiences. I decided to build a website utilizing Tailwind for styling.

What should I know as basics?

To get you started and to understand this read it's important to know that:

  1. TailwindCSS is a package full of pre-built classes to style your components however, they are so flexible that you can do anything with them!
  2. You do not need to know CSS to use TailwindCSS.
  3. TailwindCSS uses a lot of abbreviations i.e. (pb is padding-bottom), so it's important that you read the documentation and use its search function if you are ever unsure.

Tailwind... more like bootstrap!?

I have to say my initial impressions of Tailwind are positive. It takes a lot of the semantics of bootstrap and has almost extended them so much that you never have to use media queries in direct CSS to toggle differences in styling. Instead, you would do something like the below:


<div class="pb-10 sm:pb-12 md:pb-8 lg:pb-4">
    Hello world
</div>
Enter fullscreen mode Exit fullscreen mode

To those who have used styling frameworks before such as Material UI, Bootstrap, etc. You will understand the usages of these different media breakpoints (sm, md, lg, etc.). These are essentially saying 'When my device size is lower than small apply a padding-bottom of 10. When my device size is small (sm) or greater apply a padding-bottom of 12. When my device size is medium (md) or greater apply a padding-bottom of 8. When my device size is large (lg) or greater apply a padding-bottom of 4'. I must say, it took me a while to really understand the technique of saying there is no 'xs' breakpoint which is what you would typically find in bootstrap for example. Simply that any device which is lower than sm inherits tailwind classes without a media breakpoint like the above 'pb-10'.

But hang on... that looks like a lot of classes?

That's true and it's something that did put a bit of a dampener on my view of the framework. With having so many utility classes being added on to each element it's very easy to end up with huge class property values. This can easily cause things like useless classes remaining on elements that aren't necessarily needed etc. A good package to use is the classNames package that will combine class names together. Allowing you to format your elements a little cleaner.

How does TailwindCSS compare to styled-components?

Something I really liked about styled-components, was how simple it made your components look. Being able to create a styled div and reference it like:

const Wrapper = styled.div`
padding-bottom: 10px;
@media (min-width: 768px) {
    padding-bottom: 20px;
}
`;

const TestComponent = () => (
    <Wrapper>
        Hello world!
    </Wrapper>
);
Enter fullscreen mode Exit fullscreen mode

This to me, keeps component code so clean and concise allowing the components to focus on logic and not looks. You could even go one step further, and abstract your stylings out to a separate js file within your component domain. However, let's see what this looks like in TailwindCSS:

const TestComponent = () => (
    <div className="pb-10 md:pb-20">
        Hello World!
    </div>
);
Enter fullscreen mode Exit fullscreen mode

As you can see here, TailwindCSS actually reduces the number of lines of code we have to write to achieve the same goal. This is its whole intention with the utility class approach. It really does simplify writing styled elements. However, this is all well and good for our elements with only a few styles. Let's take a look at the comparisons of more heavily styled components:

styled-components

const Button = styled.button`
    font-size: 1rem;
    margin: 1rem;
    padding: 1rem 1rem;
    @media (min-width: 768px) {
        padding: 2rem 2rem;
    }
    border-radius: 0.25rem;
    border: 2px solid blue;
    background-color: blue;
    color: white;
`;

const TestComponent = () => (
    <>
        <Button>
            Hello world!
        </Button>
    </>
);
Enter fullscreen mode Exit fullscreen mode

TailwindCSS

const TestComponent = () => (
    <div className="text-base mg-1 pt-1 pr-1 md:pt-2 md:pr-2 rounded border-solid border-2 border-light-blue-500 bg-blue-500 text-white-500">
        Hello World!
    </div>
);
Enter fullscreen mode Exit fullscreen mode

As you can see from the above comparisons, styled-components really does take the lead now as our component has grown in styling rules. Tailwind's implementation is so verbose in classNames and without using a package like classNames it really makes our lines a lot longer than they should be. This is one of the biggest downfalls for Tailwind in my opinion.

Especially if you are working on a project with multiple developers, the styled-components approach allows you to easily read what stylings the Button component has. In comparison to the Tailwind approach, you would most likely have to lookup in the docs some of those util classes to understand precise values.

Compare this example to the first example. Tailwind just screamed simplicity. This follow up example just consists of complexity and a high risk of spaghetti code. It only takes multiple developers to be working on a few components at the same time for styles to be easily ruined/disrupted and then spending time removing certain util classes to find out the root cause. In comparison to the styled-components way of doing things where we still rely on our raw CSS changes it is a lot easier to manage change in my opinion.

So, who takes home the trophy?

Well... to be honest, I wouldn't say either of these two trumps each other. Both have their benefits and disadvantages which have been demonstrated in this article. I'd say if you are looking for a quick way to style a website or single pager with not much complexity; then TailwindCSS might be best for you. Mainly due to the amount of utility you get out of the box to style your classes. However, if you are looking for a longer-term project that can be more easily maintained. I would advise styled-components due to their more 'robust' feel to it when maintaining styles in my opinion. However, I am not an expert in either of them, I have simply just been building in both of these technologies and these are my initial thoughts.

Useful Resources:

TailwindCSS:

https://tailwindcss.com/

https://www.tailwindtoolbox.com/

https://tailwindcomponents.com/

Styled-Components

https://styled-components.com/

Thank you for reading, let me know in the comments below if you have used either of these or maybe both and how you found using them! 👇

Discussion (17)

pic
Editor guide
Collapse
madza profile image
Madza

Neither for me. Tho if I have to choose, I would go for styled-components.
The reason being, Tailwind is like an entirely new tool, nothing common with CSS syntax. And knowing how frequently frameworks come and go, I am not sure it's worth investing time in learning something as specific as Tailwind.

Collapse
willholmes profile image
Will Holmes Author

Agreed! I think Tailwind solves a specific problem and solves it well. But it doesn't solve all the other problems very well. Personally, I feel it's always more beneficial to know how things work under the hood. Having to write CSS still enforces that practice whereas Tailwind doesn't.

Collapse
madza profile image
Madza

Currently, my favs are CSS modules or Styled JSX, depending on whether I want to style outside or inside of the component, respectively. Both are scoped and support bare CSS, which I love.

Thread Thread
willholmes profile image
Will Holmes Author

Oooh, I'll take a look into those two at some point. Would you favour either of them against styled-components?

Thread Thread
madza profile image
Madza

I like CSS modules or Styled JSX as both work well with NextJS, which I work with daily. Both have built-in support, meaning I don't have to worry about configuring anything.

I prefer Styled JSX over SC, as it is more close to bare CSS, and CSS modules are not CSS-in-JS solution, so it would not be fair to compare them with SC.

If you are looking for other alternatives, I would suggest looking into Svelte. It allows us to write CSS in style tags, while still working with components. A 'back-to-basics' approach, I really like.

Collapse
plong0 profile image
Pat Long

Thanks for this write-up! Nice comparison of where TailwindCSS or Style-Components might be a better option. Our team is in the early stages of a big front-end project, so choosing the right approach to styling is a key concern and your article has really added some clarity to the decision.

Collapse
almarrr profile image
Almar Groenewald

I'm using a combination, works like a charm!

Collapse
willholmes profile image
Will Holmes Author

What was your use case for using a combination of both of them?

Collapse
almarrr profile image
Almar Groenewald

There are times when I need animations and other complex stuff which isn’t in Tailwind. Then I like the styled component syntax for hovers etc. Also it improves the readability of my code, like Is very clear. And I also can add class names to it from tailwind.

Thread Thread
willholmes profile image
Will Holmes Author

Ahhhh I like that! Throughout building my Tailwind app I've noticed the lack of animations and have had to resort to CSS. But never thought to combine the two! I like the approach!

Collapse
alamin__yusuf profile image
Al-amin Yusuf

Like both as they can be integrated with one another using tailwind macro.

Collapse
willholmes profile image
Will Holmes Author

Tailwind Macro!? What is that?

Collapse
alamin__yusuf profile image
Al-amin Yusuf

Sorry, Twin.macro I didn't even realized I typed it wrong. It a NPM pakage that gives developers the power to blend in tailwind css and styled components as well.
Check out the docs

npmjs.com/package/twin.macro

Thread Thread
dsebastien profile image
SĂ©bastien D.

+1, twin.macro blends both together and is IMHO a real nice library to combine with Tailwind in React apps!

Collapse
golangch profile image
Stefan Wuthrich

if you choose to go with TailwindCSS and React, checkout my boilerplate:
github.com/altafino/react-webpack-...

Collapse
willholmes profile image
Will Holmes Author

Nice one! Looks good

Collapse
andysaktia profile image
andysaktia

👍