Tailwind breakpoints don't work in Gmail

Describe the Bug

I have an email:

import {
  Body,
  Html,
  Head,
  Text,
  Button,
  Link,
  Container,
  Tailwind,
  Section,
  Preview,
  Img,
} from "@react-email/components";
import * as React from "react";

interface EmailProps {
  firstName: string;
}

export default function Email(props: EmailProps) {
  const { firstName = "John" } = props;

  return (
    <Html lang="en" dir="ltr">
      <Tailwind>
        <Head />
        <Body className="m-0 bg-zinc-950 sm:py-8 font-sans">
          <Container className="mx-auto max-w-2xl sm:rounded-xl bg-zinc-900 px-8 py-8">
            <Section className="mb-8 text-center">
  ...

It has sm:rounded-xl and sm:py-8. The breakpoints work perfectly fine during development. However, when I send a test email and open it in Gmail (on both Chrome and Safari), the padding and border-radius don’t work, regardless of whether I view it on desktop or mobile.

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

To Reproduce

Expected Behavior

What's your node version? (if relevant)

24

I have the same issue. It worked fine an older version of react email. But since I have updated to the latest versions it is not working anymore.

Currently running:

"react-email": "^5.0.5",
"@react-email/components": "^1.0.1",
"@react-email/tailwind": "^2.0.1",

I was running:

"react-email": "^5.0.1",
"@react-email/components": "^0.5.7",
"@react-email/tailwind": "^1.2.2",

When i look at the source of the email send to Gmail I do see the styles present in the <head> from the email

<style>.sm_block{@media (width>=3D40rem){display:block!important}}.sm_te=
xt-5xl{@media (width>=3D40rem){font-size:48px!important;line-height:1!impor=
tant}}.md_rounded-lg{@media (width>=3D48rem){border-radius:0.5rem!important=
}}.md_px-8{@media (width>=3D48rem){padding-right:32px!important;padding-lef=
t:32px!important}}.md_py-4{@media (width>=3D48rem){padding-bottom:16px!impo=
rtant;padding-top:16px!important}}.dark_text-white{@media (prefers-color-sc=
heme:dark){color:rgb(255,255,255)!important}}</style>

but for some reason they are not applied.

edit: I just rolled back to the version mentioned above, and it is working again. The problem seems to occur when upgrading @react-email/components to 1.0.1

edit2: I had a look at the Html from the source email and I found that the style block is different:

<style>@media(min-width:768px){.md_py-4{padding-top:16px !important;padd=
ing-bottom:16px !important}}@media(min-width:768px){.md_rounded-lg{border-r=
adius:0.5rem !important}}@media(min-width:768px){.md_px-8{padding-left:32px=
 !important;padding-right:32px !important}}@media(min-width:640px){.sm_text=
-5xl{font-size:48px !important;line-height:1 !important}}@media(min-width:6=
40px){.sm_block{display:block !important}}@media(prefers-color-scheme:dark)=
{.dark_text-white{color:rgb(255,255,255) !important}}</style>

Looks like gmail does not like the newly generated style block.

Don't seem to be working in outlook/office 365 as well

Not working for me either, this issue is blocking me from updating to v1.0.1.
Confirmed issue is not present in v0.5.7

If I send a test email from the preview server it works fine but not from the actual template

Isn't this a huge issue? My react emails with tailwind 4 both from "@react-email/components": "1.0.3",
"@react-email/tailwind": "^2.0.3", are not working in gmail at all!

I'm surprised I'm not seeing this mentioned anywhere else.

PS:
They work in Notion mail though...

The live tailwind demo from the official docs is also crashing https://react.email/docs/components/tailwind

https://demo.react.email/preview/notifications/vercel-invite-user

Seems media queries like width>=40rem is being encoded as width>=3D40rem somewhere in the pipeline, which causes the styles to not get applied? Going back to min-width: 40rem might fix it but I don't know the code base. 🤷🏼

@quintenb

The original reproduction doesn't actually reproduce. Would you be willing to share the React source that generated the broken styles for you @quintenb?

I’m having a similar issue with emails generated from new.email. It uses a Tailwind wrapper that works fine in the macOS Mail client, but the styling breaks when viewing the email in a browser via Gmail.

Since no one shared a reproduction for this, I'm going to close it as not planned. If anyone still has this let me know with a proper reproduction, and once we can reproduce and we'll reopen.

There us nothing in https://developers.google.com/workspace/gmail/design/css#css_media_queries that indicates that the range syntax is supported

Nested media queries, which Tailwind CSS v4 uses, are not supported in several big clients:

https://www.caniemail.com/features/css-at-media/

React.email can mitigate this with a custom Tailwind v4 CSS config where it would disable the default breakpoints and add custom ones, like we're doing here:

https://github.com/maizzle/tailwindcss

+ lowering syntax with Lightning CSS, by passing it something like {targets: {ie: 1 << 2}} to force the lowest syntax support.

Unfortunately Tailwind CSS v4 doesn't allow passing anything else than minify: false to Lightning's config, so this needs to be an extra step until/if the Tailwind team implements that.

this is literally breaking react email with tailwind on all major mail clients? how can this not get more attention?

fix: make Tailwind breakpoints Gmail-compatible

Since no one shared a reproduction for this, I'm going to close it as not planned. If anyone still has this let me know with a proper reproduction, and once we can reproduce and we'll reopen.

This issue indeed exists; breakpoints like sm: do not work in Gmail.

I think this issue should be taken seriously, but unfortunately, no one is paying attention to this issue.

fix(tailwind): downlevel CSS for email client compatibility

Opened a PR for this: #3086

The root cause is two things:

Tailwind v4's compile().build() outputs Media Queries Level 4 range syntax (width>=40rem) which Gmail and most email clients don't understand
The CSS uses nesting (.class{@media{...}}) which email clients also don't support

When React Email uses the Tailwind compiler API directly, the PostCSS/Lightning CSS pipeline that normally downlevels these features doesn't run.

The PR adds a transform step that converts both to legacy syntax before injecting into the <style> tag.

fix(tailwind): downlevel CSS for email client compatibility

While we are waiting for this... are no one using resend and tailwind then? Or are people just maintaining parallell implementations of their emails with non tailwind css? With claude it's not that hard actually, but it sucks that we can't rely on tailwind end to end

@kristianeboe

@kristianeboe Yeah this is a real pain point, I ran into the same thing building Emailens, which previews how HTML emails render across clients. Tailwind v4's compiler API skips the PostCSS/Lightning CSS pipeline that normally downlevels range syntax and nesting, so Gmail/Outlook just ignore the <style> block entirely.

PR #3086 fixes both issues (range syntax + nesting) using css-tree AST. Hoping to get it merged soon so everyone can use Tailwind end-to-end without workarounds.

This specific issue has been stopping us for updating for almost a year now.

fix(tailwind): downlevel CSS for email client compatibility

Navigation Menu

Repository navigation

Tailwind breakpoints don't work in Gmail #2712

Describe the Bug

Which package is affected (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Expected Behavior

What's your node version? (if relevant)

7 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Tailwind breakpoints don't work in Gmail #2712

Description

Describe the Bug

Which package is affected (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Expected Behavior

What's your node version? (if relevant)

Activity

quintenb commented on Nov 27, 2025

akshaybabloo commented on Dec 13, 2025

jacobgad commented on Dec 13, 2025

akshaybabloo commented on Dec 13, 2025

kristianeboe commented on Jan 6, 2026

kristianeboe commented on Jan 6, 2026

gantoine commented on Jan 9, 2026

gabrielmfern commented on Jan 13, 2026

krisnaw commented on Jan 15, 2026

gabrielmfern commented on Jan 26, 2026

7 remaining items

Gyran commented on Jan 30, 2026

cossssmin commented on Feb 13, 2026

tomh4 commented on Feb 16, 2026

cjx-dev commented on Mar 18, 2026

cjx-dev commented on Mar 18, 2026

Ouranos27 commented on Mar 18, 2026

kristianeboe commented on Apr 4, 2026

Ouranos27 commented on Apr 9, 2026

redac commented on Apr 20, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions