resend · gabrielmfern · Oct 17, 2025 · Aug 19, 2025 · Aug 19, 2025 · Aug 19, 2025
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-email/components",
-  "version": "0.5.7",
+  "version": "1.0.0-tailwindv4.6",
   "description": "A collection of all components React Email.",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -58,7 +58,7 @@
     "@react-email/render": "workspace:1.4.0",
     "@react-email/row": "workspace:0.0.12",
     "@react-email/section": "workspace:0.0.16",
-    "@react-email/tailwind": "workspace:1.2.2",
+    "@react-email/tailwind": "workspace:2.0.0-tailwindv4.4",
     "@react-email/text": "workspace:0.1.5"
   },
   "peerDependencies": {

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
@@ -12,8 +12,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
     <meta name="x-apple-disable-message-reformatting" />
     <!--$-->
   </head>
-  <body
-    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"'>
+  <body style="background-color:rgb(255,255,255)">
     <table
       border="0"
       width="100%"
@@ -24,7 +23,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
       <tbody>
         <tr>
           <td
-            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"'>
+            style='margin-right:auto;margin-left:auto;margin-bottom:auto;margin-top:auto;background-color:rgb(255,255,255);padding-right:8px;padding-left: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">
@@ -40,7 +39,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
               cellpadding="0"
               cellspacing="0"
               role="presentation"
-              style="margin-left:auto;margin-right:auto;margin-top:40px;margin-bottom:40px;max-width:465px;border-radius:0.25rem;border-width:1px;border-color:rgb(234,234,234);border-style:solid;padding:20px">
+              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);padding:20px">
               <tbody>
                 <tr style="width:100%">
                   <td>
@@ -59,26 +58,26 @@ 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:0;margin-bottom:0;display:block;outline:none;border:none;text-decoration:none"
+                              style="display:block;outline:none;border:none;text-decoration:none;margin-right:auto;margin-left:auto;margin-bottom:0;margin-top:0"
                               width="40" />
                           </td>
                         </tr>
                       </tbody>
                     </table>
                     <h1
-                      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)">
+                      style="margin-right:0;margin-left:0;margin-bottom:30px;margin-top: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
-                      style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
                       Hello
                       <!-- -->alanturing<!-- -->,
                     </p>
                     <p
-                      style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
                       <strong>Alan</strong> (<a
                         href="mailto:[email protected]"
-                        style="color:rgb(37,99,235);text-decoration-line:none"
+                        style="color:rgb(21,93,252);text-decoration-line:none"
                         target="_blank"
                         >[email protected]</a
                       >) has invited you to the <strong>Enigma</strong> team on<!-- -->
@@ -110,7 +109,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
                                       alt="alanturing&#x27;s profile picture"
                                       height="64"
                                       src="/static/vercel-user.png"
-                                      style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
+                                      style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px"
                                       width="64" />
                                   </td>
                                   <td
@@ -130,7 +129,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
                                       alt="Enigma team logo"
                                       height="64"
                                       src="/static/vercel-team.png"
-                                      style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
+                                      style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px"
                                       width="64" />
                                   </td>
                                 </tr>
@@ -153,7 +152,7 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
                           <td>
                             <a
                               href="https://vercel.com"
-                              style="border-radius:0.25rem;background-color:rgb(0,0,0);padding-left:20px;padding-right:20px;padding-top:12px;padding-bottom:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px"
+                              style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;border-radius:0.25rem;background-color:rgb(0,0,0);padding-right:20px;padding-left:20px;padding-bottom:12px;padding-top:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none"
                               target="_blank"
                               ><span
                                 ><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span
