From dddc6fdcb2b41b7225a1ba5a2fbd5ff46c361ba8 Mon Sep 17 00:00:00 2001 From: Andrew Porter Date: Sun, 1 Nov 2026 11:46:59 -0800 Subject: [PATCH 1/2] fix(react-email): convert border radius and max width to px in pixelBasedPreset --- .../pixel-based-preset-radius-max-width.md | 5 ++ .../src/components/tailwind/tailwind.spec.tsx | 51 ++++++++++++++++++- .../src/components/tailwind/tailwind.tsx | 26 ++++++++++ 3 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 .changeset/pixel-based-preset-radius-max-width.md diff --git a/.changeset/pixel-based-preset-radius-max-width.md b/.changeset/pixel-based-preset-radius-max-width.md new file mode 100644 index 0000000000..04e1fe4bdf --- /dev/null +++ b/.changeset/pixel-based-preset-radius-max-width.md @@ -0,0 +1,5 @@ +--- +"react-email": patch +--- + +Make `pixelBasedPreset` also convert the border radius and max width scales to pixels, so `rounded-*` and `max-w-*` no longer emit `rem`. diff --git a/packages/react-email/src/components/tailwind/tailwind.spec.tsx b/packages/react-email/src/components/tailwind/tailwind.spec.tsx index 5268011e8e..df05cad2c1 100644 --- a/packages/react-email/src/components/tailwind/tailwind.spec.tsx +++ b/packages/react-email/src/components/tailwind/tailwind.spec.tsx @@ -13,7 +13,7 @@ import { Link } from '../link/index.js'; import { Row } from '../row/index.js'; import { Section } from '../section/index.js'; import type { TailwindConfig } from './tailwind.js'; -import { Tailwind } from './tailwind.js'; +import { pixelBasedPreset, Tailwind } from './tailwind.js'; describe('Tailwind component', () => { const headMissingError = @@ -1458,4 +1458,53 @@ describe('Tailwind component', () => { `); }); }); + + describe('with pixelBasedPreset', () => { + const styleFor = async (className: string) => { + const html = await render( + +
+ , + ); + return html.match(/style="([^"]*)"/)?.[1]; + }; + + it.each([ + ['rounded', 'border-radius:4px'], + ['rounded-sm', 'border-radius:4px'], + ['rounded-md', 'border-radius:6px'], + ['rounded-lg', 'border-radius:8px'], + ['rounded-4xl', 'border-radius:32px'], + ['max-w-md', 'max-width:448px'], + ['max-w-7xl', 'max-width:1280px'], + ])('converts %s to pixels', async (className, expected) => { + expect(await styleFor(className)).toBe(expected); + }); + + it('does not leave rem in the radius or max-width scales', async () => { + const classes = [ + ...['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].map( + (size) => `rounded-${size}`, + ), + ...[ + '3xs', + '2xs', + 'xs', + 'sm', + 'md', + 'lg', + 'xl', + '2xl', + '3xl', + '4xl', + '5xl', + '6xl', + '7xl', + ].map((size) => `max-w-${size}`), + ]; + for (const className of classes) { + expect(await styleFor(className), className).not.toContain('rem'); + } + }); + }); }); diff --git a/packages/react-email/src/components/tailwind/tailwind.tsx b/packages/react-email/src/components/tailwind/tailwind.tsx index 9d7484c4b9..48d9d15881 100644 --- a/packages/react-email/src/components/tailwind/tailwind.tsx +++ b/packages/react-email/src/components/tailwind/tailwind.tsx @@ -74,6 +74,32 @@ export const pixelBasedPreset: TailwindConfig = { 80: '320px', 96: '384px', }, + borderRadius: { + DEFAULT: '4px', + xs: '2px', + sm: '4px', + md: '6px', + lg: '8px', + xl: '12px', + '2xl': '16px', + '3xl': '24px', + '4xl': '32px', + }, + maxWidth: { + '3xs': '256px', + '2xs': '288px', + xs: '320px', + sm: '384px', + md: '448px', + lg: '512px', + xl: '576px', + '2xl': '672px', + '3xl': '768px', + '4xl': '896px', + '5xl': '1024px', + '6xl': '1152px', + '7xl': '1280px', + }, }, }, }; From c6b81d8104c4d34cd84b2bf489f010ce46a5441f Mon Sep 17 00:00:00 2001 From: Felipe Freitag Date: Fri, 13 Nov 2026 10:22:13 -0300 Subject: [PATCH 2/2] test: update snapshots for px border radius in pixelBasedPreset --- packages/react-email/src/cli/commands/testing/export.spec.ts | 4 ++-- packages/ui/src/utils/get-email-component.spec.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-email/src/cli/commands/testing/export.spec.ts b/packages/react-email/src/cli/commands/testing/export.spec.ts index da17efaa94..7f5963247b 100644 --- a/packages/react-email/src/cli/commands/testing/export.spec.ts +++ b/packages/react-email/src/cli/commands/testing/export.spec.ts @@ -58,7 +58,7 @@ test('email export', { retry: 3 }, async () => { cellpadding="0" cellspacing="0" role="presentation" - style="max-width:465px;margin-right:auto;margin-left:auto;margin-bottom:40px;margin-top:40px;border-radius:0.25rem;border-style:solid;border-width:1px;border-color:rgb(234,234,234)"> + style="max-width:465px;margin-right:auto;margin-left:auto;margin-bottom:40px;margin-top:40px;border-radius:4px;border-style:solid;border-width:1px;border-color:rgb(234,234,234)"> @@ -167,7 +167,7 @@ test('email export', { retry: 3 }, async () => { { cellpadding="0" cellspacing="0" role="presentation" - style="max-width:465px;margin-right:auto;margin-left:auto;margin-bottom:40px;margin-top:40px;border-radius:0.25rem;border-style:solid;border-width:1px;border-color:rgb(234,234,234)"> + style="max-width:465px;margin-right:auto;margin-left:auto;margin-bottom:40px;margin-top:40px;border-radius:4px;border-style:solid;border-width:1px;border-color:rgb(234,234,234)"> @@ -179,7 +179,7 @@ describe('getEmailComponent()', () => {