tailwind-merge increases NextJS initial load JS by 28kB

[dinosmajovic]

Hey,

I'm using Next 14 and looking into optimizing the initial load JS of my pages. Whenever I import tailwnd-merge to my client component it automatically increases the initial load JS by about 28kB which is quite a lot since importing both react-hook-form and zod increases it by less than that. I wonder if I'm doing something wrong or is this lib just super heavy. Any help would be greatly appreciated. Thanks.

[dcastil]

Hey @dinosmajovic! 👋

tailwind-merge is really that big unfortunately: ~20 kB uncompressed, ~6 kB of data over the wire. That is mostly due to its large config containing info about all the classes that exist in Tailwind CSS, even classes that are rarely used like diagonal-fractions.

You have multiple options to reduce the size of tailwind-merge.

1. Don't use the default config and create your own

If you use createTailwindMerge, you never import the default config and only use the computational logic of tailwind-merge which is roughly 20% of the entire bundle size. This allows you to create your own config which only contains the classes you use.

import { createTailwindMerge } from 'tailwind-merge'

const twMerge = createTailwindMerge(() => ({
    // A subset of the default config only containing classes you're using
    // You can paste the default config in here and remove everything that you don't use
}))

2. Use a tailwind-merge alternative with smaller bundle size impact

I wrote about some alternative paths to solve merging in the docs. They work especially well if you only want to merge stuff in a few places.

---

(Related: #185)