fix(react-email): responsive padding not applying to inner td for Container and Section

[gabrielmfern]

Fixes #3693. Section and Container put padding on the inner td, but Tailwind left every non-inlinable class on the table, so a max-sm:px-5 media rule stacked on top of the px-9 base padding instead of overriding it. Instead of teaching Tailwind about Section, markAsElement now accepts a resolveTailwind option: Tailwind hands the marked component its inlined style, the residual classes, and the CSS properties each class sets, and the component decides which props they become. Section and Container use it to move padding-only classes onto the td, and the option is exported so user components can do the same. Components that don't pass it keep the previous behavior.

Claude ran the repro from the issue against the branch. Relevant tags from the output:

<style>@media (max-width:40rem){.max-sm_hidden{display:none!important}}@media (max-width:40rem){.max-sm_p-2{padding:0.5rem!important}}@media (max-width:40rem){.max-sm_px-5{padding-right:1.25rem!important;padding-left:1.25rem!important}}</style>
<td class="max-sm_px-5" style="padding-right:2.25rem;padding-left:2.25rem">
<table align="center" width="100%" class="max-sm_hidden" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:37.5em">
<td class="max-sm_p-2" style="padding:1rem">

The second pair is <Container className="max-sm:p-2 p-4 max-sm:hidden">, showing a non-padding class staying on the table.

---

Summary by cubic

Fixes responsive padding classes like max-sm:px-5 on <Section> and <Container> so they override the base padding instead of stacking on top of it.

Migration

• markAsElement now accepts an optional resolveTailwind option; components that don't pass it keep the previous behavior.
• The option and its types (ElementOptions, ResolvedTailwind) are exported from the package entry point.

^{Written for commit fc387e4. Summary will update on new commits.}

[changeset-bot]

🦋 Changeset detected

Latest commit: fc387e4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
react-email	Patch
@react-email/editor	Patch
@react-email/ui	Patch

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
react-email	Ready	Preview	Sep 8, 2026 5:45pm UTC
react-email-demo	Ready	Preview	Sep 8, 2026 5:45pm UTC

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/react-email@3733

commit: fc387e4

[cubic-dev-ai]

Running ultrareview automatically — This changes the core Tailwind element-cloning pipeline and public markAsElement API, affecting responsive CSS placement and residual classes across custom components, while Section and Container markup semantics are also refactored and only lightly tested.. I'll post findings when complete.

[cubic-dev-ai]

Ultrareview completed in 11m 17s

All reported issues were addressed across 7 files

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[cubic-dev-ai]

Review completed against the latest diff

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[klotty]

0 issues found across 4 files (changes from recent commits).

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

<sub>Auto-approved: Fixes responsive padding on Section/Container by adding an optional resolveTailwind hook that routes padding-only classes to the inner td; backwards-compatible and covered by a new test.

Re-trigger cubic</sub>