react-email

Generate React Email templates with Tailwind and Row/Column layouts.

Updated Feb 6, 2026

Search Tags:#i18n #tailwind #react-email #row-column #pixelBasedPreset #html-email #frontend-email

Ready to run

npx skills add https://github.com/Vishvsalvi/magicmail --skill react-email-vishvsalvi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/Vishvsalvi/magicmail/tree/main/.agents/skills/react-email
Command: npx skills add https://github.com/Vishvsalvi/magicmail --skill react-email-vishvsalvi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React Email enables building robust HTML emails with React components, Tailwind presets, and safe defaults.

Core Features & Use Cases

Generate production-ready email templates using Html, Body, Tailwind, and Row/Column
Enforce email-client constraints (no flexbox, no media queries, pixel-based presets)
Support internationalization and accessible markup for emails

Quick Start

Create a template using Tailwind with the pixelBasedPreset, then compose a simple email using core components.

Frequently Asked Questions about react-email

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build compliant HTML emails using React components?▼

Build compliant HTML emails using React by generating production-ready templates with core components, Tailwind presets, and safe defaults to enforce email-client constraints.

Why does my HTML email break in certain email clients when using flexbox or media queries?▼

HTML emails break because many clients lack flexbox and media query support. Avoid them by using pixel-based presets and Row/Column layouts to enforce client compatibility.

Can I use Tailwind CSS to style React email templates?▼

Yes, you can use Tailwind CSS to style React email templates by applying a pixel-based Tailwind preset to generate production-ready markup with enforced email-client constraints.

How do I add internationalization to my React email templates?▼

Add internationalization to React email templates by applying the built-in i18n support to generate accessible markup that covers common multilingual use cases.

What is the best way to structure complex layouts in HTML emails without flexbox?▼

The best way to structure HTML email layouts without flexbox is composing them with Row and Column components to ensure production-ready patterns across various email clients.

Do I need to manually import every component when creating React email templates?▼

No, you do not need to manually manage unused imports; the system enforces best practices by importing only the components actually used to ensure safe asset handling.