Skip to content

feat(demo): use Tailwind v4 in raycast-magic-link.tsx #2524

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Oct 10, 2025
+48 −83
Merged

feat(demo): use Tailwind v4 in raycast-magic-link.tsx #2524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
0604b50
chore(demo): tailwind basic setup
bukinoshita Sep 29, 2025
1a7f9df
fix: minor tweak
bukinoshita Sep 30, 2025
f90893b
fix: minor tweak
bukinoshita Sep 30, 2025
3fa21e5
fix errors
gabrielmfern Oct 1, 2025
5f653b4
add tailwind config
gabrielmfern Oct 1, 2025
bd30439
use the new testing version
gabrielmfern Oct 1, 2025
22ea3f7
update lock
gabrielmfern Oct 1, 2025
9bafcd9
use pixelBasedPreset on tailwind config
gabrielmfern Oct 1, 2025
0ce7170
update components
gabrielmfern Oct 1, 2025
4060a59
sort
gabrielmfern Oct 1, 2025
e0847b7
sort
gabrielmfern Oct 1, 2025
044e56a
update to next preview
gabrielmfern Oct 3, 2025
a8ebdfd
update components
gabrielmfern Oct 7, 2025
4aa08f5
update lock
gabrielmfern Oct 7, 2025
6c63cce
feat(demo): use Tailwind v4 in amazon-review.tsx (#2502)
bukinoshita Oct 10, 2025
38341df
migrate raycast template to using tailwind v4
gabrielmfern Oct 2, 2025
67a3d45
fix pixel differences
gabrielmfern Oct 7, 2025
2f2ec08
lint
gabrielmfern Oct 10, 2025
9b36819
Merge branch 'chore/basic-setup' into feature/oss-233-raycast-magic-l…
gabrielmfern Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 46 additions & 83 deletions apps/demo/emails/magic-links/raycast-magic-link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ import {
Link,
Preview,
Section,
Tailwind,
Text,
} from '@react-email/components';
import tailwindConfig from '../tailwind.config';

interface RaycastMagicLinkEmailProps {
magicLink?: string;
Expand All @@ -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-[25px] 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>
);

Expand All @@ -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',
};
2 changes: 2 additions & 0 deletions apps/demo/emails/tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ export default {
theme: {
fontFamily: {
amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'],
raycast:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
slack:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
twitch: ['HelveticaNeue', 'Helvetica', 'Arial', 'sans-serif'],
Expand Down
Loading