fix(tailwind): route Section padding to the inner td#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: 12ec10f 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?
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 padding on
Sectionso utilities likep-4apply to the inner<td>, not the outer<table>, restoring Outlook/Klaviyo compatibility. Matches existing style-prop behavior and alignsSectionwithContainer.Sectionas an element in the Tailwind walker to inline utilities intostyle, letting the padding split route to the<td>.<Section className="bg-white p-4">.Written for commit 12ec10f. Summary will update on new commits.