Theme class name inconsistency with Tailwind

[call-a3]

• Component or Package Name: jsx-email
• Component or Package Version: 2.5.3
• @jsxp-email/cli Version?: N/A
• Operating System (or Browser): Chrome 131 on Xubuntu 22.04
• Node Version: 20.18.0
• Link to reproduction (⚠️ read below): https://stackblitz.com/edit/jsx-email-repro-qynrfyhs?file=emails%2Ftemplates%2FReproduction.tsx&view=editor

Expected Behavior

The Tailwind component detects and renders the css for all classNames used in its children, even when those are abstracted into separate React Components.

Actual Behavior

The Tailwind component seems to only detect classNames used in its direct children.

Additional Information

I believe this bug report/feature request is a duplicate of #73, albeit simpler since there was also a React hook involved there. I hope by adding a reproduction case this time, we will have more success in helping us find a solution.

[call-a3]

Update: some further experimentation on my end revealed that the problem wasn't with the Tailwind component itself, but probably due to a small incompatibility between tailwind itself and UnoCSS.

My tailwind config had a color declaration like this in the reproduction:

const theme = {
  colors: {
    "primary-accent": { DEFAULT: "#850c0c", contrast: "#fff" },
  },
};

It works when I replace that with.

const theme = {
  colors: {
    primaryAccent: { DEFAULT: "#850c0c", contrast: "#fff" },
  },
};

If I want to use a classname like "text-primary-accent", tailwind expects me to use the former syntax (it doesn't automatically turn the classname into kebab-case), the later would result in me having to use "text-primaryAccent".

Perhaps it might be good to put a disclaimer in the documentation that UnoCSS might need a slightly different configuration for the same functionality as plain Tailwind?

I'm also thinking I might create an upstream bug in UnoCSS if Tailwind compatibility is something they claim to support out of the box, but I'm not sure about that (haven't spotted it from a quick glance at their website). Any insights from anyone here?

[shellscape]

Thanks for reporting this and the additional triage.

I'm also thinking I might create an upstream bug in UnoCSS if Tailwind compatibility is something they claim to support out of the box, but I'm not sure about that (haven't spotted it from a quick glance at their website). Any insights from anyone here?

Yes, they have a preset that is supposed to be tailwind compatible. Here's a direct link to that preset: https://github.com/unocss/unocss/tree/main/packages/preset-wind

We'll leave this open here, but it definitely looks like an upstream bug in unocss. They're pretty good about addressing bugs like these quickly, and I would encourage you to open an issue there as well.

[shellscape]

In the meantime I'm going to update us to the new v0.65.0 version that was released last week.