Switching to Tailwind CSS

This birb is basically me.

This blog was initaly using Chakra UI. But, i found some issues about FODT(Flashing of the Dark Theme) and they have not solved this issues yet.

After reading this tweet from mas odi i decided to migrate this blog to Tailwind CSS and it was WORTH IT... it also reduce my bundlesize by almost half 🤯🤯 they was not lie about the way they optimizing for production.

They wasn't lie about this.

Snapshot of my blog using chakra-ui
https://wisesa-dev-git-v2-anvaqta.vercel.app/

What is Tailwind CSS anyway?

Tailwind is a Ultility-first CSS framework. Ultility-first meaning that they only give you ultility classes like flex or text-center so you need to build component by yourself. Compared to Component CSS/UI Framework like bootstrap where you have prebuilt component classes e.g btn btn-primary.

But in that way, tailwind can purge unused class where UI Framework still include unused class/code for production that makes your production build is bloated.

But if you don't wanna to write component by yourself? they also has their official UI Framework called Tailwind UI or you can find community driven component from Tailwind Component. They have ecosystem

There are another interesting feature like:

1. Dark mode
2. Responsive classes
3. It's a component driven ultility, it's a good for UI framework like react/vue
4. Optimized production build
5. They have official plugin ecosystem that will be helpful

I was CSS Framework user

Yes, I was tailwind v1 user but somehow i prefer to use bootstrap instead, because at that time bootstrap is more popular and i don't like the way you write ultility class, it's too long and i need to remember all ultility classes.

For example, To create button you just write btn btn-primary compared to tailwind you need to write something like this bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded. That time i have no idea what is UI Framework versus Ultility framework, so i think UI framework is more practical so i go with bootstrap.

But now everything has changed since I mostly develop website using React.js where you separate elements into component and i usually writing styles using css-in-js and i just realized that ultility css is super helpfull. Also I don't need to remember all ultility class because they have official VSCode Plugin, this is very helpful because i don't need to open the docs anymore.

VSCode tailwind autocomplete is 🔥.

Migration process

First thing first is doing some research how people use and configure tailwindcss. Some project that i contribute is using tailwindcss so i can use that as reference e.g. WargaBantuWarga.

After (at least) know how to setup with Next.js i begin the migration proccess and it was easy because Chakra UI have similiar concept with Tailwind and the documentation is realy good. So it was easy...

See (some of) my migration proccess here

Result

The look is pretty much same but without flashing issue 🔥🤯

and the lighthouse score is much better 🚀.

🚀🚀🚀

Overall bundle size.

Learn more about Core web Vitals here.

Conclusion

Chakra UI has the best DX(Developer Experience) so far, it has some issues as i mention earlier and i think the bundle size kinda bloated. Chakra is still good but i can't life with FODT issue, so i migrate to Tailwind css now and i am happy with the result.

Lastly, I just still learning Tailwind until this day and I still keep improving this blog. You can see my blog source code here, I am always open for sugestion and discussion so don't hesitate to contact with me.