Bad tailwind style outputs for Gmail

[luantran1311]

Describe the Bug

I used Tailwind components.

It looks fine in the preview page:

But terrible on Gmail:

Which package is affected (leave empty if unsure)

@react-email/components

Link to the code that reproduces this issue

https://anotepad.com/notes/5nmr7a67

To Reproduce

N/A

Expected Behavior

Styling in Gmail, Yahoo, or any other mailing system should match the preview page

What's your node version? (if relevant)

Node 18 LTS

[PovilasKirna]

Same I have this problem, if I render a react component it looks okay but when I send it to gmail using resend the gmail version lacks most of the styling

[calbertan]

I had this same problem when sending emails to Gmail, but Outlook emails seems to be just like the preview. This problem might be on Gmail side?

[EthanNValencia]

I have the same problem with yahoo mail and gmail. I thought the problem was tailwind and the render function.

I'm using:

"@react-email/components": "0.0.6", "@react-email/render": "^0.0.9",

It looks like the render function is not converting the classNames over to css with tailwind? Produces:

<table align="center" width="100%" class="mx-auto rounded-lg border shadow-lg w-fit p-2" data-id="__react-email-container" role="presentation" cellSpacing="0" cellPadding="0" border="0" style="max-width:37.5em">

So I decided to switch over to using style={...}. The styles seem to be applied properly? Produces:

<table align="center" width="100%" data-id="__react-email-container" role="presentation" cellSpacing="0" cellPadding="0" border="0" style="max-width:37.5em;margin-left:auto;margin-right:auto;border-radius:0.5rem;border-width:1px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);width:fit-content;padding:0.5rem">

So from here I can get the HTML to render properly in a browser as a page. However, with yahoo and gmail it still doesn't look good. I tried forwarding the email to my college email account (outlook) and it looks the same there too (not good). So I am not really sure what the problem is.

[fewjative]

Email clients like gmail and outlook have their own styling overrides which causes your created email to look differently. I haven't found a good way to bypass that outside of using '!important' on certain properties.

[gabrielmfern]

@fewjative If you don't mind me asking, in what kind of properties did you have to use !important?

[jsonMartin]

^ I'm having the same issue, my tailwind designed email with react-email v2 looks great in the component browser and like 💩 in Gmail. It looks pretty good in Fastmail client, but still has some issues there too.

[gabrielmfern]

@luantran1311 Looking at the email you sent, I notice a few things that cause the email to look bad here

1. The image breaks because justify-center and items-center do not have good support for Gmail
   • You can keep the flex for gmail here though, it works fine
2. You aren't using our Font component for fonts here so this might explain why the fonts don't get used, but from my testing locally it seems like they are loading fine now, Gmail might've improved since then
3. You are using the default values from Tailwind's configured utilities so it will use stuff like rem which doesn't have the best support

---

On another note, since most of the issues everyone is having here, that are really our responsibility, is regarding rem and other units for Tailwind's utilities I'll talk about that.

Although we would love to give better support and better DX on this, the best way is not to provide a hidden compilation process that would get out of your control but rather give you control with sane defaults that makes things more predictable than writing the emails in plain HTML.

That being said, we will probably make something you can add to your tailwind config optionally that addresses this and makes this a bit better to use. This also will probably come with a more guided way of defining the config for Tailwind here as currently the way we have doesn't play very well with Tailwind's VS Code extension or LSP server.

[gabrielmfern]

@jsonMartin Would love if you shared an email template maybe similar to the one you're using so that I can debug the issues you mention as well

[jsonMartin]

@gabrielmfern after looking more into it and seeing the lack of support, I think that using Tailwind flex attributes is what is causing my issues. Not only does it look different in Gmail, but it even looks different between Gmail in Chrome vs Firefox.

It's a little confusing because it's so easy to make a nice email layout in the studio editor, but then what you see isn't necessarily what you get in the e-mail client. I suppose I'll just have to refactor to a Table based layout to make it work consistently between browsers.

If I still have issues after removing flex I can try to share an example template.

[jsonMartin]

I refactored my template to remove all flex properties. Using table styling gives less flexibility, but at least it works well in Gmail. There were also some other things tripping me up (negative margins not working in Gmail, etc), but I was able to find styling workarounds and it all looks good now!

As a sidenote, one enhancement that would be really helpful is if the react-email preview could somehow toggle stripping incompatible markup that won't work in Gmail, such as justify-center and negative margins. Sending an e-mail to test if it works properly in different clients is a cumbersome feedback loop.

[gabrielmfern]

As a sidenote, one enhancement that would be really helpful is if the react-email preview could somehow toggle stripping incompatible markup that won't work in Gmail, such as justify-center and negative margins

For sure, but it's important to keep in mind the preview is just an approximation. Currently, it doesn't simulate anything about how email clients may render though.

[gabrielmfern]

If I still have issues after removing flex I can try to share an example template.

That'd be awesome if you could