skills.rest
novuhq
novuhqOFFICIAL
Explore all skills by this author →
Website𝕏@novuhqGitHub

react-email

Build email templates with React Email and Tailwind.

39.5k|4.4k|Updated Aug 26, 2021
Search Tags:#accessibility#tailwind#inline-styles#email-templates#react-email#row-column
One-click install
npx skills add https://github.com/novuhq/novu --skill react-email-novuhq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/novuhq/novu/tree/main/.agents/skills/react-email
Command: npx skills add https://github.com/novuhq/novu --skill react-email-novuhq

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The React Email skill simplifies building consistent, accessible email templates using Tailwind and the React Email component library, reducing manual layout work and ensuring cross-client compatibility.

Core Features & Use Cases

  • Build emails with Tailwind styling via the @react-email/components library
  • Ensure accessibility with alt text, previews, and responsive patterns
  • Use sections, rows, and columns for layout; includes guidance for production-ready assets
  • Use cases: welcome emails, password resets, order confirmations, newsletters

Quick Start

Install dependencies and render a sample email using the shipped React Email components to verify your setup.

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 React email templates with Tailwind?▼

Build React email templates with Tailwind by composing headless components, utilizing a pixel-based Tailwind preset, and structuring layouts with Row and Column modules for reliable rendering across email clients.

Can I use Tailwind to style transactional emails like password resets and order confirmations?▼

Yes, Tailwind styles transactional emails like password resets and order confirmations by applying the pixelBasedPreset and inline styles, ensuring consistent cross-client rendering for production-ready welcome messages and newsletters.

What's the best way to ensure accessibility in React Email templates?▼

Ensure accessibility in React Email templates by adding alt text for images, descriptive preview text, and responsive patterns, while following best-practice guidelines for reliable rendering across various email clients.

Does React Email support Row and Column layouts for complex email structures?▼

Yes, React Email supports Row and Column layouts for complex email structures, allowing you to compose sections and headless components to build structured templates like newsletters and order confirmations.

Why do my email templates break across different email clients?▼

Email templates break across clients due to inconsistent CSS support; resolve this by using React Email components with Tailwind inline styles and absolute image URLs to ensure reliable rendering and cross-client compatibility.

Do I need absolute image URLs for production-ready React Email templates?▼

Yes, use absolute image URLs in React Email templates to ensure images load correctly across all email clients, adhering to production-ready best-practice guidelines for reliable rendering in transactional and marketing emails.

Related Skills

Explore More Software Engineering Skills→
irchamajiirchamaji

react-email

Generate React Email HTML templates with React components and Tailwind.

Community
Advanced
vercel-labsvercel-labs
15.9k

react-email

Convert JSON specifications into HTML or plain-text emails using React Email components.

Official
Intermediate
jorgeasaurusjorgeasaurus
12

ckm:ui-styling

Create accessible React interfaces with Radix UI components and Tailwind CSS.

Community
Advanced
wshaddixwshaddix
71

mjml-email-templates

Generate responsive HTML email templates using MJML with .NET Razor syntax.

Community
Intermediate