Bundle size increased

[kevinbrechbuehl]

Hi

You did an amazing job on the Material Tailwind theme, it looks awesome. I lately bought the Pro version and integrated it into my React app as described in the Vite installation guide.

Everything seems to work fine. But when I build my app, I see that the bundle size has massively increased.

Before adding the theme:

../../dist/apps/app/assets/index-7502bb6d.css    4.30 kB │ gzip:  1.39 kB
../../dist/apps/app/assets/index-06e29bdb.js   169.09 kB │ gzip: 55.45 kB

After adding the theme:

../../dist/apps/app/assets/index-59419366.css   90.92 kB │ gzip:  10.96 kB
../../dist/apps/app/assets/index-f3c7b0a8.js   720.31 kB │ gzip: 191.17 kB

The CSS size is increased because we add withMT in tailwind.config.js and every Tailwind class used by your components is added to the bundle whether it is used by my app or not. Tailwinds post processing purging can't work.

The JS size is increased because of the barrel file, which includes every component as soon as I add a reference to one of them as described in the documentation. As an example, if I import the <Button /> as follow, the size is not that big, but still like double than without the theme. Is there some issues with tree shaking or do I miss something?

import { Button } from '@material-tailwind/react/components/Button';

Do you have any suggestions or solutions to work around the big bundle sizes or is this just the way how Tailwind works when integrating a third party theme?

[Friskopp]

Just noticed this issue as well. Haven't had this problem when implementing DaisyUI for tailwind so I think this is a problem specifically for material-tailwind

edit: skipped the theme provider-wrapper and imported components like the example above to get around this for now.

[ThinhNguyenHoang1]

I encountered the same problem. Now my app start up really slow and takes a lot of time to compile when importing from the barrel file as instructed in the Docs for NextJS App Router.