Tailwind breakpoints don't work in Gmail #2712
Description
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