Tailwind color-scheme media classes are only added on body tag

[NickTiut]

Describe the Bug

If you are using the latest version of @react-email/components: 0.0.32 the Tailwind media classes are only added on the body, all other generated html tags have a class of dark:text-green-500 and are not using the dark_text-green-500 generated in the <style> tag. I believe there was an issue introduced in @react-email/tailwind 1.0.1 maybe?

Which package is affected (leave empty if unsure)

@react-email/tailwind

Link to the code that reproduces this issue

https://github.com/NickTiut/react-email-bug

To Reproduce

Run npm run dev on the example provided and open in browser dark mode. The color of the text should be green, instead it it red.

Expected Behavior

The color of the text should be green, instead it it red. If you switch the version in package.json to "@react-email/components": "0.0.23" it behaves as expected.

What's your node version? (if relevant)

20.4.0

[matzexcom]

We have the same problem with dark media queries. It does not seem related to the body tag; it behaves weirdly depending on the number of children. It works if I remove some children, but if I add some, it will break again.

Here is a code sandbox link: darkmode.tsx is where it breaks, and darkmode2.tsx is where media queries are correctly replaced.

https://codesandbox.io/p/devbox/react-email-wmyy2d

[ValentinH]

I just faced the same issue after updating the components package. It also depends on the number of components I use. Removing some of them fixes the issue.

[matzexcom]

@gabrielmfern can we help somehow? Is there a chance that the pr #1929 will be merged?

[gabrielmfern]

Very sorry for taking this long to fix this. Should be fixed in the latest @react-email/components and @react-email/tailwind!