feat(tailwind): Add css configs to Taliwind component

[JBezerra]

Summary

Adds support for CSS-based configuration to the <Tailwind> component, aligning with Tailwind CSS v4's CSS-first approach.

This addresses the discussion in #2863

Changes

• Added theme and utility prop to Tailwind component
• Updated setupTailwind to process custom CSS configurations

Example Usage (Using Vite)

import customTheme from './theme.css?inline';

<Tailwind theme={customTheme}>
  <div className="bg-brand p-huge font-sans">
    Custom themed content
  </div>
</Tailwind>

---

Summary by cubic

Add CSS-first configuration to the Tailwind component with new theme and utility props. This brings Tailwind v4-style CSS configs while keeping support for the existing config prop.

• New Features
  • theme prop: pass a CSS string with @theme variables to customize tokens (colors, fonts, spacing, etc.).
  • utility prop: pass a CSS string to define custom utility classes and animations.
  • Works with config: theme and utility can be combined with the existing config prop.
  • Internals: setupTailwind now accepts { config, cssConfigs } and loads custom CSS in theme and utilities layers.

^{Written for commit 4ab3e8a. Summary will update on new commits.}

[vercel]

@JBezerra is attempting to deploy a commit to the resend Team on Vercel.

A member of the Team first needs to authorize it.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4ab3e8a

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

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/resend/react-email/@react-email/tailwind@2926

commit: 4ab3e8a

[cubic-dev-ai]

1 issue found across 6 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="playground/README.md">

<violation number="1" location="playground/README.md:11">
P3: Documentation path is inconsistent with the example and project structure; users are told to create `/emails` but templates live under `playground/emails`.</violation>
</file>

---

Since this is your first cubic review, here's how it works:

• cubic automatically reviews your code and comments on bugs and improvements
• Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
• Ask questions if you need clarification on any suggestion

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P3: Documentation path is inconsistent with the example and project structure; users are told to create /emails but templates live under playground/emails.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At playground/README.md, line 11:

<comment>Documentation path is inconsistent with the example and project structure; users are told to create `/emails` but templates live under `playground/emails`.</comment>

<file context>
@@ -8,9 +8,9 @@ It includes all components directly from source with a path alias import of `@re
 ### 1. Create an email template
 
-Create a new file at `playground/emails/testing.tsx` 
+Create a new file at `/emails` 
 
-```tsx emails/testing.tsx
</file context>

[JBezerra]

Well, that's not perfectly right. I'm taking the fair assumption that is it obvious that root is playground given the README lives on it.

Along with this, I've removed testing.tsx because that was simply wrong given the phrase is "Create a new file at [...]"

[JBezerra]

⚠️ No Changeset found

Latest commit: f526080

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

Not sure of the process here, if this change should immediately bump the version. I leave this answer to @gabrielmfern.