What versions are you using? (if relevant)
@react-email/components@1.0.8, react-email@5.2.9
Describe the Bug
Upon migrating to the latest version of react email components that ships with Tailwind v4, media queries stopped working in Android Gmail. This issue isn't reproducible on Web within the preview as these features are widely available in standard browser environment, however they are too modern for other email clients.
Tailwind v4 is using this syntax to render styles for various breakpoints
.sm_text-red {
@media (width>=500px){
color:red!important
}
}Whereas the previous version that worked was using this syntax
@media (min-width:500px){
.sm_text-red {
color:red!important
}
}What is affected (leave empty if unsure)
Tailwind Component
Link to the code that reproduces this issue
import { Body, Head, Html, Text, Tailwind } from '@react-email/components';
const Foo = () => {
return (
<Tailwind config={{
theme: {
screens: {
sm: '500px',
}
}
}}>
<Html>
<Head />
<Body>
<Text className="text-lg text-[red] max-sm:text-[green]">
Red on large, green on small
</Text>
</Body>
</Html>
</Tailwind>
);
};
export default Foo;To Reproduce
Send yourself an email from Preview server and open the email in Gmail on your phone. Observe that media query is not applying green colour to the text.
Expected Behavior
Media queries cannot be nested and cannot use <= / >= range operators to be compatible with mobile Gmail.
Code that works using a hacky solution that entirely bypasses tailwind breakpoint variants
import { Body, Head, Html, Text, Tailwind } from '@react-email/components';
const Foo = () => {
return (
<Tailwind>
<Html>
<Head>
<style>{`
@media (max-width: 500px) {
.text-green-on-small {
color: green !important;
}
}
`}
</style>
</Head>
<Body>
<Text className="text-lg text-[red] text-green-on-small">
Red on large, green on small
</Text>
</Body>
</Html>
</Tailwind>
);
};
export default Foo;What's your node version? (if relevant)
No response
What versions are you using? (if relevant)
@react-email/components@1.0.8, react-email@5.2.9
Describe the Bug
Upon migrating to the latest version of react email components that ships with Tailwind v4, media queries stopped working in Android Gmail. This issue isn't reproducible on Web within the preview as these features are widely available in standard browser environment, however they are too modern for other email clients.
Tailwind v4 is using this syntax to render styles for various breakpoints
Whereas the previous version that worked was using this syntax
What is affected (leave empty if unsure)
Tailwind Component
Link to the code that reproduces this issue
To Reproduce
Send yourself an email from Preview server and open the email in Gmail on your phone. Observe that media query is not applying green colour to the text.
Expected Behavior
Media queries cannot be nested and cannot use <= / >= range operators to be compatible with mobile Gmail.
Code that works using a hacky solution that entirely bypasses tailwind breakpoint variants
What's your node version? (if relevant)
No response