@@ -169,19 +168,19 @@ exports[`getEmailComponent() > with a demo email template 1`] = `
                       </tbody>
                     </table>
                     <p
-                      style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
                       or copy and paste this URL into your browser:<!-- -->
                       <a
                         href="https://vercel.com"
-                        style="color:rgb(37,99,235);text-decoration-line:none"
+                        style="color:rgb(21,93,252);text-decoration-line:none"
                         target="_blank"
                         >https://vercel.com</a
                       >
                     </p>
                     <hr
-                      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" />
+                      style="width:100%;border:none;border-top:1px solid #eaeaea;margin-right:0;margin-left:0;margin-bottom:26px;margin-top:26px;border-style:solid;border-width:1px;border-color:rgb(234,234,234)" />
                     <p
-                      style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:12px;line-height:24px;color:rgb(102,102,102);margin-top:16px;margin-bottom:16px">
                       This invitation was intended for<!-- -->
                       <span style="color:rgb(0,0,0)">alanturing</span>. This
                       invite was sent from

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
@@ -10,8 +10,7 @@ exports[`email export 1`] = `
     <meta name="x-apple-disable-message-reformatting" />
     <!--$-->
   </head>
-  <body
-    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"'>
+  <body style="background-color:rgb(255,255,255)">
     <table
       border="0"
       width="100%"
@@ -22,7 +21,7 @@ exports[`email export 1`] = `
       <tbody>
         <tr>
           <td
-            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"'>
+            style='margin-right:auto;margin-left:auto;margin-bottom:auto;margin-top:auto;background-color:rgb(255,255,255);padding-right:8px;padding-left: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">
@@ -38,7 +37,7 @@ exports[`email export 1`] = `
               cellpadding="0"
               cellspacing="0"
               role="presentation"
-              style="margin-left:auto;margin-right:auto;margin-top:40px;margin-bottom:40px;max-width:465px;border-radius:0.25rem;border-width:1px;border-color:rgb(234,234,234);border-style:solid;padding:20px">
+              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);padding:20px">
               <tbody>
                 <tr style="width:100%">
                   <td>
@@ -57,26 +56,26 @@ exports[`email export 1`] = `
                               alt="Vercel Logo"
                               height="37"
                               src="/static/vercel-logo.png"
-                              style="margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;display:block;outline:none;border:none;text-decoration:none"
+                              style="display:block;outline:none;border:none;text-decoration:none;margin-right:auto;margin-left:auto;margin-bottom:0;margin-top:0"
                               width="40" />
                           </td>
                         </tr>
                       </tbody>
                     </table>
                     <h1
-                      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)">
+                      style="margin-right:0;margin-left:0;margin-bottom:30px;margin-top: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
-                      style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
                       Hello
                       <!-- -->,
                     </p>
                     <p
-                      style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
                       <strong></strong> (<a
                         href="mailto:undefined"
-                        style="color:rgb(37,99,235);text-decoration-line:none"
+                        style="color:rgb(21,93,252);text-decoration-line:none"
                         target="_blank"></a
                       >) has invited you to the <strong></strong> team on<!-- -->
                       <strong>Vercel</strong>.
@@ -106,7 +105,7 @@ exports[`email export 1`] = `
                                     <img
                                       alt="undefined&#x27;s profile picture"
                                       height="64"
-                                      style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
+                                      style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px"
                                       width="64" />
                                   </td>
                                   <td
@@ -125,7 +124,7 @@ exports[`email export 1`] = `
                                     <img
                                       alt="undefined team logo"
                                       height="64"
-                                      style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
+                                      style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px"
                                       width="64" />
                                   </td>
                                 </tr>
@@ -147,7 +146,7 @@ exports[`email export 1`] = `
                         <tr>
                           <td>
                             <a
-                              style="border-radius:0.25rem;background-color:rgb(0,0,0);padding-left:20px;padding-right:20px;padding-top:12px;padding-bottom:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px"
+                              style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;border-radius:0.25rem;background-color:rgb(0,0,0);padding-right:20px;padding-left:20px;padding-bottom:12px;padding-top:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none"
                               target="_blank"
                               ><span
                                 ><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span
