feat(tailwind): pixelBasedPreset export (#2326)

gabrielmfern · web-flow · commit ce78a049e8ae · 2025-07-11T09:38:46.000-03:00
diff --git a/.changeset/quiet-jeans-own.md b/.changeset/quiet-jeans-own.md
@@ -0,0 +1,5 @@
+---
+"@react-email/tailwind": minor
+---
+
+add pixelBasedPreset export directly
diff --git a/.changeset/social-walls-stand.md b/.changeset/social-walls-stand.md
@@ -0,0 +1,5 @@
+---
+"@react-email/components": minor
+---
+
+tailwind: add pixelBasedPreset export directly
diff --git a/apps/demo/emails/notifications/vercel-invite-user.tsx b/apps/demo/emails/notifications/vercel-invite-user.tsx
@@ -10,6 +10,7 @@ import {
   Img,
   Link,
   Preview,
+  pixelBasedPreset,
   Row,
   Section,
   Tailwind,
@@ -48,7 +49,11 @@ export const VercelInviteUserEmail = ({
   return (
     <Html>
       <Head />
-      <Tailwind>
+      <Tailwind
+        config={{
+          presets: [pixelBasedPreset],
+        }}
+      >
         <Body className="mx-auto my-auto bg-white px-2 font-sans">
           <Preview>{previewText}</Preview>
           <Container className="mx-auto my-[40px] max-w-[465px] rounded border border-[#eaeaea] border-solid p-[20px]">
diff --git a/apps/demo/emails/welcome/netlify-welcome.tsx b/apps/demo/emails/welcome/netlify-welcome.tsx
@@ -9,6 +9,7 @@ import {
   Img,
   Link,
   Preview,
+  pixelBasedPreset,
   Row,
   Section,
   Tailwind,
@@ -40,6 +41,7 @@ export const NetlifyWelcomeEmail = ({
       <Head />
       <Tailwind
         config={{
+          presets: [pixelBasedPreset],
           theme: {
             extend: {
               colors: {
diff --git a/apps/docs/components/tailwind.mdx b/apps/docs/components/tailwind.mdx
@@ -47,12 +47,13 @@ pnpm add @react-email/tailwind -E
 Add the component around your email body content.
 
 ```jsx
-import { Tailwind, Button } from "@react-email/components";
+import { Tailwind, pixelBasedPreset, Button } from "@react-email/components";
 
 const Email = () => {
   return (
     <Tailwind
       config={{
+        presets: [pixelBasedPreset],
         theme: {
           extend: {
             colors: {
@@ -83,77 +84,9 @@ const Email = () => {
 <Info>
     Most email clients are style-limited and some styles may not work.
     
-    One example of this is how Tailwind uses `rem` as its main unit for 
-    better accessibility. This is not supported by [some email
-    clients](https://www.caniemail.com/features/css-unit-rem/), if you want you
-    can override the Tailwind config.
-
-    We can't really apply this configuration for you as it would have a few
-    drawbacks. In the future, we will probably provide a preset to remediate this.
-    But, for now, here's a good starter configuration you can use to avoid these issues:
-
-    <Accordion title="Tailwind configuration with px instead of rem">
-        ```typescript tailwind.config.ts
-        import type { TailwindConfig } from "@react-email/tailwind";
-
-        export default {
-          theme: {
-            fontSize: {
-              xs: ["12px", { lineHeight: "16px" }],
-              sm: ["14px", { lineHeight: "20px" }],
-              base: ["16px", { lineHeight: "24px" }],
-              lg: ["18px", { lineHeight: "28px" }],
-              xl: ["20px", { lineHeight: "28px" }],
-              "2xl": ["24px", { lineHeight: "32px" }],
-              "3xl": ["30px", { lineHeight: "36px" }],
-              "4xl": ["36px", { lineHeight: "36px" }],
-              "5xl": ["48px", { lineHeight: "1" }],
-              "6xl": ["60px", { lineHeight: "1" }],
-              "7xl": ["72px", { lineHeight: "1" }],
-              "8xl": ["96px", { lineHeight: "1" }],
-              "9xl": ["144px", { lineHeight: "1" }],
-            },
-            spacing: {
-              px: "1px",
-              0: "0",
-              0.5: "2px",
-              1: "4px",
-              1.5: "6px",
-              2: "8px",
-              2.5: "10px",
-              3: "12px",
-              3.5: "14px",
-              4: "16px",
-              5: "20px",
-              6: "24px",
-              7: "28px",
-              8: "32px",
-              9: "36px",
-              10: "40px",
-              11: "44px",
-              12: "48px",
-              14: "56px",
-              16: "64px",
-              20: "80px",
-              24: "96px",
-              28: "112px",
-              32: "128px",
-              36: "144px",
-              40: "160px",
-              44: "176px",
-              48: "192px",
-              52: "208px",
-              56: "224px",
-              60: "240px",
-              64: "256px",
-              72: "288px",
-              80: "320px",
-              96: "384px",
-            },
-          },
-        } satisfies TailwindConfig;
-        ```
-    </Accordion>
+    One example of this is how Tailwind uses `rem` as its main unit for better accessibility. This
+    is not supported by [some email clients](https://www.caniemail.com/features/css-unit-rem/), and
+    the `pixelBasedPreset` changes it so that the styles are based on `16px` instead.
 </Info>
 
 ## Live example
diff --git a/packages/preview-server/src/utils/__snapshots__/get-email-component.spec.ts.snap b/packages/preview-server/src/utils/__snapshots__/get-email-component.spec.ts.snap
@@ -13,7 +13,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
     <!--$-->
   </head>
   <body
-    style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:0.5rem;padding-right:0.5rem;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
+    style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:8px;padding-right:8px;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
     <div
       style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
       data-skip-in-text="true">
@@ -48,14 +48,14 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
                       alt="Vercel Logo"
                       height="37"
                       src="/static/vercel-logo.png"
-                      style="margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;display:block;outline:none;border:none;text-decoration:none"
+                      style="margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;display:block;outline:none;border:none;text-decoration:none"
                       width="40" />
                   </td>
                 </tr>
               </tbody>
             </table>
             <h1
-              style="margin-left:0px;margin-right:0px;margin-top:30px;margin-bottom:30px;padding:0px;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
+              style="margin-left:0;margin-right:0;margin-top:30px;margin-bottom:30px;padding:0;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
               Join <strong>Enigma</strong> on <strong>Vercel</strong>
             </h1>
             <p
@@ -162,7 +162,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
               >
             </p>
             <hr
-              style="margin-left:0px;margin-right:0px;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
+              style="margin-left:0;margin-right:0;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
             <p
               style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom:16px">
               This invitation was intended for<!-- -->
diff --git a/packages/react-email/src/commands/testing/__snapshots__/export.spec.ts.snap b/packages/react-email/src/commands/testing/__snapshots__/export.spec.ts.snap
@@ -11,7 +11,7 @@ exports[`email export 1`] = `
     <!--$-->
   </head>
   <body
-    style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:0.5rem;padding-right:0.5rem;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
+    style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:8px;padding-right:8px;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
     <div
       style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
       data-skip-in-text="true">
@@ -46,14 +46,14 @@ exports[`email export 1`] = `
                       alt="Vercel Logo"
                       height="37"
                       src="/static/vercel-logo.png"
-                      style="margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;display:block;outline:none;border:none;text-decoration:none"
+                      style="margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;display:block;outline:none;border:none;text-decoration:none"
                       width="40" />
                   </td>
                 </tr>
               </tbody>
             </table>
             <h1
-              style="margin-left:0px;margin-right:0px;margin-top:30px;margin-bottom:30px;padding:0px;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
+              style="margin-left:0;margin-right:0;margin-top:30px;margin-bottom:30px;padding:0;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
               Join <strong></strong> on <strong>Vercel</strong>
             </h1>
             <p
@@ -153,7 +153,7 @@ exports[`email export 1`] = `
                 target="_blank"></a>
             </p>
             <hr
-              style="margin-left:0px;margin-right:0px;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
+              style="margin-left:0;margin-right:0;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
             <p
               style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom:16px">
               This invitation was intended for<!-- -->
diff --git a/packages/tailwind/src/tailwind.tsx b/packages/tailwind/src/tailwind.tsx
@@ -34,6 +34,63 @@ export interface EmailElementProps {
   style?: React.CSSProperties;
 }
 
+export const pixelBasedPreset: TailwindConfig = {
+  theme: {
+    fontSize: {
+      xs: ['12px', { lineHeight: '16px' }],
+      sm: ['14px', { lineHeight: '20px' }],
+      base: ['16px', { lineHeight: '24px' }],
+      lg: ['18px', { lineHeight: '28px' }],
+      xl: ['20px', { lineHeight: '28px' }],
+      '2xl': ['24px', { lineHeight: '32px' }],
+      '3xl': ['30px', { lineHeight: '36px' }],
+      '4xl': ['36px', { lineHeight: '36px' }],
+      '5xl': ['48px', { lineHeight: '1' }],
+      '6xl': ['60px', { lineHeight: '1' }],
+      '7xl': ['72px', { lineHeight: '1' }],
+      '8xl': ['96px', { lineHeight: '1' }],
+      '9xl': ['144px', { lineHeight: '1' }],
+    },
+    spacing: {
+      px: '1px',
+      0: '0',
+      0.5: '2px',
+      1: '4px',
+      1.5: '6px',
+      2: '8px',
+      2.5: '10px',
+      3: '12px',
+      3.5: '14px',
+      4: '16px',
+      5: '20px',
+      6: '24px',
+      7: '28px',
+      8: '32px',
+      9: '36px',
+      10: '40px',
+      11: '44px',
+      12: '48px',
+      14: '56px',
+      16: '64px',
+      20: '80px',
+      24: '96px',
+      28: '112px',
+      32: '128px',
+      36: '144px',
+      40: '160px',
+      44: '176px',
+      48: '192px',
+      52: '208px',
+      56: '224px',
+      60: '240px',
+      64: '256px',
+      72: '288px',
+      80: '320px',
+      96: '384px',
+    },
+  },
+};
+
 export const Tailwind: React.FC<TailwindProps> = ({ children, config }) => {
   const tailwind = setupTailwind(config ?? {});
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@react-email/tailwind": minor
 +---
++
 +add pixelBasedPreset export directly