Tailwind print styles break gmail media query

[VeXell]

What versions are you using? (if relevant)

react-email@6.1.1, tailwindcss@4.2.4

Describe the Bug

I use react email with tailwind config:

<Tailwind
            config={{
                presets: [pixelBasedPreset],
                theme: {
                    screens: {
                        sm: '640px',
                        md: '768px',
                        lg: '1024px',
                    },
                    extend: {
                        screens: {
                            print: { raw: 'print' },
                        },
                    },
                },
            }}
        >

If i use print styles like:

<Section className="pb-3 md:pb-4">
     <Img src={image}  className="mx-auto print:invert" width="100%" />
</Section>

It generates media query with --tw variables which break Gmail parser and as result other media queries ignored by Gmail:

@media print{.print_invert{--tw-invert:invert(100%)!important;filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}}

Same problem if i use print border styles

<td align="center" valign="top"
   className="bg-white text-black font-bold px-4 py-2 text-2xl md:text-xl text-center print:border-solid print:border print:border-gray-100">

and result

@media print{.print_border-solid{--tw-border-style:solid!important;border-style:solid!important}}

and it worked fine with prev tailwind version v3 and it generate only one style

.print_invert {
          filter: invert(100%) !important
        }

What is affected (leave empty if unsure)

Tailwind Component

Link to the code that reproduces this issue

Please have a look https://github.com/VeXell/test-react-email and export html

To Reproduce

Send test email from dev mode or send exported html directly

Expected Behavior

Expect code without tailwind variables when using pixelBasedPreset

What's your node version? (if relevant)

No response

[Amitdwivedi22]

Hi maintainers,

I’d like to work on this issue regarding Tailwind print styles conflicting with Gmail media queries (#3480).

I have experience working with Tailwind CSS, responsive design, and email client compatibility issues, and I understand how tricky Gmail’s CSS parsing and media query handling can be—especially with print styles interfering unexpectedly.

My approach:
Reproduce the issue in a controlled environment (including Gmail rendering)
Analyze how Tailwind’s print utilities are being generated and injected
Identify conflicts with Gmail-specific media query behavior
Propose a fix that ensures:
Print styles don’t override or break Gmail styles
No regression in existing Tailwind functionality
Add proper test cases or documentation if needed

I’ll make sure the solution is clean, well-tested, and aligned with Tailwind’s design principles.

Please assign this issue to me—I’d be happy to contribute 🚀

Thanks!
Amit