migrate raycast template to using tailwind v4

gabrielmfern · gabrielmfern · commit 00c28c107c94 · 2025-10-07T10:06:45.000-03:00
diff --git a/apps/demo/emails/magic-links/raycast-magic-link.tsx b/apps/demo/emails/magic-links/raycast-magic-link.tsx
@@ -9,8 +9,10 @@ import {
   Link,
   Preview,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface RaycastMagicLinkEmailProps {
   magicLink?: string;
@@ -25,47 +27,52 @@ export const RaycastMagicLinkEmail = ({
 }: RaycastMagicLinkEmailProps) => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Preview>Log in with this magic link.</Preview>
-      <Container style={container}>
-        <Img
-          src={`${baseUrl}/static/raycast-logo.png`}
-          width={48}
-          height={48}
-          alt="Raycast"
-        />
-        <Heading style={heading}>🪄 Your magic link</Heading>
-        <Section style={body}>
-          <Text style={paragraph}>
-            <Link style={link} href={magicLink}>
-              👉 Click here to sign in 👈
-            </Link>
+    <Tailwind config={tailwindConfig}>
+      <Body className="bg-white font-raycast">
+        <Preview>Log in with this magic link.</Preview>
+        <Container className="mx-auto my-0 pt-5 px-6 pb-12 bg-[url('/static/raycast-bg.png')] [background-position:bottom] [background-repeat:no-repeat]">
+          <Img
+            src={`${baseUrl}/static/raycast-logo.png`}
+            width={48}
+            height={48}
+            alt="Raycast"
+          />
+          <Heading className="text-[28px] font-bold mt-12">
+            🪄 Your magic link
+          </Heading>
+          <Section className="my-6 mx-0">
+            <Text className="text-base leading-6.5">
+              <Link className="text-[#FF6363]" href={magicLink}>
+                👉 Click here to sign in 👈
+              </Link>
+            </Text>
+            <Text className="text-base leading-6.5">
+              If you didn't request this, please ignore this email.
+            </Text>
+          </Section>
+          <Text className="text-base leading-6.5">
+            Best,
+            <br />- Raycast Team
           </Text>
-          <Text style={paragraph}>
-            If you didn't request this, please ignore this email.
+          <Hr className="border-[#dddddd] mt-12" />
+          <Img
+            src={`${baseUrl}/static/raycast-logo.png`}
+            width={32}
+            height={32}
+            style={{
+              WebkitFilter: 'grayscale(100%)',
+            }}
+            className="[filter:grayscale(100%)] my-5 mx-0"
+          />
+          <Text className="text-[#8898aa] text-xs leading-6 ml-1">
+            Raycast Technologies Inc.
           </Text>
-        </Section>
-        <Text style={paragraph}>
-          Best,
-          <br />- Raycast Team
-        </Text>
-        <Hr style={hr} />
-        <Img
-          src={`${baseUrl}/static/raycast-logo.png`}
-          width={32}
-          height={32}
-          style={{
-            WebkitFilter: 'grayscale(100%)',
-            filter: 'grayscale(100%)',
-            margin: '20px 0',
-          }}
-        />
-        <Text style={footer}>Raycast Technologies Inc.</Text>
-        <Text style={footer}>
-          2093 Philadelphia Pike #3222, Claymont, DE 19703
-        </Text>
-      </Container>
-    </Body>
+          <Text className="text-[#8898aa] text-xs leading-6 ml-1">
+            2093 Philadelphia Pike #3222, Claymont, DE 19703
+          </Text>
+        </Container>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
@@ -74,47 +81,3 @@ RaycastMagicLinkEmail.PreviewProps = {
 } as RaycastMagicLinkEmailProps;
 
 export default RaycastMagicLinkEmail;
-
-const main = {
-  backgroundColor: '#ffffff',
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
-};
-
-const container = {
-  margin: '0 auto',
-  padding: '20px 25px 48px',
-  backgroundImage: 'url("/static/raycast-bg.png")',
-  backgroundPosition: 'bottom',
-  backgroundRepeat: 'no-repeat, no-repeat',
-};
-
-const heading = {
-  fontSize: '28px',
-  fontWeight: 'bold',
-  marginTop: '48px',
-};
-
-const body = {
-  margin: '24px 0',
-};
-
-const paragraph = {
-  fontSize: '16px',
-  lineHeight: '26px',
-};
-
-const link = {
-  color: '#FF6363',
-};
-
-const hr = {
-  borderColor: '#dddddd',
-  marginTop: '48px',
-};
-
-const footer = {
-  color: '#8898aa',
-  fontSize: '12px',
-  marginLeft: '4px',
-};
diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts
@@ -2,4 +2,9 @@ import { pixelBasedPreset, type TailwindConfig } from '@react-email/components';
 
 export default {
   presets: [pixelBasedPreset],
+  theme: {
+    fontFamily: {
+      raycast: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif'
+    }
+  }
 } satisfies TailwindConfig;
