Merge branch 'canary' into feat/tailwind-component-for-all-tailwind-copy-paste

gabrielmfern · gabrielmfern · commit eca8b6683a1d · 2025-11-19T13:27:37.000-03:00
diff --git a/apps/web/components/bento-grid/inline-styles.tsx b/apps/web/components/bento-grid/inline-styles.tsx
@@ -17,8 +17,8 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>Coffee Storage</Preview>
     <Body>
+      <Preview>Coffee Storage</Preview>
       <Container
         style={{
           backgroundColor: 'rgb(255,255,255)',
diff --git a/apps/web/components/bento-grid/tailwind.tsx b/apps/web/components/bento-grid/tailwind.tsx
@@ -17,8 +17,8 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>Coffee Storage</Preview>
     <Body>
+      <Preview>Coffee Storage</Preview>
       <Container className="bg-white rounded-[8px] mx-auto max-w-[900px] overflow-hidden p-0">
         <Section>
           <Row className="bg-[rgb(41,37,36)] border-separate [border-spacing:24px] m-0 table-fixed w-full">
diff --git a/apps/web/components/customer-reviews/inline-styles.tsx b/apps/web/components/customer-reviews/inline-styles.tsx
@@ -17,8 +17,8 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>Customer Reviews</Preview>
     <Body>
+      <Preview>Customer Reviews</Preview>
       <Container
         style={{
           backgroundColor: 'rgb(255,255,255)',
diff --git a/apps/web/components/customer-reviews/tailwind.tsx b/apps/web/components/customer-reviews/tailwind.tsx
@@ -17,8 +17,8 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>Customer Reviews</Preview>
     <Body>
+      <Preview>Customer Reviews</Preview>
       <Container className="mx-auto max-w-[400px] rounded-[8px] bg-white px-[42px] py-[24px]">
         <Section>
           <Heading as="h1" className="text-[24px] leading-[32px]">
diff --git a/apps/web/components/list-with-image-on-left/inline-styles.tsx b/apps/web/components/list-with-image-on-left/inline-styles.tsx
@@ -17,12 +17,12 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>How Our Service Works: 5 Simple Steps</Preview>
     <Body
       style={{
         backgroundColor: 'rgb(255,255,255)',
       }}
     >
+      <Preview>How Our Service Works: 5 Simple Steps</Preview>
       <Container
         style={{
           backgroundColor: 'rgb(255,255,255)',
diff --git a/apps/web/components/list-with-image-on-left/tailwind.tsx b/apps/web/components/list-with-image-on-left/tailwind.tsx
@@ -17,8 +17,8 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>How Our Service Works: 5 Simple Steps</Preview>
     <Body className="bg-white">
+      <Preview>How Our Service Works: 5 Simple Steps</Preview>
       <Container className="mx-auto max-w-[600px] rounded-[8px] bg-white px-[24px] pt-[24px] pb-0">
         <Heading
           as="h1"
diff --git a/apps/web/components/simple-list/inline-styles.tsx b/apps/web/components/simple-list/inline-styles.tsx
@@ -15,8 +15,8 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>Top 5 Features of Our Service</Preview>
     <Body>
+      <Preview>Top 5 Features of Our Service</Preview>
       <Container
         style={{
           backgroundColor: 'rgb(255,255,255)',
diff --git a/apps/web/components/simple-list/tailwind.tsx b/apps/web/components/simple-list/tailwind.tsx
@@ -15,8 +15,8 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>Top 5 Features of Our Service</Preview>
     <Body>
+      <Preview>Top 5 Features of Our Service</Preview>
       <Container className="mx-auto max-w-[600px] rounded-[8px] bg-white p-[24px]">
         <Heading className="mb-[42px] text-center text-[24px] leading-[32px]">
           Top 5 Features of Our Service
diff --git a/apps/web/components/simple-pricing-table/inline-styles.tsx b/apps/web/components/simple-pricing-table/inline-styles.tsx
@@ -14,10 +14,10 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>
-      Exclusive Offer Just For You: Unlock Premium Features at $12/month
-    </Preview>
     <Body>
+      <Preview>
+        Exclusive Offer Just For You: Unlock Premium Features at $12/month
+      </Preview>
       <Container
         style={{
           backgroundColor: 'rgb(255,255,255)',
diff --git a/apps/web/components/simple-pricing-table/tailwind.tsx b/apps/web/components/simple-pricing-table/tailwind.tsx
@@ -14,10 +14,10 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>
-      Exclusive Offer Just For You: Unlock Premium Features at $12/month
-    </Preview>
     <Body>
+      <Preview>
+        Exclusive Offer Just For You: Unlock Premium Features at $12/month
+      </Preview>
       <Container className="bg-white rounded-[12px] mx-auto max-w-[500px] p-[24px]">
         <Section className="bg-white border border-solid border-gray-300 rounded-[12px] text-gray-600 p-[28px] w-full text-left mb-0">
           <Text className="text-indigo-600 text-[12px] leading-[20px] font-semibold tracking-wide mb-[16px] mt-[16px] uppercase">
diff --git a/apps/web/components/simple-rating-survey/inline-styles.tsx b/apps/web/components/simple-rating-survey/inline-styles.tsx
@@ -17,11 +17,11 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>
-      How satisfied were you overall with the initial conversation about your
-      claim?
-    </Preview>
     <Body>
+      <Preview>
+        How satisfied were you overall with the initial conversation about your
+        claim?
+      </Preview>
       <Container
         style={{
           backgroundColor: 'rgb(255,255,255)',
diff --git a/apps/web/components/simple-rating-survey/tailwind.tsx b/apps/web/components/simple-rating-survey/tailwind.tsx
@@ -17,11 +17,11 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>
-      How satisfied were you overall with the initial conversation about your
-      claim?
-    </Preview>
     <Body>
+      <Preview>
+        How satisfied were you overall with the initial conversation about your
+        claim?
+      </Preview>
       <Container className="mx-auto max-w-[600px] rounded-[8px] bg-white px-[42px] py-[24px]">
         <Heading className="mb-[16px] text-[24px] leading-[32px]">
           How satisfied were you overall with the initial conversation about
diff --git a/apps/web/components/two-tiers-with-emphasized-tier/inline-styles.tsx b/apps/web/components/two-tiers-with-emphasized-tier/inline-styles.tsx
@@ -15,8 +15,8 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>Choose the right plan for you</Preview>
     <Body>
+      <Preview>Choose the right plan for you</Preview>
       <Container
         style={{
           backgroundColor: 'rgb(255,255,255)',
diff --git a/apps/web/components/two-tiers-with-emphasized-tier/tailwind.tsx b/apps/web/components/two-tiers-with-emphasized-tier/tailwind.tsx
@@ -15,8 +15,8 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Html>
     <Head />
-    <Preview>Choose the right plan for you</Preview>
     <Body>
+      <Preview>Choose the right plan for you</Preview>
       <Container className="bg-white rounded-[8px] mx-auto max-w-[600px] p-[24px]">
         <Section className="mb-[42px]">
           <Heading className="text-[24px] leading-[32px] mb-[12px] text-center">
diff --git a/benchmarks/tailwind-component/src/emails/with-tailwind.tsx b/benchmarks/tailwind-component/src/emails/with-tailwind.tsx
@@ -36,8 +36,8 @@ export const GooglePlayPolicyUpdateEmailWithTailwind = ({
   >
     <Html>
       <Head />
-      <Preview>Google Play developers</Preview>
       <Body className="bg-[#dbddde] font-main">
+        <Preview>Google Play developers</Preview>
         <Container className="mx-auto my-7 w-[610px] overflow-hidden rounded-md bg-white">
           <Section>
             <Row>
diff --git a/benchmarks/tailwind-component/src/emails/without-tailwind.tsx b/benchmarks/tailwind-component/src/emails/without-tailwind.tsx
@@ -20,8 +20,8 @@ const baseUrl = process.env.VERCEL_URL
 export const GooglePlayPolicyUpdateEmail = () => (
   <Html>
     <Head />
-    <Preview>Google Play developers</Preview>
     <Body style={main}>
+      <Preview>Google Play developers</Preview>
       <Container style={container}>
         <Section>
           <Row>
diff --git a/examples/resend/transactional/emails/waitlist.tsx b/examples/resend/transactional/emails/waitlist.tsx
@@ -17,8 +17,10 @@ export const WaitlistEmail: React.FC<Readonly<WaitlistEmailProps>> = ({
 }) => (
   <Html>
     <Head />
-    <Preview>Thank you for joining our waitlist and for your patience</Preview>
     <Body style={main}>
+      <Preview>
+        Thank you for joining our waitlist and for your patience
+      </Preview>
       <Container style={container}>
         <Heading style={h1}>Coming Soon.</Heading>
         <Text style={text}>
diff --git a/examples/scaleway/next/transactional/emails/waitlist.tsx b/examples/scaleway/next/transactional/emails/waitlist.tsx
@@ -17,8 +17,10 @@ export const WaitlistEmail: React.FC<Readonly<WaitlistEmailProps>> = ({
 }) => (
   <Html>
     <Head />
-    <Preview>Thank you for joining our waitlist and for your patience</Preview>
     <Body style={main}>
+      <Preview>
+        Thank you for joining our waitlist and for your patience
+      </Preview>
       <Container style={container}>
         <Heading style={h1}>Coming Soon.</Heading>
         <Text style={text}>
diff --git a/examples/scaleway/node/src/email.tsx b/examples/scaleway/node/src/email.tsx
@@ -30,8 +30,8 @@ export const Email: FC<Readonly<EmailProps>> = ({
   return (
     <Html lang="en">
       <Head />
-      <Preview>{previewText}</Preview>
       <Body>
+        <Preview>{previewText}</Preview>
         <Container>
           <Section>
             <Img
diff --git a/packages/create-email/template/emails/notion-magic-link.tsx b/packages/create-email/template/emails/notion-magic-link.tsx
@@ -23,8 +23,8 @@ export const NotionMagicLinkEmail = ({
 }: NotionMagicLinkEmailProps) => (
   <Html>
     <Head />
-    <Preview>Log in with this magic link</Preview>
     <Body style={main}>
+      <Preview>Log in with this magic link</Preview>
       <Container style={container}>
         <Heading style={h1}>Login</Heading>
         <Link
diff --git a/packages/create-email/template/emails/stripe-welcome.tsx b/packages/create-email/template/emails/stripe-welcome.tsx
@@ -19,8 +19,8 @@ const baseUrl = process.env.VERCEL_URL
 export const StripeWelcomeEmail = () => (
   <Html>
     <Head />
-    <Preview>You're now ready to make live transactions with Stripe!</Preview>
     <Body style={main}>
+      <Preview>You're now ready to make live transactions with Stripe!</Preview>
       <Container style={container}>
         <Section style={box}>
           <Img
diff --git a/packages/create-email/template/emails/vercel-invite-user.tsx b/packages/create-email/template/emails/vercel-invite-user.tsx
@@ -48,9 +48,9 @@ export const VercelInviteUserEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
       <Tailwind>
         <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]">
             <Section className="mt-[32px]">
               <Img
