Switching to Tailwind CSS

Previously, this blog was built using Chakra UI. But it turns out to be quite heavy for users with slow internet connections and has some server-side rendering issues.

Finally, I decided to try Tailwind CSS because the utility CSS classes (or atomic CSS) have gotten my attention since the last semester.

And ooh-boy... it has a nice developer experience and the performance is just blazingly fast.

First Impression

First of all, I have absolutely no experience with utility CSS classes (or atomic CSS). I only have experience with UI component libraries, which have anything in store for me. Like, Button, Card, Dropdown, components are provided and ready to use.

Even in the beginning, I did not feel like learning Tailwind CSS, because, in my opinion, it was too complex and complicated. For every component I need, I should make it on my own. "It would be a very tiring thing", I thought.

But because I have spare time, I decided to try it.

Idea → Code

The first thing people always say to me about Tailwind CSS is how easy it is to pour the styling ideas we have in our head into the code. And after I gave it a try, it turned out to be true but with conditions.

We must be familiar with Tailwind CSS utility class names. For example, if we want to center everything inside a div using flex in vanilla CSS, we write it like this:

display: flex;
align-items: center;
justify-content: center;

But in Tailwind CSS, we write it like this:

<div className="flex items-center justify-center">

At first, I was a little confused. Because it turns out that some class names are quite different from the original properties in vanilla CSS. But apparently, the documentation is very good and makes it easier for me to find the class names that I need.

Performance

The second thing is the performance. Because Tailwind CSS uses a library called PurgeCSS that can remove unused styles. That way, the compiled CSS size becomes tiny and friendly to the users with slow connections.

How to make the PurgeCSS work is simple. Just add a purge property to tailwind.config.js. For example:

// tailwind.config.js

/**
 * Fill the `purge` property with all of your working files that use
 * Tailwind CSS.
 */
module.exports = {
  purge: [
    './**/*.html', // For HTML
    './**/*.vue', // For Vue
    './**/*.jsx', // For React / Vue that uses JSX
    './**/*.js' // For React
  ],
  theme: {},
  variants: {},
  plugins: [],
}

The performance benefit is not only on the production builds but also on the development builds. Thanks to Tailwind CSS’ just-in-time (JIT) feature.

So just-in-time feature is a new compiler that generates styles on-demand as we author our templates instead of generating everything in advance at the initial build time. So initial development builds time becomes noticeably faster.

With the just-in-time feature, I could also generate arbitrary styles without writing custom CSS. For example, I need a custom margin-left for my card component:

/* I don't need to write like this anymore: */
<Card className="..." style={{ marginLeft: 10 }} />

/* I write this instead: */
<Card className="ml-[10px]" />

We can use Tailwind CSS just-in-time feature by adding a mode key to the tailwind.config.js like this:

// tailwind.config.js
module.exports = {
  mode: 'jit',
  // ... the rest of the config
}

To know more about the just-in-time feature, read here.

Lighthouse Metrics

Previously, when this blog still uses Chakra UI, the Lighthouse metrics performance score was only around 80. Although it is quite good, the score is categorized as yellow color, which means it could be improved.

And now, after using Tailwind CSS, the score went up drastically, even almost a perfect score, when tested for the first time in Chrome browser using incognito mode.

After that, I tried to run the test again via the web.dev to see if the results given by the Chrome incognito mode were accurate or not. And it turns out that the results are quite surprising because they are quite similar to the previous Chrome incognito mode results.

Conclusion

With that result, I am very happy that I tried Tailwind CSS and I like it. 😍

Although I think, Tailwind CSS is only suitable for me when I am working on small-scale projects. Because in my day-to-day work, I am required to work fast with tight deadlines. But Tailwind CSS can not help me with that. I should make all of the components by myself, which requires a lot of time and effort.

I once thought of creating a UI component library for myself using Tailwind CSS. But because I haven't had time to learn and find out more about how to make a design system or even a UI component library, I am still only thinking about it.

Last but not least, I am still learning about Tailwind CSS until this day. If you want to chat or you have more knowledge about Tailwind CSS that I don't know yet, let me know by hitting me up on Twitter!

Thanks for reading, stay safe and have a nice day. 😁