.agents/skills/react-email/references/STYLING.md
Comprehensive styling reference for React Email templates.
Use the Tailwind component for styling if the project uses Tailwind CSS. Otherwise, use inline styles.
import { Tailwind, pixelBasedPreset } from '@react-email/components';
<Tailwind
config={{
presets: [pixelBasedPreset],
theme: {
extend: {
colors: {
brand: '#007bff',
},
},
},
}}
>
</Tailwind>
Email clients don't support rem units. Always use pixelBasedPreset in your Tailwind configuration to convert rem-based utilities to pixels:
import { pixelBasedPreset } from '@react-email/components';
<Tailwind config={{ presets: [pixelBasedPreset] }}>
Email clients have significant CSS restrictions. Follow these rules:
Row/Column components or tablessm:, md:, lg:, xl: prefixes don't workdark:, light: prefixes don't workpixelBasedPreset for pixel conversionAlways specify border style and reset other sides when needed:
// Correct - specify border style
<div className="border-solid border border-gray-300" />
// Correct - single side border with reset
<div className="border-none border-l border-solid border-l-gray-300" />
// Incorrect - missing border style
<div className="border border-gray-300" />
Always define <Head /> inside <Tailwind> when using Tailwind CSS:
<Html>
<Tailwind config={{ presets: [pixelBasedPreset] }}>
<Head />
<Body>...</Body>
</Tailwind>
</Html>
Only include props that the component actually uses:
const Email = ({ source }: { source: string }) => {
return (
<div>
<a href={source}>Click here</a>
</div>
);
};
Email.PreviewProps = {
source: "https://example.com",
};
<Body className="font-sans py-10 bg-gray-100">
White background, centered, left-aligned content:
<Container className="mx-auto bg-white p-6 rounded">
Include physical address, unsubscribe link, current year:
<Section className="text-center text-gray-500 text-sm">
<Text className="m-0">123 Main St, City, State 12345</Text>
<Text className="m-0">© {new Date().getFullYear()} Company Name</Text>
<Link href={unsubscribeUrl}>Unsubscribe</Link>
</Section>
Bold, larger font, larger margins:
<Heading className="text-2xl font-bold text-gray-900 mb-4">
Regular weight, smaller font, smaller margins:
<Text className="text-base text-gray-700 mb-3">
Use consistent spacing that respects content hierarchy. Larger margins for headings, smaller for body text.
w-full, h-auto)alt text for accessibilityAlways use box-border to prevent padding overflow:
<Button
href="https://example.com"
className="bg-blue-600 text-white px-5 py-3 rounded box-border block text-center no-underline"
>
Click Here
</Button>
Always design for mobile by default:
Use Row and Column components instead of flexbox/grid:
<Row>
<Column className="w-1/2">Left content</Column>
<Column className="w-1/2">Right content</Column>
</Row>
When requested, use dark backgrounds:
#000)#151516)<Body className="bg-[#151516]">
<Container className="bg-black text-white">
Before creating emails, collect these colors from the user:
#1a1a1a for light backgrounds)#6b7280)#f4f4f5)#ffffff)Create a centralized Tailwind config file that all email templates import. Using satisfies TailwindConfig provides intellisense support for all configuration options:
// emails/tailwind.config.ts
import { pixelBasedPreset, type TailwindConfig } from '@react-email/components';
export default {
presets: [pixelBasedPreset],
theme: {
extend: {
colors: {
brand: {
primary: '#007bff',
secondary: '#6c757d',
},
},
},
},
} satisfies TailwindConfig;
// For non-Tailwind brand assets (optional)
export const brandAssets = {
logo: {
src: 'https://example.com/logo.png',
alt: 'Company Name',
width: 120,
},
};
Import the shared config in every email template:
import tailwindConfig, { brandAssets } from './tailwind.config';
<Tailwind config={tailwindConfig}>
<Body className="bg-gray-100 font-sans">
<Container className="bg-white p-6">
<Button className="bg-brand-primary text-white">Action</Button>
</Container>
</Body>
</Tailwind>
tailwind.config.ts onlybg-brand-primary not bg-[#007bff]Direct users to place brand assets in appropriate locations:
emails/static/.Font component with a web font URL (Google Fonts, Adobe Fonts, or self-hosted).Example prompt for gathering brand info:
"Before I create your email template, I need some brand information to ensure consistency. Could you provide:
- Your primary brand color (hex code, e.g., #007bff)
- Your logo URL (must be a publicly accessible PNG or JPEG)
- Any secondary colors you'd like to use
- Style preference (modern/minimal or classic/traditional)"
<style> tags