skills.rest
lucasromanh
lucasromanhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-email

Creates React Email templates with Tailwind, pixelBasedPreset, and static asset workflows.

Updated Feb 9, 2026
Search Tags:#tailwind#email-templates#react-email#row-column#react-components#html-email
One-click install
npx skills add https://github.com/lucasromanh/Voces-Cafayate --skill react-email-lucasromanh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/lucasromanh/Voces-Cafayate/tree/main/.agents/skills/react-email
Command: npx skills add https://github.com/lucasromanh/Voces-Cafayate --skill react-email-lucasromanh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a guided framework to create consistent, production-ready HTML emails using React components, reducing cross-client rendering issues and branding inconsistencies.

Core Features & Use Cases

  • Tailwind-enabled templates built with @react-email/components and pixelBasedPreset for reliable rendering across clients.
  • Structured, reusable layouts using Row and Column instead of CSS flexbox or grid to support Outlook rendering.
  • I18n guidance and best practices for multilingual emails.
  • Static asset guidelines for hosting images via a production CDN and safe local development structure.

Quick Start

Create a simple two-column welcome email template using Tailwind and the pixelBasedPreset, including a Preview and a sample image.

Frequently Asked Questions about react-email

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

FAQPage Schema
How do I build production-ready React email templates that render consistently across email clients?▼

Build production-ready React email templates by using Tailwind with a pixelBasedPreset and proper component imports. This framework enforces absolute image URLs and border specifications to ensure consistent rendering across various email clients.

Why do my HTML email layouts break in Outlook when I use CSS flexbox?▼

HTML email layouts break in Outlook because flexbox lacks support. Use structured Row and Column components from @react-email/components instead of CSS flexbox or grid to support Outlook rendering and ensure multi-column layout stability.

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

Yes, you can use Tailwind CSS to style React email components. This framework specifically uses a pixelBasedPreset alongside @react-email/components to enable Tailwind styling while maintaining reliable rendering across different email clients.

What's the best way to handle images in HTML email templates?▼

Handle images in HTML email templates by following static asset guidelines that enforce absolute image URLs via a production CDN. This safe static asset workflow ensures images load consistently across all email clients during both local development and production.

How do I create multilingual React email templates?▼

Create multilingual React email templates by applying the provided I18n guidance and best practices. This framework supports building localized emails, such as welcome emails and password resets, ensuring proper formatting for multiple languages.

Do I need to specify borders on all elements in my React email templates?▼

Yes, you need to specify borders on elements in your React email templates. Enforcing border specifications is a required best practice within this framework to ensure consistent visual rendering and prevent styling inconsistencies across different email clients.

Related Skills

Explore More Software Engineering Skills→
irchamajiirchamaji

react-email

Generate React Email HTML templates with React components and Tailwind.

Community
Advanced
nathanielcrowell12-specnathanielcrowell12-spec

resend

Send transactional emails with Resend and React Email components.

Community
Intermediate
faw01faw01
18

react-email

Create and render HTML email templates with React components and Tailwind CSS.

Community
Intermediate
passionseedpassionseed
2

react-email

Build HTML email templates using React components and Tailwind styling.

Official
Advanced