resend · emiliosheinz · Oct 16, 2025 · Oct 17, 2025 · Oct 17, 2025 · Oct 17, 2025
diff --git a/.changeset/pink-rabbits-deny.md b/.changeset/pink-rabbits-deny.md
@@ -0,0 +1,5 @@
+---
+"@react-email/components": major
+---
+
+tailwind: update to using tailwindcss@v4
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,39 @@
+{
+  "mode": "pre",
+  "tag": "canary",
+  "initialVersions": {
+    "demo": "0.0.0",
+    "docs": "0.0.0",
+    "web": "0.0.0",
+    "@benchmarks/preview-server": "0.0.0",
+    "@benchmarks/tailwind-component": "0.0.0",
+    "@react-email/body": "0.1.0",
+    "@react-email/button": "0.2.0",
+    "@react-email/code-block": "0.1.0",
+    "@react-email/code-inline": "0.0.5",
+    "@react-email/column": "0.0.13",
+    "@react-email/components": "0.5.7",
+    "@react-email/container": "0.0.15",
+    "create-email": "1.2.2",
+    "@react-email/font": "0.0.9",
+    "@react-email/head": "0.0.12",
+    "@react-email/heading": "0.0.15",
+    "@react-email/hr": "0.0.11",
+    "@react-email/html": "0.0.11",
+    "@react-email/img": "0.0.11",
+    "@react-email/link": "0.0.12",
+    "@react-email/markdown": "0.0.16",
+    "@react-email/preview": "0.0.13",
+    "@react-email/preview-server": "4.3.1",
+    "react-email": "4.3.1",
+    "email-dev": "0.0.2",
+    "@react-email/render": "1.4.0",
+    "@react-email/row": "0.0.12",
+    "@react-email/section": "0.0.16",
+    "@react-email/tailwind": "1.2.2",
+    "@react-email/text": "0.1.5",
+    "tsconfig": "0.0.0",
+    "playground": "0.0.9"
+  },
+  "changesets": ["pink-rabbits-deny", "rich-files-stick"]
+}
diff --git a/.changeset/rich-files-stick.md b/.changeset/rich-files-stick.md
@@ -0,0 +1,6 @@
+---
+"@react-email/tailwind": major
+---
+
+update to using tailwindcss@v4
+
diff --git a/apps/demo/emails/magic-links/aws-verify-email.tsx b/apps/demo/emails/magic-links/aws-verify-email.tsx
@@ -9,8 +9,10 @@ import {
   Link,
   Preview,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface AWSVerifyEmailProps {
   verificationCode?: string;
@@ -26,150 +28,80 @@ export default function AWSVerifyEmail({
   return (
     <Html>
       <Head />
-      <Body style={main}>
-        <Preview>AWS Email Verification</Preview>
-        <Container style={container}>
-          <Section style={coverSection}>
-            <Section style={imageSection}>
-              <Img
-                src={`${baseUrl}/static/aws-logo.png`}
-                width="75"
-                height="45"
-                alt="AWS's Logo"
-              />
-            </Section>
-            <Section style={upperSection}>
-              <Heading style={h1}>Verify your email address</Heading>
-              <Text style={mainText}>
-                Thanks for starting the new AWS account creation process. We
-                want to make sure it's really you. Please enter the following
-                verification code when prompted. If you don&apos;t want to
-                create an account, you can ignore this message.
-              </Text>
-              <Section style={verificationSection}>
-                <Text style={verifyText}>Verification code</Text>
-
-                <Text style={codeText}>{verificationCode}</Text>
-                <Text style={validityText}>
-                  (This code is valid for 10 minutes)
+      <Tailwind config={tailwindConfig}>
+        <Body className="bg-white font-aws text-[#212121]">
+          <Preview>AWS Email Verification</Preview>
+          <Container className="p-5 mx-auto bg-[#eee]">
+            <Section className="bg-white">
+              <Section className="bg-[#252f3d] flex py-5 items-center justify-center">
+                <Img
+                  src={`${baseUrl}/static/aws-logo.png`}
+                  width="75"
+                  height="45"
+                  alt="AWS's Logo"
+                />
+              </Section>
+              <Section className="py-[25px] px-[35px]">
+                <Heading className="text-[#333] text-[20px] font-bold mb-[15px]">
+                  Verify your email address
+                </Heading>
+                <Text className="text-[#333] text-[14px] leading-[24px] mt-6 mb-[14px] mx-0">
+                  Thanks for starting the new AWS account creation process. We
+                  want to make sure it's really you. Please enter the following
+                  verification code when prompted. If you don&apos;t want to
+                  create an account, you can ignore this message.
+                </Text>
+                <Section className="flex items-center justify-center">
+                  <Text className="text-[#333] m-0 font-bold text-center text-[14px]">
+                    Verification code
+                  </Text>
+
+                  <Text className="text-[#333] text-[36px] my-[10px] mx-0 font-bold text-center">
+                    {verificationCode}
+                  </Text>
+                  <Text className="text-[#333] text-[14px] m-0 text-center">
+                    (This code is valid for 10 minutes)
+                  </Text>
+                </Section>
+              </Section>
+              <Hr />
+              <Section className="py-[25px] px-[35px]">
+                <Text className="text-[#333] text-[14px] m-0">
+                  Amazon Web Services will never email you and ask you to
+                  disclose or verify your password, credit card, or banking
+                  account number.
                 </Text>
               </Section>
             </Section>
-            <Hr />
-            <Section style={lowerSection}>
-              <Text style={cautionText}>
-                Amazon Web Services will never email you and ask you to disclose
-                or verify your password, credit card, or banking account number.
-              </Text>
-            </Section>
-          </Section>
-          <Text style={footerText}>
-            This message was produced and distributed by Amazon Web Services,
-            Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web
-            Services, Inc.. All rights reserved. AWS is a registered trademark
-            of{' '}
-            <Link href="https://amazon.com" target="_blank" style={link}>
-              Amazon.com
-            </Link>
-            , Inc. View our{' '}
-            <Link href="https://amazon.com" target="_blank" style={link}>
-              privacy policy
-            </Link>
-            .
-          </Text>
-        </Container>
-      </Body>
+            <Text className="text-[#333] text-[12px] my-[24px] mx-0 px-5 py-0">
+              This message was produced and distributed by Amazon Web Services,
+              Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web
+              Services, Inc.. All rights reserved. AWS is a registered trademark
+              of{' '}
+              <Link
+                href="https://amazon.com"
+                target="_blank"
+                className="text-[#2754C5] underline text-[14px]"
+              >
+                Amazon.com
+              </Link>
+              , Inc. View our{' '}
+              <Link
+                href="https://amazon.com"
+                target="_blank"
+                className="text-[#2754C5] underline text-[14px]"
+              >
+                privacy policy
+              </Link>
+              .
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
     </Html>
   );
 }
 
 AWSVerifyEmail.PreviewProps = {
   verificationCode: '596853',
 } satisfies AWSVerifyEmailProps;
-
-const main = {
-  backgroundColor: '#fff',
-  color: '#212121',
-};
-
-const container = {
-  padding: '20px',
-  margin: '0 auto',
-  backgroundColor: '#eee',
-};
-
-const h1 = {
-  color: '#333',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '20px',
-  fontWeight: 'bold',
-  marginBottom: '15px',
-};
-
-const link = {
-  color: '#2754C5',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '14px',
-  textDecoration: 'underline',
-};
-
-const text = {
-  color: '#333',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '14px',
-  margin: '24px 0',
-};
-
-const imageSection = {
-  backgroundColor: '#252f3d',
-  display: 'flex',
-  padding: '20px 0',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
-
-const coverSection = { backgroundColor: '#fff' };
-
-const upperSection = { padding: '25px 35px' };
-
-const lowerSection = { padding: '25px 35px' };
-
-const footerText = {
-  ...text,
-  fontSize: '12px',
-  padding: '0 20px',
-};
-
-const verifyText = {
-  ...text,
-  margin: 0,
-  fontWeight: 'bold',
-  textAlign: 'center' as const,
-};
-
-const codeText = {
-  ...text,
-  fontWeight: 'bold',
-  fontSize: '36px',
-  margin: '10px 0',
-  textAlign: 'center' as const,
-};
-
-const validityText = {
-  ...text,
-  margin: '0px',
-  textAlign: 'center' as const,
-};
-
-const verificationSection = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
-
-const mainText = { ...text, marginBottom: '14px' };
-
-const cautionText = { ...text, margin: '0px' };