How do I handle images in my email templates?

Place images in a static folder within your emails directory. Use an environment-aware baseURL to automatically switch between local development paths and your production CDN URL.

Can I use Tailwind CSS with React Email?

Yes, React Email includes a Tailwind component. It is recommended to use the pixelBasedPreset specifically designed for email clients to ensure layout consistency across different devices.

Does React Email support SVG or WEBP images?

No, SVG and WEBP formats have very poor support across email clients. You should always use PNG or JPG files to ensure your images render correctly for all users.

How do I preview my email designs during development?

You can start a local development server using the 'npm run dev' command. This provides a browser-based interface where you can see live previews of your templates as you edit the code.

Why does this skill recommend avoiding Flexbox and Grid?

Many major email clients, including various versions of Outlook, do not fully support Flexbox or CSS Grid. Using table-based layouts via Row and Column components ensures your email looks correct for all recipients.

React Email

Name: React Email
Author: resend

byresend

•

18,109

•

마케팅 자동화

Builds and sends responsive HTML email templates using a modern, component-based React architecture.

The React Email skill enables developers to create high-quality HTML emails—such as welcome messages, password resets, and newsletters—using familiar React components instead of legacy table-based coding. It streamlines the development process by providing a local preview server for real-time design iteration and specialized Tailwind CSS support tailored for email client constraints. This skill ensures cross-client compatibility by enforcing best practices like pixel-based units and table-based layouts while offering utilities to render templates into production-ready HTML or plain text.

주요 기능

0118,109 GitHub stars

02Tailwind CSS integration with pixel-based presets for consistent cross-client styling

03Seamless conversion of React templates into optimized HTML and plain text formats

04Specialized React component library for standard email elements like Buttons, Containers, and Sections

05Scaffold email projects quickly using a dedicated CLI and starter templates

06Real-time local preview server for instant visual feedback during development

사용 사례

01Designing brand-consistent transactional emails for user onboarding and notifications

02Building dynamic email templates that integrate with Node.js backends and Resend for automated sending

03Developing responsive marketing newsletters that render correctly across Outlook, Gmail, and Apple Mail

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add resend/react-email react-email

For use in Claude.ai and ChatGPT

Download Skill