Very slow render when using Tailwind #630
-
I noticed that when using the Is this expected behavior or could I be doing something wrong? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 9 replies
-
I avoided Tailwind unfortunately. Looking at the code, you can see that it is actually rendering the whole children tree of the component every time: https://github.com/resendlabs/react-email/blob/main/packages/tailwind/src/tailwind.tsx (search for renderToStaticMarkup is also use during the I noticed that I do not need most of tailwinds functionality, so this is what I did: import { tailwindToCSS, TailwindConfig } from "tw-to-css";
const { twj } = tailwindToCSS({
config, // my config
});
const textStyle = twj('text-bold ... ') // only parsed once but does not support anything that uses @media query
function MyTemplate() [
return <Text style={textStyle}>...</Text>
] |
Beta Was this translation helpful? Give feedback.
-
For anyone else finding this, I still see dramatic differences between Tailwind and non-Tailwind emails. I am sure it is better than it was before, but I don't know that the issue is completely resolved. When using Tailwind, we are seeing render times around Additionally, the Taken in combination, I don't see a path forward for us using the Note: Those performance numbers are from ARM Lambdas with 512mb of memory |
Beta Was this translation helpful? Give feedback.
This has actually been fixed as of the latest version for @react-email/tailwind. See https://resend.com/blog/improved-performance-for-tailwind-emails