feat(demo): use Tailwind v4 in stack-overflow-tips.tsx

[bukinoshita]

---

Summary by cubic

Switches the StackOverflow Tips demo email to Tailwind by adding the Tailwind provider and aligning dependencies. This enables Tailwind styling and ensures compatibility with Tailwind v4.1.

• Refactors

  • Import Tailwind from '@react-email/tailwind' in the newsletter template.

• Dependencies

  • Pin '@react-email/components' to '1.0.0-tailwindv4.1' in apps/demo.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 42c4dcf

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 6, 2025 5:32pm
react-email-demo	Error			Oct 6, 2025 5:32pm

[socket-security]

No dependency changes detected. Learn more about Socket for GitHub.

👍 No dependency changes detected in pull request

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

[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/tailwind.config.ts">

<violation number="1" location="apps/demo/emails/tailwind.config.ts:7">
The font stack spells the brand font as HelveticaNeue (no space), so the generated CSS can’t select `&#39;Helvetica Neue&#39;`. That forces the Stack Overflow email to fall back to plain Helvetica, breaking the intended typography across clients.</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 font stack spells the brand font as HelveticaNeue (no space), so the generated CSS can’t select 'Helvetica Neue'. That forces the Stack Overflow email to fall back to plain Helvetica, breaking the intended typography across clients.

Prompt for AI agents

Address the following comment on apps/demo/emails/tailwind.config.ts at line 7:

<comment>The font stack spells the brand font as HelveticaNeue (no space), so the generated CSS can’t select `&#39;Helvetica Neue&#39;`. That forces the Stack Overflow email to fall back to plain Helvetica, breaking the intended typography across clients.</comment>

<file context>
@@ -2,4 +2,10 @@ import { pixelBasedPreset, type TailwindConfig } from &#39;@react-email/components&#39;;
   presets: [pixelBasedPreset],
+  theme: {
+    fontFamily: {
+      &#39;stack-overflow&#39;: &#39;HelveticaNeue,Helvetica,Arial,sans-serif&#39;,
+      &#39;stack-overflow-mono&#39;: &#39;Consolas,monospace&#39;,
+    },
</file context>

Suggested change

	'stack-overflow': 'HelveticaNeue,Helvetica,Arial,sans-serif',
	'stack-overflow': ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],