react-email: Latest update won't output tailwind classes to

Describe the Bug

After updating all my @react-email packages to their latest version, it won’t render the content correctly.

What’s happening is that it looks like the Tailwind component stops outputting it’s generated CSS for the utility classes I use.

With old version there are 5 <script> tags generated, where the 5th one contains the css utility classes generated by Tailwind. When updating, only 4 script tags are present (all custom fonts), but no css i generated, and that breaks the layout.

Screenshots:

Old version Skjermbilde 2023-11-27 kl 13 23 26

Latest version Skjermbilde 2023-11-27 kl 13 23 51

These are the working packages:

    "@react-email/components": "^0.0.7",
    "@react-email/font": "^0.0.3",
    "@react-email/render": "^0.0.7",
    "@react-email/tailwind": "^0.0.8",

These are not working:

   "@react-email/components": "^0.0.11",
    "@react-email/font": "^0.0.4",
    "@react-email/render": "^0.0.9",
    "@react-email/tailwind": "^0.0.12",

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

n/a

To Reproduce

Update all to latest, use css classes, and check the outputted html.

Expected Behavior

It to generate css classes.

What’s your node version? (if relevant)

No response

About this issue

Original URL
State: closed
Created 7 months ago
Comments: 16 (3 by maintainers)

Most upvoted comments

Hey @gabrielmfern, sorry on the delay here. Apologies, weird caching issue my side. Now working as expected although there now appears to be a media query problem with tailwind. I’ve mentioned this here. Thanks again for all your help 🌟

jwarykowski on Dec 21, 2023

We released a new version now stable that solves this @react-email/tailwind@0.0.13.

gabrielmfern on Dec 1, 2023

Hmm, unfortunately I still get this error on canary.4.

Been working on this for a bit, sorry for the delay, can you try out @react-email/tailwind@0.0.13-dev.user-build-problems.0 for me?

It worked for me! 🤩 thank u so much!!!

JaviEzpeleta on Nov 30, 2023

Hmm, unfortunately I still get this error on canary.4.

Been working on this for a bit, sorry for the delay, can you try out @react-email/tailwind@0.0.13-dev.user-build-problems.0 for me?

gabrielmfern on Nov 29, 2023

Hey @eivindml, are the styles not getting inlined on your template with the latest canary?

Also since you are using the components package as well, did you make sure you imported from @react-email/tailwind instead of @react-email/components for testing?

Styles should be inlined because the support on email clients will be better with inlined styles rather than defined on the <style> tag. The only place left to have classes being kept is when you use media queries since there is no other way to apply the styles otherwise.

@gabrielmfern

Styles are being inlined. That part works. It’s just the generation of the <script> tag for responsive layout stuff.

You where right, I was importing Tailwind from @react-email/components. I’ve fixed that now. Unfortunately, that wasn’t enough. Updating to "@react-email/tailwind": "0.0.13-canary.3" breaks my project (Sanity Studio, react-based).

I tried to use all different canary packages to see where it breaks.

@react-email/tailwind@0.0.13-canary.0 – Project builds, but won’t generate <script> tag for media queries.
@react-email/tailwind@0.0.13-canary.1 – Gives build error for project: Uncaught error: os.platform is not a function. (In 'os.platform()', 'os.platform' is undefined) See screenshot
@react-email/tailwind@0.0.13-canary.2 – Gives build error for project: Uncaught error: Dynamic require of "fs" is not supported
@react-email/tailwind@0.0.13-canary.3 – Gives build error for project: Uncaught error: Dynamic require of "fs" is not supported See screenshot

eivindml on Nov 27, 2023