feat(tailwind): update to tailwind v4

packages/body/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/body",
-  "version": "0.1.0",
+  "version": "0.1.1-tailwindv4.0",
   "description": "A React body component to wrap emails",
   "sideEffects": false,
   "main": "./dist/index.js",

packages/body/src/body.tsx

@@ -39,3 +39,4 @@ export const Body = React.forwardRef<HTMLBodyElement, BodyProps>(
 );
 
 Body.displayName = 'Body';
+(Body as any).tailwindTreatAsElement = true;

packages/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/button",
-  "version": "0.2.0",
+  "version": "0.2.1-tailwindv4.0",
   "description": "A link that is styled to look like a button",
   "sideEffects": false,
   "main": "./dist/index.js",

packages/button/src/button.tsx

@@ -110,3 +110,4 @@ export const Button = React.forwardRef<HTMLAnchorElement, ButtonProps>(
 );
 
 Button.displayName = 'Button';
+(Button as any).tailwindTreatAsElement = true;

packages/code-block/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/code-block",
-  "version": "0.1.0",
+  "version": "0.1.1-tailwindv4.0",
   "description": "Display code with a selected theme and regex highlighting using Prism.js",
   "sideEffects": false,
   "main": "./dist/index.js",

packages/code-block/src/code-block.tsx

@@ -124,3 +124,4 @@ export const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>(
 );
 
 CodeBlock.displayName = 'CodeBlock';
+(CodeBlock as any).tailwindTreatAsElement = true;

packages/code-inline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/code-inline",
-  "version": "0.0.5",
+  "version": "0.0.6-tailwindv4.0",
   "description": "Display a predictable inline code HTML element that works on all email clients",
   "sideEffects": false,
   "main": "./dist/index.js",

packages/code-inline/src/code-inline.tsx

@@ -56,3 +56,4 @@ export const CodeInline = React.forwardRef<HTMLSpanElement, CodeInlineProps>(
 );
 
 CodeInline.displayName = 'CodeInline';
+(CodeInline as any).tailwindTreatAsElement = true;

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/components",
-  "version": "0.5.6-canary.0",
+  "version": "1.0.0-tailwindv4.4",
   "description": "A collection of all components React Email.",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -40,26 +40,26 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@react-email/body": "workspace:0.1.0",
-    "@react-email/button": "workspace:0.2.0",
-    "@react-email/code-block": "workspace:0.1.0",
-    "@react-email/code-inline": "workspace:0.0.5",
+    "@react-email/body": "workspace:0.1.1-tailwindv4.0",
+    "@react-email/button": "workspace:0.2.1-tailwindv4.0",
+    "@react-email/code-block": "workspace:0.1.1-tailwindv4.0",
+    "@react-email/code-inline": "workspace:0.0.6-tailwindv4.0",
     "@react-email/column": "workspace:0.0.13",
-    "@react-email/container": "workspace:0.0.15",
+    "@react-email/container": "workspace:0.0.16-tailwindv4.0",
     "@react-email/font": "workspace:0.0.9",
     "@react-email/head": "workspace:0.0.12",
-    "@react-email/heading": "workspace:0.0.15",
-    "@react-email/hr": "workspace:0.0.11",
+    "@react-email/heading": "workspace:0.0.16-tailwindv4.0",
+    "@react-email/hr": "workspace:0.0.12-tailwindv4.0",
     "@react-email/html": "workspace:0.0.11",
-    "@react-email/img": "workspace:0.0.11",
-    "@react-email/link": "workspace:0.0.12",
+    "@react-email/img": "workspace:0.0.12-tailwindv4.0",
+    "@react-email/link": "workspace:0.0.13-tailwindv4.0",
     "@react-email/markdown": "workspace:0.0.15",
-    "@react-email/preview": "workspace:0.0.13",
+    "@react-email/preview": "workspace:0.0.14-tailwindv4.0",
     "@react-email/render": "workspace:1.3.2-canary.0",
     "@react-email/row": "workspace:0.0.12",
     "@react-email/section": "workspace:0.0.16",
-    "@react-email/tailwind": "workspace:1.2.2",
-    "@react-email/text": "workspace:0.1.5"
+    "@react-email/tailwind": "workspace:2.0.0-tailwindv4.1",
+    "@react-email/text": "workspace:0.1.6-tailwindv4.0"
   },
   "peerDependencies": {
     "react": "^18.0 || ^19.0 || ^19.0.0-rc"

packages/container/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/container",
-  "version": "0.0.15",
+  "version": "0.0.16-tailwindv4.0",
   "description": "A layout component that centers all the email content",
   "sideEffects": false,
   "main": "./dist/index.js",

packages/container/src/container.tsx

@@ -27,3 +27,4 @@ export const Container = React.forwardRef<HTMLTableElement, ContainerProps>(
 );
 
 Container.displayName = 'Container';
+(Container as any).tailwindTreatAsElement = true;

packages/heading/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/heading",
-  "version": "0.0.15",
+  "version": "0.0.16-tailwindv4.0",
   "description": "A block of heading text",
   "sideEffects": false,
   "main": "./dist/index.js",

packages/heading/src/heading.tsx

@@ -27,3 +27,4 @@ export const Heading = React.forwardRef<
 );
 
 Heading.displayName = 'Heading';
+(Heading as any).tailwindTreatAsElement = true;

packages/hr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/hr",
-  "version": "0.0.11",
+  "version": "0.0.12-tailwindv4.0",
   "description": "Display a divider that separates content areas in your email",
   "sideEffects": false,
   "main": "./dist/index.js",

packages/hr/src/hr.tsx

@@ -18,3 +18,4 @@ export const Hr = React.forwardRef<HTMLHRElement, HrProps>(
 );
 
 Hr.displayName = 'Hr';
+(Hr as any).tailwindTreatAsElement = true;

packages/img/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/img",
-  "version": "0.0.11",
+  "version": "0.0.12-tailwindv4.0",
   "description": "Display an image in your email",
   "sideEffects": false,
   "main": "./dist/index.js",

packages/img/src/img.tsx

@@ -23,3 +23,4 @@ export const Img = React.forwardRef<HTMLImageElement, ImgProps>(
 );
 
 Img.displayName = 'Img';
+(Img as any).tailwindTreatAsElement = true;

packages/link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/link",
-  "version": "0.0.12",
+  "version": "0.0.13-tailwindv4.0",
   "description": "A hyperlink to web pages, email addresses, or anything else a URL can address",
   "sideEffects": false,
   "main": "./dist/index.js",

packages/link/src/link.tsx

@@ -20,3 +20,4 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
 );
 
 Link.displayName = 'Link';
+(Link as any).tailwindTreatAsElement = true;

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

packages/preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/preview",
-  "version": "0.0.13",
+  "version": "0.0.14-tailwindv4.0",
   "description": "A preview text that will be displayed in the inbox of the recipient",
   "sideEffects": false,
   "main": "./dist/index.js",

packages/preview/src/preview.tsx

@@ -36,6 +36,7 @@ export const Preview = React.forwardRef<HTMLDivElement, PreviewProps>(
 );
 
 Preview.displayName = 'Preview';
+(Preview as any).tailwindTreatAsElement = true;
 
 const whiteSpaceCodes = '\xa0\u200C\u200B\u200D\u200E\u200F\uFEFF';
 export const renderWhiteSpace = (text: string) => {