[SwissArmyBud]

Overview

This PR serves as a bug fix candidate for #3845 - currently pixelBasedPreset is documented as the fix for Tailwind's rem units in email clients, but rounded-* and max-w-* still come out in rem.

Technical difficulties

pixelBasedPreset only overrides theme.extend.fontSize and theme.extend.spacing. Every other scale Tailwind defines in rem passes through unchanged:

Class	Before	After
rounded, rounded-sm	0.25rem	4px
rounded-md	0.375rem	6px
rounded-lg	0.5rem	8px
max-w-md	28rem	448px
max-w-7xl	80rem	1280px

Considered and rejected:

• Documenting it only (telling users to extend theme.borderRadius themselves). This works, but the preset's name and docs promise pixels, and each user has to rediscover the gap.
• Post-processing rem to px for every declaration. That would also change values users set deliberately, and em and calc() cases are not a plain multiply by 16. A scale-by-scale preset keeps the change explicit and opt-out-able, since a user's own theme still overrides it.

Each value is what the rem resolves to at a 16px root, matching how the existing spacing and fontSize scales were done.

Changes

• tailwind.tsx: pixelBasedPreset gains a borderRadius scale (DEFAULT, xs to 4xl) and a maxWidth scale (3xs to 7xl).
• tailwind.spec.tsx: regression tests for the converted classes, and one that checks no class in either scale still emits rem.
• A patch changeset for react-email.

Side effect worth a look: maxWidth is Tailwind's container scale, so w-md, min-w-md and the other container-sized widths also change from rem to px.

Not addressed: max-w-screen-* (breakpoints, 48rem) and tracking-* (em) still emit rem/em. Outlook on Windows ignores border-radius whatever the unit, so this does not give it rounded corners. I also noticed blur-sm rendering as filter:blur(var(--blur-sm)) with an unresolved variable; that looks like a separate bug.

Testing

• With the fix removed, the 8 new tests fail; with it, they pass. The whole Tailwind suite passes (151 tests), and tsc --noEmit and biome check are clean in packages/react-email.
• Not run: the other packages that import pixelBasedPreset (for example packages/ui), and real email clients.

Demo and evidence

A runnable before/after demo lives on a separate branch so it stays out of this PR:
aporter/2611-rem-from-pixelbasedpreset-demo.
Its README walks through it: cd packages/react-email && npx tsx demo/ab.tsx renders the same email with and without the new scales and prints the rem values found in each, all to local HTML for review. The branch also holds captured evidence (evidence-02.txt to evidence-07.txt: the published-package baseline, per-class output, the scan of Tailwind's rem scales, and the mutation check for the tests).

---

Summary by cubic

Converts the pixelBasedPreset's border radius and max width scales to pixels, so rounded-* and max-w-* classes no longer emit rem. Previously the preset only overrode fontSize and spacing, leaving these scales in rem values that don't render reliably in email clients.

Side effects

• Because maxWidth is Tailwind's container scale, container-sized w-* and min-w-* classes also switch from rem to pixels.
• max-w-screen-* and tracking-* still emit rem/em.
• Adds regression tests, updates affected snapshots in react-email and ui, and a patch changeset.

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

[vercel]

@SwissArmyBud is attempting to deploy a commit to the resend Team on Vercel.

A member of the Team first needs to authorize it.

[changeset-bot]

🦋 Changeset detected

Latest commit: c6b81d8

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

[pkg-pr-new]

Open in StackBlitz

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

commit: dddc6fd