From 0e7ae4c2c2a2d171ab7b6bf8e1936115ee14d9dc Mon Sep 17 00:00:00 2001
From: Bu Kinoshita <6929565+bukinoshita@users.noreply.github.com>
Date: Thu, 16 Oct 2025 18:21:27 +0000
Subject: [PATCH 1/8] feat(demo): use Tailwind v4 on all templates (#2487)
Co-authored-by: gabriel miranda
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
---
.../emails/magic-links/aws-verify-email.tsx | 206 ++---
.../emails/magic-links/linear-login-code.tsx | 140 +---
.../emails/magic-links/notion-magic-link.tsx | 156 ++--
.../magic-links/plaid-verify-identity.tsx | 163 +---
.../emails/magic-links/raycast-magic-link.tsx | 129 ++-
.../demo/emails/magic-links/slack-confirm.tsx | 300 +++----
.../newsletters/codepen-challengers.tsx | 611 ++++++--------
.../newsletters/google-play-policy-update.tsx | 304 ++++---
.../newsletters/stack-overflow-tips.tsx | 359 +++-----
.../notifications/github-access-token.tsx | 134 +--
.../notifications/yelp-recent-login.tsx | 226 ++----
apps/demo/emails/receipts/apple-receipt.tsx | 764 +++++++-----------
apps/demo/emails/receipts/nike-receipt.tsx | 757 ++++++++---------
.../reset-password/dropbox-reset-password.tsx | 116 ++-
.../reset-password/twitch-reset-password.tsx | 205 ++---
apps/demo/emails/reviews/airbnb-review.tsx | 241 +++---
apps/demo/emails/reviews/amazon-review.tsx | 336 ++++----
apps/demo/emails/tailwind.config.ts | 93 +++
apps/demo/emails/welcome/koala-welcome.tsx | 121 +--
apps/demo/emails/welcome/stripe-welcome.tsx | 222 +++--
apps/demo/package.json | 10 +-
pnpm-lock.yaml | 738 +++++++++++++++--
22 files changed, 2894 insertions(+), 3437 deletions(-)
create mode 100644 apps/demo/emails/tailwind.config.ts
diff --git a/apps/demo/emails/magic-links/aws-verify-email.tsx b/apps/demo/emails/magic-links/aws-verify-email.tsx
index ab93659440..8155680ee3 100644
--- 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,59 +28,76 @@ export default function AWSVerifyEmail({
return (
-
- AWS Email Verification
-
-
-
- 
-
-
- Verify your email address
-
- 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't want to
- create an account, you can ignore this message.
-
-
- Verification code
-
- {verificationCode}
-
- (This code is valid for 10 minutes)
+
+
+ AWS Email Verification
+
+
+
+
+
+
+
+ Verify your email address
+
+
+ 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't want to
+ create an account, you can ignore this message.
+
+
+
+ Verification code
+
+
+
+ {verificationCode}
+
+
+ (This code is valid for 10 minutes)
+
+
+
+
+
+
+ Amazon Web Services will never email you and ask you to
+ disclose or verify your password, credit card, or banking
+ account number.
-
-
-
- Amazon Web Services will never email you and ask you to disclose
- or verify your password, credit card, or banking account number.
-
-
-
-
- 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{' '}
-
- Amazon.com
-
- , Inc. View our{' '}
-
- privacy policy
-
- .
-
-
-
+
+ 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{' '}
+
+ Amazon.com
+
+ , Inc. View our{' '}
+
+ privacy policy
+
+ .
+
+
+
+
);
}
@@ -86,90 +105,3 @@ export default function AWSVerifyEmail({
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' };
diff --git a/apps/demo/emails/magic-links/linear-login-code.tsx b/apps/demo/emails/magic-links/linear-login-code.tsx
index 6c6265daf6..1e94cb076d 100644
--- a/apps/demo/emails/magic-links/linear-login-code.tsx
+++ b/apps/demo/emails/magic-links/linear-login-code.tsx
@@ -10,8 +10,10 @@ import {
Link,
Preview,
Section,
+ Tailwind,
Text,
} from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
interface LinearLoginCodeEmailProps {
validationCode?: string;
@@ -26,33 +28,46 @@ export const LinearLoginCodeEmail = ({
}: LinearLoginCodeEmailProps) => (
-