Why I moved from styled-components to Tailwind CSS and what's the future of CSS-in-JS?
10 min read
const Button = styled.button` color: grey; background-color: white; `;
The API is so convenient that other CSS-in-JS solutions have decided to follow the same pattern (e.g., Emotion), and it became almost the de-facto for standard.
Tailwind CSS is an open-source utility-first CSS framework. Utility-first means that we combine a primitive set of CSS classes to create our desired style instead of semantic styling, where every component or HTML element gets a class name that then contains the style. Tailwind CSS also follows the Atomic CSS methodology. In Atomic CSS, every class sets only one styling rule. This way classes are reused more often, which results in a smaller bundle size (in most cases) and they also don't clash with each other. There are some exceptions where a Tailwind class can set multiple rules, but it's usually not the case.
Here's an example of how it looks like:
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"> <div class="flex-shrink-0"> <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo"> </div> <div> <div class="text-xl font-medium text-black">ChitChat</div> <p class="text-gray-500">You have a new message!</p> </div> </div>
The example is taken from the official documentation. You can see that there is no CSS code here, just classes all over. These classes are bundled with Tailwind CSS.
At its essence Tailwind CSS is a PostCSS plugin, but you can use it with SASS, less, or any other CSS processor you like.
Why I chose styled-components?
For me, Tailwind CSS at the time looked too verbose. Like it would fill my HTML with long class names that will affect the readability of my code. Another thing is that I didn't want to learn Tailwind classes which felt like a new API or language to write my styles.
Eventually, the DX had the upper hand, and I started to roll out with styled-components.
What made me look back at Tailwind CSS?
Performance is an important factor in every web application. It's a coherent part of user experience and may affect conversion rate, retention, and other metrics. Using PageSpeed Insights and Lighthouse, I constantly measure the performance of my application. When I released the feed page to production, I measured its performance again and was shocked to see the score of 75 on mobile.
Many of you might think that I could achieve the same performance with styled-components with a little optimization. And it might be true, but to think that I have to constantly monitor how I write my styles which is a fundamental aspect of web development, is honestly frightening. Using dynamic properties is one of the performance bottlenecks in styled-components and other CSS-in-JS solutions, and it's so tempting to use it!
When it comes to styling, I realized that it's better to use the platform and stick to CSS. For my use case, I decided to combine Tailwind CSS with CSS modules to create a more flexible framework rather than using only utility classes. React supports CSS modules out-of-the-box and so does Nextjs so it's a piece of cake to make it work together.
The future of CSS-in-JS
That's it! If you have any questions feel free to reach out on social media.