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

[jsonMartin]

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.

Yeah, I found that out the hard way @gabrielmfern 😆 My ignorance, it's my first time working with react-email and I thought there was some magic going on to make it WYSIWYG so it would look like that in the email clients too. When using Tailwind with react-email, it's so easy to design like you're used to; but then comes the hard part working backwards to make it render properly in Gmail. I'm not too experienced with writing safe e-mail based HTML so had to look up all the "gotchas"

But it's all good now, after removing all of the flex content and simplifying the design, I was able to get it looking almost as good. I'm just using Tailwind for stuff like padding and color now, with a mix of the react-email and vanilla html components in a table layout.

P.S. And for sure, I know my feature suggestion is totally out of scope for this thread, just would be really convenient to have one day in a future version. I can't count how many times I spammed my Gmail inbox trying to get my last template working perfectly 😆

[aaronhawkey]

Weighing in here. Just starting to adopt the library and this should specifically be called out in the docs. My grug dev brain assumed that it was WYSIWYG sorcery.

[mrinc]

Also, the examples provided should be 100% on all different platforms (which is not the case).

[gabrielmfern]

@aaronhawkey That is a common misconception. I agree it would be a good idea. What would you recommend is a good place for documenting this? Would love your thoughts.

My initial thought would be answering this on some sort of FAQ, but I don't think it would be so easy to find as just opening the docs.

[gabrielmfern]

@mrinc What examples did you find did not work on what platforms? Would love for you to open an issue on this, and I'll take a look once I can.

Would love even more if you open a PR :)

[aaronhawkey]

@gabrielmfern Thanks for the quick reply! You rock!

Truthfully I am not sure since I'm the type of dev that rushes to try to implement, then references the docs when he gets stuck. But it might help to have some sort of compatibility guide on the Tailwind component docs. What would work and what wouldn't with certain clients? That's prob a lot to ask. I would also maybe move the disclaimer higher up towards the top about incompatibility.

A lot of people probably won't have a strong foundation on writing html emails and the underlying complexity (like me). How do you best communicate that? I'm not certain.

[jsonMartin]

Just to chime in to the conversation about WSYWIG misconception @gabrielmfern @aaronhawkey — I think it's much easier to fall into this trap when using Tailwind, because web developers will likely bring their existing mental models with them, write the Tailwind code they're used to writing, and expect it to work. And with the responsive e-mail studio editor with visual feedback confirming that feeling, it makes it easy to keep working on a great looking template until realizing a few hours later it doesn't actually work in Outlook 😆

I think putting a callout somewhere prominent in the Tailwind documentation (that it compiles down to normal HTML and should only be used for classes with support for e-mail clients) could save developers like myself a lot of time going down the wrong path. FAQ would be good too, maybe if just to mention that there is no WSYWIG magic, make sure to use proper email-safe HTML, and provide a link to a site like https://www.caniemail.com/ for supported elements

[eaoliver]

This is a useful resource for anyone encountering this issue: https://developers.google.com/gmail/design/css

[bhatvikrant]

I've realised it's best to use the style tag for layout-ing and TailwindCSS for stuff like padding, margin and colors for now.