react-email

Name: react-email
Availability: InStock
Author: devkit-stack

Create React Email templates with Tailwind styling and safe asset hosting.

Updated Feb 5, 2026

Search Tags:#tailwind #email-templates #react-email #baseURL #static-hosting #row-column #pixelBasedPreset

Ready to run

npx skills add https://github.com/devkit-stack/Claude --skill react-email-devkit-stack

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/devkit-stack/Claude/tree/main/.claude/skills/react-email
Command: npx skills add https://github.com/devkit-stack/Claude --skill react-email-devkit-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The React Email Skill standardizes the creation of production-ready email templates built with React Email, ensuring consistent structure, accessibility, and best-practice guidance across teams.

Core Features & Use Cases

Provides a structured approach to composing emails using Row/Column layouts with the Tailwind preset and pixelBasedPreset.
Emphasizes safe asset hosting patterns, absolute image URLs, and responsive, mobile-friendly layouts that render reliably in major email clients.
Includes guidance on asset placement, static file handling, and how to test and ship ready-to-send emails for transactional and marketing use cases.

Quick Start

Scaffold a Welcome email using a Tailwind-enabled template, include a preview text, a CTA button, and an image referencing the static folder via the baseURL pattern (e.g., baseURL/static/logo.png).
Ensure the Tailwind config uses pixelBasedPreset and do not rely on rem units.
Validate that the template uses Row/Column for multi-column layouts and includes accessible alt text for images.

Frequently Asked Questions about react-email

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

FAQPage Schema

How do I build responsive HTML emails with React?▼

Using React Email with Tailwind styling ensures consistent structure and accessibility for transactional and marketing emails. It standardizes production-ready templates through Row and Column layouts, enforcing safe patterns like absolute image URLs and proper asset hosting to render reliably across major email clients.

How do I use Tailwind in React Email templates?▼

Using Tailwind in React Email templates requires configuring the Tailwind preset with a pixelBasedPreset instead of rem units. This ensures email clients parse the styling correctly, allowing you to apply utility classes directly to Row and Column components for responsive layouts.

Why do my email images break in production React Email templates?▼

Email images break in production React Email templates when using relative paths or inline SVGs. You must use absolute image URLs and handle the baseURL pattern properly for your static file hosting, ensuring assets are referenced securely from external production servers.

Can I use inline SVGs in React Email components?▼

No, you should avoid using inline SVGs in React Email components because they fail to render in many major email clients. Instead, reference images using absolute URLs from your static hosting provider to ensure visual assets display correctly.

What is the best way to structure multi-column layouts in React Email?▼

The best way to structure multi-column layouts in React Email is by using the Row and Column components provided by the framework. This standardized approach ensures your transactional and marketing emails maintain a responsive, mobile-friendly structure that renders reliably across various email clients.

Does React Email support static file hosting for transactional emails?▼

Yes, React Email supports static file hosting for transactional emails by utilizing a baseURL pattern to reference local static folders. You must configure development versus production baseURL handling to ensure assets are properly loaded when the email is shipped.