Skip to content

Body component applies styles from Tailwind className directly to the <body> tag #2588

@iminlikewithyou

Description

@iminlikewithyou

Describe the Bug

When wrapping the Body component with the Tailwind component, creating styles via className will apply styles directly to the <body> component, which will be stripped in Yahoo and AOL according to the comment at

Yahoo and AOL remove all styles of the body element while converting it to a div,
so we need to apply them to to an inner cell.
.
className should instead be applied to the <td> within the Body component.

Which package is affected (leave empty if unsure)

@react-email/body

Link to the code that reproduces this issue

https://github.com/resend/react-email/blob/canary/packages/create-email/template/emails/vercel-invite-user.tsx

To Reproduce

Wrap a Body component in the Tailwind component, and style it using className. These styles are applied directly onto <body> instead of the table cell <td>.

Expected Behavior

The style should be applied to td, not body.

What's your node version? (if relevant)

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions