Styling props - ReactUI Email

ReactUI Email uses Tailwind CSS for styling, but not all Tailwind features work consistently across email clients. This guide covers the styling props and classes that are safe to use in production email templates.

Tailwind configuration

Every email template requires a Tailwind wrapper component with configuration:

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

export default function Email() {
  return (
    <Html>
      <Tailwind
        config={{
          darkMode: "class",
          theme: {
            extend: {
              colors: {
                brand: "#ff6719",
                primary: {
                  DEFAULT: "hsl(var(--primary))",
                  foreground: "hsl(var(--primary-foreground))",
                },
              },
            },
          },
        }}
      >
        <Body className="font-sans">
          {/* Email content */}
        </Body>
      </Tailwind>
    </Html>
  );
}

config

object

required

Tailwind configuration object that extends the default theme

darkMode

string

Dark mode strategy. Use "class" for manual control

Color system

Define your brand colors in the Tailwind config for consistent theming:

Brand colors

config={{
  theme: {
    extend: {
      colors: {
        brand: "#ff6719",
        muted: "#738A94",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
      },
    },
  },
}}

brand

string

Primary brand color (hex format recommended)

muted

string

Muted or secondary color for less prominent elements

background

string

Background color (supports HSL with CSS variables)

foreground

string

Text color for content on background

Color usage in classes

Once defined, use colors with standard Tailwind syntax:

<Button className="bg-brand text-white">
  Get Started
</Button>

<Text className="text-primary/80">
  Welcome message
</Text>

Use opacity modifiers (/80, /75, /60) for lighter color variants: text-primary/80 creates 80% opacity.

Spacing utilities

Spacing in email templates uses Tailwind’s spacing scale, but explicit pixel values often work more reliably:

Margin classes

m-{size}

className

Margin on all sides

m-0 - 0px
m-4 - 16px
m-8 - 32px

mx-{size}

className

Horizontal margin (left and right)

mx-auto - Auto margins (centers element)
mx-0 - 0px horizontal margin

my-{size}

className

Vertical margin (top and bottom)

my-4 - 16px vertical margin
my-8 - 32px vertical margin

mt-{size}, mb-{size}, ml-{size}, mr-{size}

className

Individual side margins

mt-4 - 16px top margin
mb-8 - 32px bottom margin

Padding classes

p-{size}

className

Padding on all sides

p-0 - 0px
p-4 - 16px

px-{size}

className

Horizontal padding

px-4 - 16px horizontal padding
px-[24px] - Explicit 24px padding

py-{size}

className

Vertical padding

py-5 - 20px vertical padding
py-[12px] - Explicit 12px padding

For precise control, use explicit pixel values in square brackets: px-[24px] instead of px-6.

Typography

Text styling classes for fonts, sizes, weights, and line heights:

Font family

config={{
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)"],
      },
    },
  },
}}

Apply font family:

<Body className="font-sans">
  {/* Content uses sans-serif font */}
</Body>

Stick to web-safe fonts (Arial, Helvetica, Georgia, Times New Roman) or use font stacks with fallbacks for maximum compatibility.

Font weight

font-{weight}

className

Weight options:

font-normal - 400 (regular)
font-medium - 500
font-semibold - 600
font-bold - 700

Line height

leading-{size}

className

Line height values:

leading-tight - 1.25
leading-6 - 24px (1.5rem)
leading-[4rem] - Explicit 4rem value

Text alignment

text-{align}

className

Alignment options:

text-left - Left align
text-center - Center align
text-right - Right align

Text decoration

underline

className

Adds underline to text (commonly used for links)

underline-offset-{size}

className

Controls underline distance:

underline-offset-2 - 2px offset

Border and radius

Border utilities for creating outlines and rounded corners:

Border width

border-{width}

className

Border width:

border - 1px border
border-[1px] - Explicit 1px
border-2 - 2px border

Border style

border-solid

className

Solid border style (default)

Border color

border-{color}

className

Border color:

