feat(tailwind): Add css configs to `Taliwind` component by JBezerra · Pull Request #2926 · resend/react-email

JBezerra · 2026-02-02T18:11:49Z

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 · 2026-02-02T18:11:54Z

@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 · 2026-02-02T18:11:57Z

⚠️ 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 · 2026-02-02T18:15:01Z

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 · 2026-02-02T18:18:18Z

playground/README.md

 ### 1. Create an email template

-Create a new file at `playground/emails/testing.tsx` 
+Create a new file at `/emails` 


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>

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 · 2026-02-02T18:26:48Z

⚠️ 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.

jasongerbes · 2026-03-09T04:23:17Z

Could you please check whether this fixes compatibility with the Tailwind CSS IntelliSense VS Code plugin.

The IntelliSense plugin requires a .css file that imports a Tailwind CSS stylesheet (e.g. @import "tailwindcss").

When using React Email with Tailwind in a monorepo setup, no such .css file exists.

For non-monorepo setups, the IntelliSense plugin will resolve the application's .css file which may not match the config used by the <Tailwind> component (e.g. pixel based preset, custom theme overrides, etc).

gabrielmfern

left some comments, for some small changes before we can merge

gabrielmfern · 2026-03-18T20:32:19Z

playground/README.md


 ### 1. Create an email template

-Create a new file at `playground/emails/testing.tsx` 


I believe this is unrelated, can you revert?

gabrielmfern · 2026-03-18T20:32:19Z

playground/emails/.gitignore

@@ -1,2 +1,3 @@
-**/*.tsx
+**/*
+# Ignore all files in the emails directory except for the example.tsx file


This is also unrelated, feel free to open a second PR with these changes, but I'd rather you revert them here

gabrielmfern · 2026-03-18T20:32:19Z

packages/tailwind/src/utils/tailwindcss/setup-tailwind.ts

+  config?: TailwindConfig;
+  cssConfigs?: CSSConfigs;
+}
+export async function setupTailwind({


maybe it should be either a config, or a css config? how does tailwind prioritize between them when they're both present?

gabrielmfern · 2026-03-18T20:32:20Z

packages/tailwind/src/utils/tailwindcss/setup-tailwind.spec.ts


  expect(generate(getStyleSheet())).toMatchInlineSnapshot(
-    `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-500: oklch(63.7% 0.237 25.331);--color-blue-300: oklch(80.9% 0.105 251.813);--color-slate-900: oklch(20.8% 0.042 265.755)}}@layer utilities{.bg-slate-900{background-color:var(--color-slate-900)}.text-red-500{color:var(--color-red-500)}.sm\\:bg-blue-300{@media (width>=40rem){background-color:var(--color-blue-300)}}}"`,
+    `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-500: oklch(63.7% 0.237 25.331);--color-blue-300: oklch(80.9% 0.105 251.813);--color-slate-900: oklch(20.8% 0.042 265.755)}}@layer utilities{.bg-slate-900{background-color:var(--color-slate-900)}.text-red-500{color:var(--color-red-500)}.sm\\:bg-blue-300{@media (width>=40rem){background-color:var(--color-blue-300)}}}@layer theme;@layer utilities;"`,


why did this change?

gabrielmfern · 2026-03-18T20:32:20Z

packages/tailwind/src/tailwind.tsx

+ * Stringifies the data to a JSON string that is safe to use.
+ * It will replace functions with their string representation.
+ */
+function JSONStringify(data: object) {


I don't like having a separate function like this for something only used once

gabrielmfern · 2026-03-18T20:32:20Z

packages/tailwind/src/tailwind.tsx

+/**
+ * The pixel based preset is the preset recommended to use for emails.
+ * It is used to style the email with a pixel based system.
+ */


can you revert this comment?

gabrielmfern · 2026-03-18T20:32:21Z

packages/tailwind/src/tailwind.tsx

+
+export interface TailwindProps {
+  children: React.ReactNode;
+  /** Tailwind config object. Used in Tailwind v3. */


This comment might confuse people, since it works in v4 and we don't support v3 at all anymore. I think it's better without

gabrielmfern · 2026-03-18T20:32:21Z

packages/tailwind/src/tailwind.tsx

 import { cloneElementWithInlinedStyles } from './utils/tailwindcss/clone-element-with-inlined-styles';
 import { setupTailwind } from './utils/tailwindcss/setup-tailwind';

+export type CSSString = string;


can you just inline string where this is used?

gabrielmfern · 2026-03-18T20:32:21Z

packages/tailwind/src/tailwind.spec.tsx

    });
  });

+  describe('with theme', () => {


maybe with css configuration instead?

JBezerra added 2 commits February 2, 2026 11:46

feat(tailwind): add theme and utility props

ba99b47

fix: tailwind api

f526080

cubic-dev-ai bot reviewed Feb 2, 2026

View reviewed changes

JBezerra added 2 commits February 2, 2026 15:36

fix: tests

8d0871d

fix: lint

4ab3e8a

gabrielmfern self-requested a review March 18, 2026 20:06

gabrielmfern requested changes Mar 18, 2026

View reviewed changes


		### 1. Create an email template

		Create a new file at `playground/emails/testing.tsx`

Conversation

JBezerra commented Feb 2, 2026 • edited by cubic-dev-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Example Usage (Using Vite)

Summary by cubic

Uh oh!

vercel bot commented Feb 2, 2026

Uh oh!

changeset-bot bot commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

pkg-pr-new bot commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JBezerra commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

jasongerbes commented Mar 9, 2026

Uh oh!

gabrielmfern left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JBezerra commented Feb 2, 2026 •

edited by cubic-dev-ai bot

Loading

changeset-bot bot commented Feb 2, 2026 •

edited

Loading

pkg-pr-new bot commented Feb 2, 2026 •

edited

Loading

cubic-dev-ai bot Feb 2, 2026 •

edited

Loading

JBezerra commented Feb 2, 2026 •

edited

Loading