skills.rest
alex-jordan547
alex-jordan547COMMUNITY
Explore all skills by this author →
GitHub

react-email

Create cross-client HTML email templates using React components and Tailwind CSS.

Updated Jul 3, 2026
Search Tags:#i18n#tailwind#email templates#resend#react-email#transactional email#html email
One-click install
npx skills add https://github.com/alex-jordan547/agent-setup --skill react-email-alex-jordan547
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/alex-jordan547/agent-setup/tree/main/archive/react-email
Command: npx skills add https://github.com/alex-jordan547/agent-setup --skill react-email-alex-jordan547

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-email/components, @react-email/preview-server, react, react-dom, resend, and includes references (resource) components.

What problem does it solve? Building HTML emails that render consistently across Gmail, Outlook, Apple Mail, and Yahoo is notoriously difficult due to email client CSS restrictions. This Skill lets you write emails as typed React components that compile to compatible HTML, avoiding table-layout pitfalls and broken styles. ## Core Features & Use Cases - Component-Based Templates: Use @react-email/components (Html, Body, Container, Button, Row/Column, CodeBlock, Markdown) with Tailwind styling via pixelBasedPreset. - Rendering & Sending: Render templates to HTML or plain text and send via Resend, Nodemailer, or SendGrid, with verified-domain guidance. - Reference Guides: On-demand docs for components, styling rules, common patterns (password reset, order confirmation, newsletter), and i18n with next-intl, react-intl, or react-i18next. - Use Case: Build a transactional welcome email with a verification button, preview it in the dev server at localhost:3000, then send it through Resend with automatic plain-text fallback. ## Quick Start Create a welcome email template with React Email that includes a verification button and renders correctly in Gmail and Outlook.

Frequently Asked Questions about react-email

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

FAQPage Schema
How do I create an email template with React Email?▼

Scaffold a project with npx create-email@latest, then build a component using Html, Body, Container, and Button from @react-email/components wrapped in the Tailwind component. Run npm run dev to preview templates at localhost:3000.

How do I send a React Email template with Resend?▼

Pass the React component directly to the resend.emails.send method via the react property along with from, to, and subject. The Resend Node SDK automatically renders the HTML and generates a plain-text version.

Can I use flexbox or media queries in React Email templates?▼

No. Email clients do not reliably support flexbox, grid, or media queries. Use Row and Column components for multi-column layouts, design mobile-first with stacked content, and apply pixelBasedPreset since rem units are unsupported.

Does React Email support multiple languages?▼

Yes. React Email works with next-intl, react-intl, and react-i18next. Pass a locale prop to your template, load the matching message file, set the Html lang attribute, and use Intl APIs for locale-specific date and currency formatting.

Why is my email clipped in Gmail?▼

Gmail clips emails larger than 102KB. Reduce template size by limiting inlined content, avoiding excessive markup, and testing the rendered output size before sending.

When should I not use React Email?▼

Avoid it for simple plain-text emails, messages that do not need cross-client HTML compatibility, or projects without a React and Node.js environment.

Related Skills

Explore More Software Engineering Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
mrsknetworkmrsknetwork

email

Render HTML email templates and queue asynchronous delivery via Celery.

Community
Advanced
maltehedderichmaltehedderich
6

html-email-templates

Build HTML email templates with table-based layouts and inline CSS.

Community
Advanced
vivid-planetvivid-planet
52

dextinity-mail-react

Build responsive cross-client HTML emails with React components and MJML.

Official
Advanced