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

[bukinoshita]

---

Summary by cubic

Refactored the Notion magic link demo email to use Tailwind classes via @react-email/tailwind, removing inline styles for simpler styling and easier maintenance. Updated the demo to the Tailwind-compatible @react-email/components package.

• Refactors

  • Wrapped content with Tailwind and replaced inline styles with utility classes.
  • Simplified layout and typography; removed unused style constants.
  • No functional changes to the email content.

• Dependencies

  • Updated @react-email/components to 1.0.0-tailwindv4.1.

[changeset-bot]

⚠️ No Changeset found

Latest commit: af781e0

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 2, 2025 1:17pm
react-email-demo	Ready	Preview	Comment	Oct 2, 2025 1:17pm

[socket-security]

All alerts resolved. Learn more about Socket for GitHub.

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report

[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 af781e0. This comment will update as new commits are pushed.}

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​radix-ui/​react-tabs@​1.1.2

View full report

[cubic-dev-ai]

2 issues found across 3 files

Prompt for AI agents (all 2 issues)

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


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

<violation number="1" location="apps/demo/emails/magic-links/notion-magic-link.tsx:45">
`w-9/10` isn’t generated by the email Tailwind config, so the login code block loses its intended 90% width. Please switch to an arbitrary value utility.</violation>

<violation number="2" location="apps/demo/emails/magic-links/notion-magic-link.tsx:51">
`mb-9.5` isn’t part of the Tailwind preset you’re using, so the helper text loses its 38px bottom margin. Use an arbitrary spacing value to keep the layout consistent.</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]

mb-9.5 isn’t part of the Tailwind preset you’re using, so the helper text loses its 38px bottom margin. Use an arbitrary spacing value to keep the layout consistent.

Prompt for AI agents

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

<comment>`mb-9.5` isn’t part of the Tailwind preset you’re using, so the helper text loses its 38px bottom margin. Use an arbitrary spacing value to keep the layout consistent.</comment>

<file context>
@@ -23,66 +25,54 @@ export const NotionMagicLinkEmail = ({
+          &lt;Text className=&quot;text-[#ababab] text-sm mt-3.5 mb-4&quot;&gt;
+            If you didn&amp;apos;t try to login, you can safely ignore this email.
+          &lt;/Text&gt;
+          &lt;Text className=&quot;text-[#ababab] text-sm mt-3.5 mb-9.5&quot;&gt;
+            Hint: You can set a permanent password in Settings &amp; members → My
+            account.
</file context>

Suggested change

	<Text className="text-[#ababab] text-sm mt-3.5 mb-9.5">
	<Text className="text-[#ababab] text-sm mt-3.5 mb-[38px]">

[cubic-dev-ai]

w-9/10 isn’t generated by the email Tailwind config, so the login code block loses its intended 90% width. Please switch to an arbitrary value utility.

Prompt for AI agents

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

<comment>`w-9/10` isn’t generated by the email Tailwind config, so the login code block loses its intended 90% width. Please switch to an arbitrary value utility.</comment>

<file context>
@@ -23,66 +25,54 @@ export const NotionMagicLinkEmail = ({
+          &lt;Text className=&quot;text-[#333] text-sm my-6 mb-3.5&quot;&gt;
+            Or, copy and paste this temporary login code:
+          &lt;/Text&gt;
+          &lt;code className=&quot;inline-block py-4 px-[4.5%] w-9/10 bg-[#f4f4f4] rounded-md border border-solid border-[#eee] text-[#333]&quot;&gt;
+            {loginCode}
+          &lt;/code&gt;
</file context>