My personal experience while migrating a Next.js app from Chakra UI and Framer Motion to Tailwind CSS and Headless UI.
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.
- Branched of from
masterand 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
classNameto 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.
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.
You can fin the source code on this repository:
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)
Some comments have been hidden by the post's author - find out more