@@ -163,16 +162,16 @@ exports[`email export 1`] = `
                       </tbody>
                     </table>
                     <p
-                      style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:14px;line-height:24px;color:rgb(0,0,0);margin-top:16px;margin-bottom:16px">
                       or copy and paste this URL into your browser:<!-- -->
                       <a
-                        style="color:rgb(37,99,235);text-decoration-line:none"
+                        style="color:rgb(21,93,252);text-decoration-line:none"
                         target="_blank"></a>
                     </p>
                     <hr
-                      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" />
+                      style="width:100%;border:none;border-top:1px solid #eaeaea;margin-right:0;margin-left:0;margin-bottom:26px;margin-top:26px;border-style:solid;border-width:1px;border-color:rgb(234,234,234)" />
                     <p
-                      style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom:16px">
+                      style="font-size:12px;line-height:24px;color:rgb(102,102,102);margin-top:16px;margin-bottom:16px">
                       This invitation was intended for<!-- -->
                       <span style="color:rgb(0,0,0)"></span>. This invite was
                       sent from <span style="color:rgb(0,0,0)"></span>

diff --git a/packages/tailwind/copy-tailwind-types.mjs b/packages/tailwind/copy-tailwind-types.mjs
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-email/tailwind",
-  "version": "1.2.2",
+  "version": "2.0.0-tailwindv4.4",
   "description": "A React component to wrap emails with Tailwind CSS",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -23,8 +23,8 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsc && cross-env NODE_ENV=production vite build --mode production && node ./copy-tailwind-types.mjs",
-    "build:watch": "vite build --watch",
+    "build": "tsdown",
+    "build:watch": "tsdown --watch",
     "clean": "rm -rf dist",
     "test": "vitest run",
     "test:watch": "vitest"
@@ -43,7 +43,50 @@
     "node": ">=18.0.0"
   },
   "peerDependencies": {
-    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc",
+    "@react-email/body": "workspace:*",
+    "@react-email/button": "workspace:*",
+    "@react-email/code-block": "workspace:*",
+    "@react-email/code-inline": "workspace:*",
+    "@react-email/container": "workspace:*",
+    "@react-email/heading": "workspace:*",
+    "@react-email/hr": "workspace:*",
+    "@react-email/img": "workspace:*",
+    "@react-email/link": "workspace:*",
+    "@react-email/preview": "workspace:*",
+    "@react-email/text": "workspace:*"
+  },
+  "peerDependenciesMeta": {
+    "@react-email/button": {
+      "optional": true
+    },
+    "@react-email/body": {
+      "optional": true
+    },
+    "@react-email/code-block": {
+      "optional": true
+    },
+    "@react-email/code-inline": {
+      "optional": true
+    },
+    "@react-email/container": {
+      "optional": true
+    },
+    "@react-email/heading": {
+      "optional": true
+    },
+    "@react-email/hr": {
+      "optional": true
+    },
+    "@react-email/img": {
+      "optional": true
+    },
+    "@react-email/link": {
+      "optional": true
+    },
+    "@react-email/preview": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@react-email/button": "workspace:^",
@@ -54,14 +97,12 @@
     "@react-email/link": "workspace:*",
     "@react-email/render": "workspace:*",
     "@responsive-email/react-email": "0.0.4",
+    "@types/css-tree": "2.3.10",
     "@types/shelljs": "0.8.15",
     "@vitejs/plugin-react": "4.4.1",
-    "cross-env": "10.0.0",
-    "postcss": "8.5.3",
-    "postcss-selector-parser": "7.1.0",
+    "css-tree": "3.1.0",
     "react-dom": "^19",
     "shelljs": "0.9.2",
-    "tailwindcss": "3.4.10",
     "tsconfig": "workspace:*",
     "typescript": "5.8.3",
     "vite": "6.3.6",
@@ -70,5 +111,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "tailwindcss": "4.1.12"
   }
 }