Tailwind v4 Breakpoints Broken in Gmail: Why and How to Fix

The fix for React Email: react-email 6.9.1 or later

React Email fixed this upstream in two steps. In react-email 6.0.7 (May 2026, PR #3086), the <Tailwind> component started flattening nested media rules and rewriting range queries as min-width and max-width. In 6.9.1 (July 2026, PR #3674), it caught up with Tailwind 4.3.3, which changed the shape of its output. On an older version with Tailwind 4.3.3 or later, dark: and sm: values are inlined as the base style and the @media rule is dropped: dark colours show in light mode, and the mobile layout shows on desktop.

The @react-email/components and @react-email/tailwind packages are deprecated on npm. The components now ship in react-email:

npm uninstall @react-email/components @react-email/tailwind
npm install react-email@latest   # 6.9.1 or later

// before
import { Tailwind } from "@react-email/components";
// after
import { Tailwind } from "react-email";

The component also converts oklch colours to comma rgb() and resolves CSS variables. One case stays nested on purpose: a pseudo-class rule such as &:hover, which the downleveling leaves as it is.

What Tailwind v4 writes, and what each client does with it

Up to 4.3.2, a breakpoint utility compiles to this. Every browser reads it. Three things in it fail in email:

/* Tailwind v4 up to 4.3.2: @media nested in the rule, range syntax */
.sm\:bg-red-300 {
  @media (width >= 40rem) {
    background-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */
  }
}

• The nesting. The @media rule sits inside the selector. Gmail, Outlook and Yahoo do not support CSS nesting. Yahoo and AOL remove the nested selector, so its properties apply to the parent selector instead. Tailwind 4.3.3 and later wrap the rule in the @media instead, which removes this problem for breakpoints.
• The range syntax. (width >= 40rem) is Media Queries Level 4. In our real-device probe of 14 October 2026, the Gmail app on an Android 9 phone, Apple Mail on an iPhone 13 and an older Apple Mail on Mac all ignored (width < 9999px), while (max-width: 9999px) applied on all three. Older rendering engines do not read the new form, and some of your readers are on one.
• The colour. The palette is oklch, behind a CSS variable. Gmail supports neither.

Gmail, cell by cell, from the Emailens engine's data:

• Not supportednesting is not supported in Gmail.Tailwind up to 4.3.2 nests every sm:, md: and dark: rule. Flatten it before it ships.
• Partial@media is partly supported in Gmail.Kept in the head, for width queries. Gmail's apps drop the <style> block for accounts that are not Google accounts.
• Not supportedmodern-color is not supported in Gmail.oklch() is Tailwind v4's default palette. In a style attribute it removes every inline style on the element.
• Partialrgb is partly supported in Gmail.The space syntax, rgb(0 0 0 / 1), removes the whole <style> block. Write it with commas.
• Not supportedcustom-properties is not supported in Gmail.Tailwind v4 references var(--color-…) for every colour. Resolve the variables at build time.

If you build the CSS yourself: what the output must look like

A custom pipeline that calls Tailwind's compile().build() and puts the result in a <style> tag skips the step that downlevels CSS for browsers. Before the CSS reaches an email, make four changes:

1. Move each nested @media to the top level, with the selector inside it.
2. Rewrite range queries: (width >= 40rem) becomes (min-width: 40rem), and (width < 40rem) becomes (max-width: 40rem).
3. Replace every var() with its value.
4. Convert oklch and space-separated rgb() to hex or comma rgb().

/* What every client can read: flat, min-width, a plain colour */
@media (min-width: 40rem) {
  .sm_bg-red-300 {
    background-color: rgb(255, 162, 162) !important;
  }
}

The colour step matters as much as the breakpoints, because Gmail's failure is bigger than one property:

<!-- Gmail drops every inline style on this cell, padding included -->
<td style="padding: 24px; background-color: oklch(96.7% 0.003 264.542);">

<!-- Gmail removes this whole <style> block -->
<style>
  .card { background-color: rgb(248 250 252 / 1); }
  .btn  { padding: 12px 24px; }
</style>

<td style="padding: 24px; background-color: #f3f4f6;">

<style>
  .card { background-color: rgb(248, 250, 252); }
  .btn  { padding: 12px 24px; }
</style>

The space-separated colour is the cause in two public Maizzle threads (#824, #1192) where production builds lost their styles in Gmail. Emailens flags both forms as errors and counts the elements affected.

Downleveling gets the media queries back, but Gmail keeps the <style> block only in the head and within a size limit; see what Gmail's sanitizer keeps. For how breakpoints fit a mobile-first email layout, see the responsive email design guide, and for other React Email and jsx-email rendering bugs, the React Email troubleshooting guide.