Tailwind Dark mode not working as expected

[john-griffin]

• Component or Package Name: Tailwind
• Component or Package Version: 1.10.5
• @jsxp-email/cli Version?:
• Operating System (or Browser): stackblitz / chrome
• Node Version: 18.18.0
• Link to reproduction (⚠️ read below): https://stackblitz.com/edit/jsx-email-repro-ctrqvy?file=templates%2FReproduction.tsx

Expected Behavior

Expect the email background to be black due to the dark:bg-black class on the body when previewing in dark mode browser.

Actual Behavior

Takes the light mode background style instead

Additional Information

Worked on react-email. Aware this is not going to work in all email clients.

[john-griffin]

Gist of HTML output from react-email that works as expected https://gist.github.com/john-griffin/fee98877edf1ef039e324dcd2760373f

[shellscape]

Alright we tracked this down to a difference between unocss and tailwind outlined here: https://unocss.dev/presets/mini#dark

Going to work on a potential builtin solution so users don't have to know they have to prefix darkmode variants with a @

For anyone running across this issue in the meantime, the solution is to use @dark:... instead of dark:...

[shellscape]

Fixed this in https://github.com/shellscape/jsx-email/pull/167