fix(tailwind): not all React Email components having styles inlined into their props#3592
Conversation
Section was not in componentsToTreatAsElements, so the Tailwind walker left its className on the rendered <table> and inlined every utility onto that table, bypassing Section's own padding-to-<td> split. Treat Section like Container so padding utilities reach the <td> (Outlook/ Klaviyo compatibility), the same as style-prop padding already does.
|
@yashs33244 is attempting to deploy a commit to the resend Team on Vercel. A member of the Team first needs to authorize it. |
🦋 Changeset detectedLatest commit: bf06fe0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
No issues found across 3 files
Confidence score: 5/5
- Automated review surfaced no issues in the provided summaries.
- No files require special attention.
Auto-approved: Small fix adding Section to the Tailwind element list so padding utilities route to the inner , matching Container's behavior. Includes a regression test and changeset. No business logic, infrastructure, or security impact.
Re-trigger cubic
gabrielmfern
left a comment
gabrielmfern
left a comment
There was a problem hiding this comment.
This is a great catch! Thank you!
We should make sure that all components are there too. Can you do that?
Extends the Section fix to the other layout primitives so a class like <Column className="p-4"> / <Row className="p-4"> inlines onto the component's own tag. Html/Head are left out (they must be walked for the <head> style injection) and Markdown is left out (its explicit style prop would override the injected one).
|
Done, went through all the components. Added A few I left out on purpose:
One honest note: |
gabrielmfern
changed the title
gabrielmfern
changed the title
commit: |
Signed-off-by: gabriel miranda <gabriel@resend.com>
What
Sectionsplits itsstyleso that padding goes to the inner<td>and everything else to the outer<table>- this is the Outlook/Klaviyo compatibility split. But when padding is set through a Tailwind class instead ofstyle, it lands on the<table>and the<td>is bare:Sectionis missing fromcomponentsToTreatAsElements, soisComponent(Section)istrue. The Tailwind walker therefore rendersSectionwith itsclassNamestill attached, whichSectionspreads onto the<table>, and then inlines every utility onto that plain<table>- bypassing the<td>split.Container(which has the same split) is already in the list.Fix
Add
SectiontocomponentsToTreatAsElementsso its Tailwind styles are inlined onto itsstyleprop, letting the existing split route padding to the<td>:// -> <table style="background-color:…"><tbody><tr><td style="padding:1rem">x</td>…Two lines (import + array entry), matching
Container. Added a regression test; all tailwind/section/container/row/column tests pass.Summary by cubic
Fix Tailwind utilities on
Section,Row, andColumnso classes inline onto the correct tag.Sectionnow routes padding to the inner<td>for Outlook/Klaviyo;Row/Columninline onto their own tags, matchingstylebehavior andContainer.Section,Row, andColumnas elements in the Tailwind walker so utilities inline intostyle, enablingSection’s padding-to-<td>split.<Section className="p-4">,<Row className="p-4">, and<Column className="p-4">.Written for commit bf06fe0. Summary will update on new commits.