Skip to main content
ReactUI Email provides full Tailwind CSS support for styling email templates. The Tailwind component from React Email converts Tailwind classes into inline styles that work across all email clients.

​
Basic usage

Wrap your email content with the Tailwind component to enable Tailwind CSS: 
import { Body, Container, Html, Tailwind, Text } from "@react-email/components";

export default function Email() {
  return (
    <Html>
      <Tailwind>
        <Body className="bg-gray-50 font-sans">
          <Container className="mx-auto px-4 py-5">
            <Text className="text-lg font-semibold text-gray-900">
              Hello World
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}
The Tailwind component automatically converts Tailwind classes to inline styles during rendering, ensuring compatibility with all email clients.

​
Custom Tailwind configuration

You can extend Tailwind’s default configuration to match your brand. ReactUI Email templates include custom configurations for colors, fonts, and border radius.

​
Basic configuration

import { Html, Tailwind } from "@react-email/components";

export default function Email() {
  return (
    <Html>
      <Tailwind
        config={{
          theme: {
            extend: {
              colors: {
                brand: "#0099ff",
                primary: "#1a1a1a",
              },
            },
          },
        }}
      >
        {/* Email content */}
      </Tailwind>
    </Html>
  );
}

​
Complete configuration example

Here’s a real example from the ReactUI Email templates:
src/email/myna-ui/1-welcome-email.tsx
import { Html, Tailwind, Body, Container } from "@react-email/components";

export default function MynaUIWelcomeEmail() {
  return (
    <Html>
      <Tailwind
        config={{
          darkMode: "class",
          theme: {
            extend: {
              fontFamily: {
                sans: ["var(--font-sans)"],
              },
              colors: {
                brand: "#155dfc",
                background: "hsl(var(--background))",
                foreground: "hsl(var(--foreground))",
                primary: {
                  DEFAULT: "#314158",
                  foreground: "hsl(var(--primary-foreground))",
                },
                text: {
                  light: "#314158",
                  dark: "#f1f5f9",
                },
              },
              borderRadius: {
                lg: "var(--radius)",
                md: "calc(var(--radius) - 3.5px)",
                sm: "calc(var(--radius) - 4px)",
              },
            },
          },
        }}
      >
        <Body className="font-sans">
          <Container className="mx-auto mb-5 px-4 py-5">
            {/* Email content */}
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

​
Supported Tailwind features

​
Spacing and sizing

All spacing utilities work as expected: 
<Section className="mt-4 mb-6 px-4 py-5">
  <Text className="p-4 m-0">Content</Text>
</Section>

​
Typography

<Text className="text-base font-semibold leading-6 tracking-tight">
  Styled text
</Text>

<Text className="text-sm">Small text</Text>
<Text className="text-base">Base text</Text>
<Text className="text-lg">Large text</Text>
<Text className="text-xl">Extra large</Text>
<Text className="text-2xl">2X large</Text>

​
Colors

<Text className="text-gray-900 bg-gray-50">
  Colored text with background
</Text>

<Button className="bg-blue-600 text-white">
  Colored button
</Button>

​
Layout

<Container className="mx-auto max-w-2xl">
  <Section className="flex items-center justify-center">
    <Text>Centered content</Text>
  </Section>
</Container>

​
Borders and shadows

<Section className="border border-gray-200 rounded-lg">
  <Text>Content with border</Text>
</Section>
Box shadows have limited support in email clients. Use borders instead when possible.

​
Email-specific limitations

Not all Tailwind features work reliably in email clients. Here’s what to avoid:
While modern email clients support flexbox, many older clients don’t. Use table-based layouts (via Row and Column components) for better compatibility.
// ❌ Limited support
<div className="flex gap-4">
  <div className="flex-1">Content</div>
</div>

// ✅ Better compatibility
<Row>
  <Column>Content</Column>
</Row>
Absolute and fixed positioning don’t work in most email clients.
// ❌ Avoid
<div className="absolute top-0 right-0">Badge</div>

// ✅ Use alignment instead
<Section className="text-right">
  <Text>Badge</Text>
</Section>
CSS transforms and animations are not supported in email.
// ❌ Avoid
<div className="transform rotate-45 transition-all">

// ✅ Use static styles
<div className="bg-blue-600">
Hover states work in some clients but not all. Don’t rely on them for critical functionality.
// ⚠️ Limited support
<Button className="hover:bg-blue-700">
  Button
</Button>

​
Using custom colors

Define your brand colors in the Tailwind config:
1

Add colors to config

<Tailwind
  config={{
    theme: {
      extend: {
        colors: {
          brand: "#0099ff",
          accent: "#ff6719",
          muted: "#738A94",
        },
      },
    },
  }}
>
2

Use custom colors in classes

<Button className="bg-brand text-white px-6 py-3 rounded-lg">
  Get Started
</Button>

<Text className="text-muted">
  Secondary text
</Text>

​
Responsive design

Use responsive classes for mobile-friendly emails: 
<Section className="px-4 sm:px-6">
  <Text className="text-base sm:text-lg">
    Responsive text
  </Text>
</Section>
Most email clients support media queries, but test your templates on actual devices to ensure they work as expected.

​
Inline styles with Tailwind

Sometimes you need inline styles for maximum compatibility. You can combine Tailwind classes with inline styles: 
<table
  style={{
    border: "1px solid rgb(39 39 42 / 0.1)",
    borderRadius: "8px",
    borderCollapse: "collapse",
  }}
  className="w-full"
>
  <tr>
    <td className="p-6">
      Content
    </td>
  </tr>
</table>

​
Best practices

Keep it simple

Use basic Tailwind utilities. Complex layouts may not work in all clients.

Test thoroughly

Test your emails in multiple clients, especially Outlook and Gmail.

Use semantic colors

Define brand colors in the config instead of using arbitrary values.

Mobile first

Most emails are opened on mobile. Design for small screens first.
The Tailwind component from React Email automatically handles converting classes to inline styles, so you don’t need to worry about email client CSS support.

​
Common patterns

​
Button with brand color

src/email/components/button/single.tsx
<Button
  className="bg-brand rounded-[8px] px-[24px] py-[12px] text-center text-[14px] font-semibold text-zinc-50"
  href="https://example.com"
>
  Get Started
</Button>

​
Card layout

<Section className="rounded-lg bg-gray-50 p-6 border border-gray-200">
  <Text className="text-lg font-semibold text-gray-900 m-0">
    Card title
  </Text>
  <Text className="text-base text-gray-600 mt-2">
    Card description
  </Text>
</Section>

​
Image with rounded corners

<Img
  src="https://example.com/image.png"
  alt="Description"
  className="w-full rounded-lg"
/>

​
Next steps

Customization

Learn how to customize templates with your branding

React Email basics

Understand React Email components and patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us