Migrating from Chakra UI to Tailwind CSS - My experience

#tailwindcss #chakraui #performance #javascript

My personal experience while migrating a Next.js app from Chakra UI and Framer Motion to Tailwind CSS and Headless UI.

Intro

I was very pleased by Chakra UI developer experience, feels like it combines the best of 2 worlds:

It has the benefits of a component library,
And a styling interface similar to Tailwind CSS.

But some time ago I stumbled with this issue that raised some concerns on Chakra UI bundle size. My first reaction was that it wasn’t really an issue, since I was coming from Material UI which felt a lot heavier. But then I started auditing my app with Lighthouse and noticed that my performace score could be improved, so then I decided to give Tailwind CSS a go with the idea of the benefits of a reduced JS bundle size.

Migration process

Branched of from master and completely removed Chakra UI alongside it’s peer dependencies (Emotion and Framer Motion)
Installed Tailwind CSS setup alongside Headless UI (mostly for it’s Transition component).
Refactored every page and component to delete any trace of Chakra UI and replaced everything with native HTML component and added all the required Tailwind UI className to maintain the same look and feel of the site.

The whole process took me a few weeks on my spare time, wasn’t particulary difficult (except for some of the animations, kudos to Framer Motion) but it was a bit tedious.

Benchmarks

For performance benchmarking I only used Lighthouse. Tested with different specs (on both Windows and Mac OS).

I was expecting to have reduced the JS bundle size and thus improving the overall performance score, but to my surprise it didn’t turn out like that. The bundle size was indeed improved remarkably (almost by 50%) and some of the metrics improved but one in particular got much worst: Largest Contentful Paint. On avarage, the metric was crippled by a whooping 80%.

On both versions (Chakra UI and Tailwind CSS) the largest contentful element is the same, the first image on the DOM.

Conclussion and questions

Well, overall it feels a bit frustrating that after all the exciment and the work it took to migrate from Chakra UI to Tailwind CSS the results are not very convincing.

Althought I’m very curious about why is the Largest Contentful Paint metric being affected so badly? What could be causing such a negative impact? I can’t find any reasonable cause.

Update 2023

The negative impact on the LCP was mostly due to difference in CSS transitions duration. I used the default durations from Tailwind CSS which were a little longer than the ones I used with Chakra UI and this caused a delay on the largest contentful paint.