Describe the Bug

When using a custom tailwind config with a safelist, and using responsive tailwind classes, the generated HTML has a style tag with tailwind directives. These directives are invalid CSS which would seem to cause gmail to ignore the style tag entirely.

The directives can be seen in the dev servers code preview pane and in the HTML files generated with the export command.

Dev server Preview

HTML file

When testing emails with an email testing service, some styling was not looking right in some gmail clients. After some debugging, I realized that styles defined in the style tag were only respected when I removed the tailwind directives.

The provided minimal reproduction has 2 emails, one using a custom tailwind config and another that uses the same tailwind config with a safelist added. I have also included the HTML files for both emails generated with the export command.

Which package is affected (leave empty if unsure)

@react-email/tailwind

Link to the code that reproduces this issue

https://github.com/summer-jordan/tw-directive-bug-repro/

To Reproduce

1. Create a new project with: pnpm create email
2. Create an email that uses the Tailwind component
3. Define a tailwind config that has a safelist defined with at least one class
4. Add a responsive tailwind class to the email: md:p-4 (This is required so that a style tag is created)
5. Run the dev server and view the HTML preview (directives will be in the style tag)
6. Run the export command (directives will be in the style tag)

Expected Behavior

There should be no tailwind directives in the HTML.

What's your node version? (if relevant)

22.14.0