Tailwind doesn't override `Text` element styles

johnpyp commented 7 months ago

Component or Package Name: jsx-email
Component or Package Version: 1.2.0
@jsxp-email/cli Version?: N/A
Operating System (or Browser): Linux
Node Version: 20.10.0
Link to reproduction (⚠️ read below): https://stackblitz.com/edit/jsx-email-repro-ut97pr?file=templates%2FReproduction.tsx

Expected Behavior

Text component either shouldn't have default inline styles, or they should be somehow overrideable by the Tailwind class being present. It also isn't enough to do something like style={{}} to clear it currently.

Actual Behavior

Text component has hardcoded styles that override tailwind classes. Like in the example, the text-2xl class is present and ends up in the compiled html, but because of the style tag on the Text component, it doesn't matter.

Additional Information

This happens with and without the production flag set.

shellscape commented 7 months ago

Thanks for the issue. Have you tried the ! tailwind class prefix to override?

shellscape commented 6 months ago

In v1.3.0 we introduced disableDefaultStyle for components which have a default style like Text. In cases where ! doesn't work, using that prop will get you around any overriding issues.

shellscape / jsx-email