Outlook does not respect styling

[dreinon]

Hi! I have read #159 but not only outlook does not respect this, but also paddings and font weight. We are using the Tailwind component (even adding it to each custom component). Any ideas on how to address this issue would me much appreciated.

Thanks!

[bukinoshita]

Can you share the code?

[joshgdale]

I've noticed issues is width of Sections... using the tailwind class w-[600px] for example works great in browser & Apple Mail, but doesn't work in Outlook. This seems to be because along with applying the 600px class, it also applies a width="100%" attribute to the resulting table. Outlook seems to not respect the style="width: 600px" and only applies the width attribute. This is possibly part of a larger issue though as Outlook's rendering engine is different from everything else for now.

[arpi0003]

I'm also noticing that the styles (padding and margin) of buttons do not work on the desktop client of Outlook 365. I've tried using the raw HTML from a demo email as well and it does not work either. 🤷 .

Here is outlook 365 desktop client on windows 10

Here is Outlook 365 web client

Is Outlook desktop client supported?

Update After taking a look at the source code (documentation is a bit out of date), I do see that you can provide pX and pY props to a button and this update fixes the duplicate styles issue raised here in #505. This fixes the issues for me with the button. It may be nice to update all components (like Sections) to be able to add pX and pY props so padding can be added for outlook.

[EyMaddis]

Maybe this is related to using rem and not pixels https://www.caniemail.com/features/css-unit-rem/

It seems that react-email does not adapt the tailwind.config.js in any way, so it will use rem. Maizzle seems to switch to px: https://github.com/maizzle/maizzle/blob/master/tailwind.config.js https://maizzle.com/docs/configuration/tailwindcss

I think react-email needs to have some default handling here as well...

[dreinon]

Hi! Our problem is the one @arpi0003 mentions. Any news? Thanks!

[erik06]

I can confirm that tailwind styling that outputs to rem sizing does not work in Outlook on Windows but converting all rem values to px values fixes the issues mostly

[johanbook]

I also ran into this issue. By converting rem to px this improved significantly. There are still things like border radius that does not work and the attribute w-full

[merttyilmaz]

Hey guys, currently I'm running into this issue. I will share my code and tailwind config and the images here as well. Please give me your feedback.

I cant paste my email jsx here so I'll try to attach a file here. Its a zip file

Tailwind config: `import type { TailwindConfig } from "@react-email/tailwind";

export default { CancelSubscription.zip

theme: { fontSize: { xs: ["12px", { lineHeight: "16px" }], sm: ["14px", { lineHeight: "20px" }], base: ["16px", { lineHeight: "24px" }], lg: ["18px", { lineHeight: "28px" }], xl: ["20px", { lineHeight: "28px" }], "2xl": ["24px", { lineHeight: "32px" }], "3xl": ["30px", { lineHeight: "36px" }], "4xl": ["36px", { lineHeight: "36px" }], "5xl": ["48px", { lineHeight: "1" }], "6xl": ["60px", { lineHeight: "1" }], "7xl": ["72px", { lineHeight: "1" }], "8xl": ["96px", { lineHeight: "1" }], "9xl": ["144px", { lineHeight: "1" }], }, spacing: { px: "1px", 0: "0", 0.5: "2px", 1: "4px", 1.5: "6px", 2: "8px", 2.5: "10px", 3: "12px", 3.5: "14px", 4: "16px", 5: "20px", 6: "24px", 7: "28px", 8: "32px", 9: "36px", 10: "40px", 11: "44px", 12: "48px", 14: "56px", 16: "64px", 20: "80px", 24: "96px", 28: "112px", 32: "128px", 36: "144px", 40: "160px", 44: "176px", 48: "192px", 52: "208px", 56: "224px", 60: "240px", 64: "256px", 72: "288px", 80: "320px", 96: "384px", }, }, } satisfies TailwindConfig; ` This is my folder structure(I'm using it in an existing project and its tailwind config shouldnt interfere with the actual projects tailwind config):

The email for Gmail mobile and web and also Apple mail : The email for Outlook Desktop App : @bukinoshita any ideas?