border-zinc-200 - Light gray
border-[#eaeaea] - Explicit hex color

Border radius

config={{
  theme: {
    extend: {
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 3.5px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
}}

rounded-{size}

className

Corner rounding:

rounded-lg - Large radius (from config)
rounded-[8px] - Explicit 8px radius (recommended)
rounded-[12px] - Explicit 12px radius
rounded-2xl - Very large radius

Use explicit pixel values like rounded-[8px] for consistent rendering. Semantic values (rounded-lg) may vary across email clients.

Background colors

bg-{color}

className

Background color:

bg-white - White background
bg-brand - Brand color background
bg-[hsl(240,4.8%,95.9%)] - HSL color
bg-[hsl(240,4.8%,95.9%)]/50 - With 50% opacity

Layout utilities

Display

flex

className

Flexbox display (limited email client support - use with caution)

w-{size}

className

Width:

w-full - 100% width
w-fit - Fit content
w-1/2 - 50% width
w-1/3 - 33.33% width
w-[50px] - Explicit 50px width

h-{size}

className

Height:

h-auto - Auto height
h-[200px] - Explicit height

Alignment

items-{align}

className

Vertical alignment (use with flex):

items-center - Center vertically
items-start - Align to top

justify-{align}

className

Horizontal alignment (use with flex):

justify-center - Center horizontally
justify-between - Space between items

Flex direction

flex-{direction}

className

Flex direction:

flex-col - Vertical stacking
flex-row - Horizontal layout

Flexbox support is inconsistent in email clients. Use table-based layouts (Row/Column components) for critical layout structure.

Object fit

For images:

object-{fit}

className

Image object fit:

object-cover - Covers area, may crop
object-contain - Contains within area

aspect-{ratio}

className

Aspect ratio:

aspect-video - 16:9 ratio
aspect-square - 1:1 ratio

Opacity

Control element transparency:

opacity-{value}

className

Opacity level:

opacity-50 - 50% opacity
opacity-75 - 75% opacity

Or use color opacity modifiers:

<Text className="text-primary/80">
  80% opacity text
</Text>

Cursor

cursor-{style}

className

Cursor style:

cursor-pointer - Pointer on hover (for clickable elements)

Inline styles

For properties not supported by Tailwind or that need precise control, use inline styles:

<table
  style={{
    border: "1px solid rgb(39 39 42 / 0.2)",
    borderRadius: "8px",
    borderCollapse: "collapse",
    display: "flex",
    justifyContent: "center",
    width: "fit-content",
    margin: "0 auto",
    alignItems: "center",
  }}
>
  {/* Table content */}
</table>

Use inline styles for:

Border properties on table elements
Precise positioning
Properties not available in Tailwind
Client-specific workarounds

Common style patterns

Reusable style combinations for common email elements:

Card/panel styling

className="rounded-[12px] bg-[hsl(240,4.8%,95.9%)]/50 border border-solid border-zinc-200 p-[24px]"

Primary button

className="bg-brand rounded-[8px] px-[24px] py-[12px] text-center text-[14px] font-semibold text-zinc-50"

Secondary button

className="rounded-[8px] border-[1px] border-zinc-200 bg-white px-[24px] py-[12px] text-center text-[14px] font-semibold text-zinc-950"

Body text

className="text-[16px] leading-6 text-primary/80"

Heading text

className="text-[32px] font-bold leading-tight text-primary"

Link text

className="text-primary/75 underline underline-offset-2"

Email client compatibility

Not all CSS properties work in all email clients. Here’s what to avoid:

Avoid these CSS features

These features have poor email client support:

CSS Grid (grid, grid-template-columns)
CSS Flexbox (use sparingly, prefer table layouts)
Position absolute/fixed
Transform and transition animations
Box-shadow (works in some clients, but unreliable)
Custom fonts via @font-face (use web-safe fonts)

Safe alternatives

Instead of Grid: Use table-based layouts with Row/Column
Instead of Flexbox: Use table cells with alignment
Instead of position: Use table structure and spacing
Instead of box-shadow: Use borders or background gradients

Testing recommendations

Always test your styled emails in these clients:

Gmail (web, iOS, Android)
Outlook (Windows, Mac, web)
Apple Mail (iOS, macOS)
Yahoo Mail
Thunderbird

Use tools like Litmus or Email on Acid for comprehensive cross-client testing.

Best practices

Use explicit values: Prefer px-[24px] over px-6 for consistency
Test across clients: Always test in major email clients before sending
Progressive enhancement: Start with basic styling, add enhancements carefully
Inline critical styles: Use inline styles for essential layout properties
Keep it simple: Simpler designs have better cross-client compatibility
Use color opacity: Leverage /80, /75 modifiers instead of separate color definitions

Email Components

​Tailwind configuration

​Color system

​Brand colors

​Color usage in classes

​Spacing utilities

​Margin classes

​Padding classes

​Typography

​Font family

​Font size

​Font weight

​Line height

​Text alignment

​Text decoration

​Border and radius

​Border width

​Border style

​Border color

​Border radius

​Background colors

​Layout utilities

​Display

​Alignment

​Flex direction

​Object fit

​Opacity

​Cursor

​Inline styles

​Common style patterns

​Card/panel styling

​Primary button

​Secondary button

​Body text

​Heading text

​Link text

​Email client compatibility

​Avoid these CSS features

​Safe alternatives

​Testing recommendations

​Best practices

Build docs developers (and LLMs) love

Tailwind configuration

Color system

Brand colors

Color usage in classes

Spacing utilities

Margin classes

Padding classes

Typography

Font family

Font size

Font weight

Line height

Text alignment

Text decoration

Border and radius

Border width

Border style

Border color

Border radius

Background colors

Layout utilities

Display

Alignment

Flex direction

Object fit

Opacity

Cursor

Inline styles

Common style patterns

Card/panel styling

Primary button

Secondary button

Body text

Heading text

Link text

Email client compatibility

Avoid these CSS features

Safe alternatives

Testing recommendations

Best practices