@react-email/tailwind Package dist size is too large

[seawatts]

Describe the Bug

I am trying to use react-email with TRPC and Next.js I ran a profiler on the output of next build with @next/bundle-analyzer It said the largest package was coming from @react-email/tailwind/dist/index.mjs

I am running Next.js with Open-Next deployed with SST on a Lambda in AWS. The larger the Node.js portion of the next.js code is, the longer it takes for the lambda to start. Currently it looks like @react-email/tailwind is 6.5MB

At first glance, it looks like it's pulling in all of tailwindcss and postcss here: https://github.com/resend/react-email/blob/canary/packages/tailwind/src/utils/get-css-for-markup.ts#L1-L4

Is there a way we can make this package smaller?

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/resend/react-email/tree/canary/packages/tailwind

To Reproduce

Run next build with @next/bundle-analyzer

Expected Behavior

The dist folder to be smaller.

What's your node version? (if relevant)

No response

[gabrielmfern]

Is there a way we can make this package smaller?

It certainly is something that we want to improve on and that isn't in the least optimal. The best way I found to do it was to bundle it as it is, it might not just be postcss and tailwind that make the biggest impact on this though but rather the necessary polyfills for internal tailwind dependencies. We polyfilled because it was either that, or patching tailwind to remove all imports for non-browser stuff. I think there might be a way for this by not using postcss necessarily but it would need a bit of a change of the way we do things currently. Might also avoid rendering twice for generating the styles.

[FleetAdmiralJakob]

I have the same problem. I can't push the code to the next.js edge runtime because react emails bundle is way too large. A main problem I see is the js-beautify lib.

[jlopezxs]

Same problem here

➜  node_modules du -sh -- */ | sort -rh
509M	react-email/
275M	@next/
182M	canvas/
103M	next/
65M	typescript/
62M	next-translate-plugin/

509mb of disk sizes in my docker image any way to reduce it?

[gabrielmfern]

@jlopezxs This issue is about the @react-email/tailwind package, not the react-email one.

For the react-email package, you should be able to just move it to a dev dependency, as it is just the CLI, and if installed with npm install --production it will not be included.

Also, there was an issue we fixed a while ago that might improve the size for you, so upgrading is also something you can do.

[PCRinus]

@jlopezxs This issue is about the @react-email/tailwind package, not the react-email one.

For the react-email package, you should be able to just move it to a dev dependency, as it is just the CLI, and if installed with npm install --production it will not be included.

Also, there was an issue we fixed a while ago that might improve the size for you, so upgrading is also something you can do.

Is this something that should be documented in the docs? I was also having trouble with my bundle size, and your suggestion worked wonderfully. I can't imagine it would hurt having a smaller production bundle size, especially for serverless environments.

[gabrielmfern]

@PCRinus, Certainly. Wonder where you would think we could best fit a mention of this?

[PCRinus]

@gabrielmfern I'd say that the places which would need to be updated are in the manual setup page and the monorepo setup page for each package manager. There might be additional places as well, so I'll look into it more.

I can also open a PR with the documentation changes, if that's okay

[gabrielmfern]

@PCRinus That would be lovely if you could! Feel free to open the PR and I'll review it.

[luiz00martins]

For those having this issue in their project, try deleting your repo's folder, re-cloning, and re-installing the packages. It worked for me.

[PCRinus]

Hey @gabrielmfern, here is the PR link for this small docs change: https://github.com/resend/react-email/pull/1522, I imagine you folks have a lot of work going on, so this might get lost

[djshubs]

I am facing a similar issue where the react-tailwind package is one of the largest. What's the best way to reduce size?

[taylor-lindores-reeves]

Can we use cssnano to decrease dist bundle size for react-email/tailwind?