Media queries use nested syntax with unsupported ranges <= operators #3009

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