Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
NickTiut opened this issue Jan 20, 2025 · 1 comment
Open

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

NickTiut opened this issue Jan 20, 2025 · 1 comment

Comments

@NickTiut
Copy link

NickTiut commented Jan 20, 2025

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.

Image
Image

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.

Image
Image

What's your node version? (if relevant)

20.4.0

@NickTiut NickTiut added the Type: Bug Confirmed bug label Jan 20, 2025
@matzexcom
Copy link

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

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants