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.
Source code
You can fin the source code on this repository:
The master
branch uses Chakra UI and the feature/headlessui
branch uses Tailwind CSS.
If you want to run the project locally you need to setup a single environmental variable, just ping me.
Latest comments (1)
Very gootenberg
Some comments have been hidden by the post's author - find out more