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

[gabrielmfern]

---

Summary by cubic

Migrated the Raycast magic link email to Tailwind v4 for React Email, replacing inline styles with utility classes for easier maintenance and consistent styling. Addresses Linear OSS-233.

• Refactors
  • Wrapped the template with Tailwind and imported the shared config.
  • Converted all inline styles to Tailwind classes (layout, text, colors, hr, grayscale).
  • Added a custom raycast font family in tailwind.config.ts and applied it via font-raycast.

[changeset-bot]

⚠️ No Changeset found

Latest commit: b4e6189

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
react-email	Ready	Preview	Comment	Oct 7, 2025 8:55pm
react-email-demo	Ready	Preview	Comment	Oct 7, 2025 8:55pm

[alwaysmeticulous]

🤖 Meticulous was unable to start a test run because no sessions have been recorded yet. Click here to setup session recording.

_{Last updated for commit 9da6877. This comment will update as new commits are pushed.}

[cubic-dev-ai]

No issues found across 2 files

[cubic-dev-ai]

1 issue found across 2 files

Prompt for AI agents (all 1 issues)

Understand the root cause of the following 1 issues and fix them.


<file name="apps/demo/emails/magic-links/raycast-magic-link.tsx">

<violation number="1" location="apps/demo/emails/magic-links/raycast-magic-link.tsx:44">
The new tailwind class leading-6.5 never gets generated: Tailwind’s default line-height scale (and this config) only exposes integer keys like 6 or 7, so the browser drops the class and the text falls back to the component’s default line-height instead of the intended 26px. Swap this for an arbitrary value (e.g. leading-[26px]) to match the original spacing.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

[cubic-dev-ai]

The new tailwind class leading-6.5 never gets generated: Tailwind’s default line-height scale (and this config) only exposes integer keys like 6 or 7, so the browser drops the class and the text falls back to the component’s default line-height instead of the intended 26px. Swap this for an arbitrary value (e.g. leading-[26px]) to match the original spacing.

Prompt for AI agents

Address the following comment on apps/demo/emails/magic-links/raycast-magic-link.tsx at line 44:

<comment>The new tailwind class leading-6.5 never gets generated: Tailwind’s default line-height scale (and this config) only exposes integer keys like 6 or 7, so the browser drops the class and the text falls back to the component’s default line-height instead of the intended 26px. Swap this for an arbitrary value (e.g. leading-[26px]) to match the original spacing.</comment>

<file context>
@@ -25,47 +27,52 @@ export const RaycastMagicLinkEmail = ({
+            🪄 Your magic link
+          &lt;/Heading&gt;
+          &lt;Section className=&quot;my-6 mx-0&quot;&gt;
+            &lt;Text className=&quot;text-base leading-6.5&quot;&gt;
+              &lt;Link className=&quot;text-[#FF6363]&quot; href={magicLink}&gt;
+                👉 Click here to sign in 👈
</file context>

Suggested change

	<Text className="text-base leading-6.5">
	<Text className="text-base leading-[26px]">

✅ Addressed in 8ae794a