search

resend / react-email

💌 Build and send emails using React
https://react.email
MIT License
14.1k stars 641 forks source link

CSS variables defined in the template are substituted with `undefined` when using Tailwind #1448

Open wladpaiva opened 4 months ago

wladpaiva commented 4 months ago

Describe the Bug

Right now, if you want to use the same Shadcn styles in the react-email you have to duplicate the tailwind config file and manually replace the css variables with the actual values. Apparently react-email strip out <style> tags before transforming classnames to styles.

Which package is affected (leave empty if unsure)

@react-email/tailwind, react-email

Link to the code that reproduces this issue

https://github.com/wladpaiva/react-email-shadcn

To Reproduce

  1. run bun dev
  2. open template and inspect <Text> elements

Expected Behavior

Screenshot 2024-05-08 at 12 34 39

Both <p>s should have background set but only the one using the css variable is set to undefined

What's your node version? (if relevant)

No response

gabrielmfern commented 4 months ago

Apparently react-email strip out <style> tags before transforming classnames to styles.

Hmm, I don't remember we removed any <style> tags, I think they shouldn't be removed, or you have not seen this behavior directly?

Both <p>s should have background set but only the one using the css variable is set to undefined

What Tailwind does is try resolving all CSS variables for the styles associated with each class, meaning that it couldn't find the variable you defined on the so it resolves to undefined. If there is even a style inside its scope, i.e., it's children. That's certainly an issue, but resolving these variables from outside the scope of the email template — assuming this is what you want — is going to be impossible currently.

It's probably going to be better to, at least currently, use actual values as colors on your Tailwind config for the email template. Maybe have a tailwind.config.ts beside your email templates that just imports your original one and modifies it as needed for the time being.

wladpaiva commented 4 months ago

That's what I've been doing but kinda sucks having to configure two separate tailwind.configs. I guess using somehting like inline-css to inline the styles during the render would work fine, no? I've tested here and seems to cover all use cases

Also, not sure if the issue name correctly represents the issue now. The problem seems to be with the