Heading not showing on localhost when wrapped with Tailwind component

[devklepacki]

Describe the Bug

Heading component is not rendering when it's inside a Tailwind component. I was building a new email and was fighting with Heading not displaying (not rendering in DOM at all). Once I've removed the Tailwind component wrapping my template the Heading appeared. The same happens with newly created project using yarn create email.

• There is no Join Enigma on Vercel heading visible right under the logo

• While it's in the React code:

• It's also not in the rendered HTML code snippet:

<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px">
  <tbody>
    <tr>
      <td><img alt="Vercel" height="37" src="/static/vercel-logo.png" style="display:block;outline:none;border:none;text-decoration:none;margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto" width="40" /></td>
    </tr>
  </tbody>
</table>
<p style="font-size:14px;line-height:24px;margin:16px 0;color:rgb(0,0,0)">Hello <!-- -->alanturing<!-- -->,</p>
<p style="font-size:14px;line-height:24px;margin:16px 0;color:rgb(0,0,0)"><strong>Alan</strong> (<a href="mailto:[email protected]" style="color:rgb(37,99,235);text-decoration:none;text-decoration-line:none" target="_blank">[email protected]</a>) has invited you to the <strong>Enigma</strong> team on<!-- --> <strong>Vercel</strong>.</p>

• Once the Tailwind component is removed, the Heading appears

Which package is affected (leave empty if unsure)

@react-email/heading, @react-email/tailwind

Link to the code that reproduces this issue

https://github.com/devklepacki/react-email-reproduction

To Reproduce

• Download the project (from reproduction or with yarn create email, install dependencies and run it
• On localhost go to vercel-invite-user email template
• There is no Join Enigma on Vercel Heading visible right under the logo

Expected Behavior

Heading contents should be shown when used inside Tailwind component

What's your node version? (if relevant)

v20.11.0

[fominv]

Have the same issue. Downgrading to "@react-email/components": "0.0.15" fixed it for me.

[peperoli]

Have the same issue. Downgrading to "@react-email/components": "0.0.15" fixed it for me.

Same here, but had the issue with "@react-email/components": "0.0.15" too. On 0.0.14 it's working for me though.

[gabrielmfern]

This should be fixed under the latest canaries, for both @react-email/components and @react-email/tailwind. No need to downgrade here.

See https://github.com/resend/react-email/issues/1391#issuecomment-2035304838.

There were also a few other issues created after that original #1391 was closed, and even though I closed them as not planned, others kept popping up, so I'm going to keep this one open for anyone else to find. Even though this is still a duplicate, thank you, @devklepacki, for making it detailed and making a reproduction regardless of it already being fixed, people like you make open-source fun!

[devklepacki]

@gabrielmfern I've got no idea how I didn't find that older issue! Oh, maybe the default search filter was set to open issues... Meh. Anyway, confirmed that the canary version seems to be working. Thank you!

[poeck]

For me @react-email/[email protected] worked, but @react-email/[email protected] didn't.

[gabrielmfern]

@poeck Yeah, I had to compromise there since we needed a new stable release urgently to fix the issues with peer dependencies, so the changes from canary weren't published. I should tune these versions out properly in the coming weeks. Probably making a new latest release with those.

If I'm still unsure of the stability of the changes in canary, I might make another canary release like 0.0.17-canary.x with the new peer dependencies.

[mfts]

I'm on @react-email/[email protected] and [email protected] and the <Heading> is completely missing from development and production emails.

Not sure how long this has been going on but it's super weird.

I'm changing <Heading> to <Text> and it will show. That's my short term fix.

[gabrielmfern]

@mfts After #1459 I will release the canaries again and that should be cleared up for now. Will close the issue and let you all know once this is released under a stable version.

Also, see my comment above to understand why it seems like there was a regression from canary to latest.

[gabrielmfern]

Released a new canary for @react-email/tailwind that should be working with this. It is also on the latest canary for @react-email/components.

[andresgutgon]

Can confirm. I was having exactly this issue and these versions fix it

  "dependencies": {
    "react": "^18.2.0",
    "@react-email/components": "0.0.18-canary.0",
    "@react-email/tailwind": "0.0.17-canary.0",
    "react-email": "2.1.3-canary.2"
  },

[gabrielmfern]

This has been fixed and released under @react-email/[email protected] or @react-email/[email protected]. If anyone still experiences this, please let me know and I'll reopen the issue.

[eltongonc]

Installing @react-email/components and @react-email/tailwind separately worked for me