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:
- 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!
- You do not need to know CSS to use TailwindCSS.
- 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>
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>
);
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>
);
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>
</>
);
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>
);
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://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! 👇
Top comments (33)
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.
It took me about 30 minutes to learn Tailwind so I wouldn't say it's a waste of time. on the contrary, it saves me alot of time when I make small projects compared to regular styling.
as for styled components, I don't see a big difference between that an inline styling so I'd skip it.
I like this comment, I think Tailwind is really helpful for big project but we just need take time to learn it
Thanks for the input! 🙏❤
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.
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.
Oooh, I'll take a look into those two at some point. Would you favour either of them against styled-components?
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.
You don't understand how well tailwind solves the maintainability problem, you don't understand that styled-components uses css in JS, for big projects with high render frequency even with code splitting you are going in the wrong direction with styled-components, same for MaterialUI, ChakraUI....You juste don't understand that using tailwind is like writing css files, and everyone know in terms of performance nothing beat pure css of course, there is absolutely 0 disadvantage using tailwind compared to all other css frameworks, simply because tailwind is css
Great comment, all valid points and I hope this can help people make their own informed decision further🙏🏻
What ??
Tailwind comes with a number of disadvantages as mentioned in the post starting from readability when stylings for a basic component increases where you'd end up having more classes. You are NOT using vanilla css btw, its a library, which has to do something in order to convert your classes to actual styles.
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.
be aware with styled components I had huge performance problems with css in js I thought it would not matter for my personal projects but even there I had really poor performance for mobile devices
Hello! I am a front-end fan, I come from China. I just read your article and feel it's very good. You analyzed the styled component and tailwindcss rationally. Can I translate your article into Chinese and put it on the Chinese blog website
Of course you can!
My personal opinion is that Tailwind is overhyped. Software engineers started polluting HTML with a mass of CSS classes. Example:
flex border w-full dark:border-matteGray rounded-2xl h-[80vh] border-lightGray overflow-hiddenWhich not only increases HTML size but also makes it very hard to understand what follows.
Compare with:
Not to mention that there have already been preprocessors like Sass for years, and even CSS is evolving with variables and the like.
Then you will have the following HTML:
It will be a long time before software engineers realize that using dozens of CSS classes leads to a jungle in which everyone will spend more time analyzing what the code does and what the author intended.
You didn't talk about the page performances on using tailwind and styled-components.
Even if you are following atomic design, for an atom, say a button, if it involves complex animation and styles there is no way to avoid having more classes imo.
Like, say if you are making this button atom reusable and want to use some additional stylings/change stylings for the same button component, how would you go about it without adding more classes OR without using css in js via props as in SC ??
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!
👍
Like both as they can be integrated with one another using tailwind macro.
Tailwind Macro!? What is that?
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
+1, twin.macro blends both together and is IMHO a real nice library to combine with Tailwind in React apps!