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

[wladpaiva]

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

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]

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]

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 <style> tags and not the css variables itself

[gabrielmfern]

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

@wladpaiva Sadly no, it would only work if we inlined the styles after rendering, but we do it during rendering in the actual React elements for a few reasons.

Also, not sure if the issue name correctly represents the issue now. The problem seems to be with the <style> tags and not the css variables itself

Not sure if I follow what you mean here, but the issue here is with the CSS variables. If you define a CSS variable in your template and then use it through Tailwind somehow, they will not be resolved properly. Are you talking about another problem?

[wladpaiva]

Forget it. You are right. The problem is with the css variables and not the <style> being striped out before inlining the css.

[paschalidi]

I was dealing with the same issue today, thank you for the PR.

I am wondering, is there perhaps a rough estimate for when the PR above will be merged? 🙇

[paschalidi]

I am still having this issue, where my colors look like this

export const colors = {
  primary: {
    100: 'var(--slate-1)',
    200: 'var(--slate-2)',
    300: 'var(--slate-3)',
    400: 'var(--slate-4)',
    500: 'var(--slate-5)',
    600: 'var(--slate-6)',
    700: 'var(--slate-7)',
    800: 'var(--slate-8)',
    900: 'var(--slate-9)',
    1000: 'var(--slate-10)',
    1100: '#60646C',
    1200: 'var(--slate-12)',
    DEFAULT: '#11181c'
  },

But ideally I would want to use the variables, is there a workaround on this rather than hardcoding the values?

[gabrielmfern]

@paschalidi Are you still having it in canary?

[paschalidi]

    "@react-email/components": "^0.0.22",
    "react-email": "^3.0.1",

This is what I use.

@gabrielmfern does this help?

[gabrielmfern]

@paschalidi I see you aren't using the canaries. The issue here has been fixed on canaries. Canaries are a different tag of versions that we use that come before the stable version, sort of like a beta, meant for testing before the proper release.

Try using @react-email/components@0.0.26-canary.5 that includes the merged PR in the release.

[paschalidi]

ah I see! thank you, I will try that now 🙇

[paschalidi]

Thank you for this fix, it works now 🙇