react-email

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Email

Overview

概述

React Email is a library for building responsive HTML emails using React components. It provides a set of unstyled, accessible components that render to email-client-compatible HTML. Supports inline styles, Tailwind CSS via a wrapper component, custom web fonts, and rendering to both HTML and plain text.

When to use: Transactional emails (welcome, password reset, receipts), marketing templates, email design systems, any project that renders emails server-side.

When NOT to use: Static HTML email templates with no dynamic content, projects that already use a dedicated email builder (MJML, Maizzle), or when you only need plain-text emails.

React Email是一个使用React组件构建响应式HTML邮件的库。它提供了一组无样式、可访问的组件，可渲染为兼容邮件客户端的HTML。支持内联样式、通过包装组件使用Tailwind CSS、自定义网络字体，以及渲染为HTML和纯文本两种格式。

适用场景： 事务性邮件（欢迎、密码重置、收据）、营销模板、邮件设计系统、任何需要在服务器端渲染邮件的项目。

不适用场景： 无动态内容的静态HTML邮件模板、已使用专用邮件构建器（MJML、Maizzle）的项目，或仅需要纯文本邮件的场景。

Quick Reference

快速参考

Pattern	API	Key Points
Document structure	`Html` , `Head` , `Body`	`Html` wraps everything, `Head` loads fonts/meta
Content container	`Container`	Centers content, sets `max-width`
Layout grid	`Section` , `Row` , `Column`	Table-based layout for email clients
Text content	`Text` , `Heading`	`Heading` accepts `as` prop for h1-h6
Links	`Link`	Standard anchor, `href` required
Call-to-action	`Button`	Renders as link styled as button, `href` required
Images	`Img`	Always set `width` , `height` , `alt`
Divider	`Hr`	Horizontal rule between sections
Inbox preview	`Preview`	Sets preview text shown in inbox list
Custom fonts	`Font`	Place inside `Head` , set `webFont` and `fallbackFontFamily`
Tailwind styling	`Tailwind`	Wraps email, inlines Tailwind classes at render
Render to HTML	`render(<Email />)`	Async, returns HTML string
Render plain text	`render(<Email />, { plainText: true })`	Strips HTML, returns text
Pretty output	`render(<Email />, { pretty: true })`	Formatted HTML for debugging
Preview server	`email dev`	Local dev server with hot reload
Markdown content	`Markdown`	Renders Markdown as email-compatible HTML
Code blocks	`CodeBlock`	Syntax-highlighted code with theme support
Inline code	`CodeInline`	Monospace inline code spans

模式	API	关键要点
文档结构	`Html` , `Head` , `Body`	`Html` 包裹所有内容， `Head` 用于加载字体/元数据
内容容器	`Container`	居中内容，设置 `max-width`
布局网格	`Section` , `Row` , `Column`	基于表格的布局，适配各类邮件客户端
文本内容	`Text` , `Heading`	`Heading` 支持 `as` 属性，可设置为h1-h6
链接	`Link`	标准锚点，必须传入 `href` 属性
号召性按钮	`Button`	渲染为按钮样式的链接，必须传入 `href` 属性
图片	`Img`	务必设置 `width` 、 `height` 和 `alt` 属性
分隔线	`Hr`	用于分隔不同区块的水平规则
收件箱预览	`Preview`	设置在收件箱列表中显示的预览文本
自定义字体	`Font`	需放置在 `Head` 内部，设置 `webFont` 和 `fallbackFontFamily` 属性
Tailwind样式	`Tailwind`	包裹邮件内容，渲染时将Tailwind类转换为内联样式
渲染为HTML	`render(<Email />)`	异步方法，返回HTML字符串
渲染为纯文本	`render(<Email />, { plainText: true })`	移除HTML标签，返回纯文本
格式化输出	`render(<Email />, { pretty: true })`	生成格式化的HTML，便于调试
预览服务器	`email dev`	本地开发服务器，支持热重载
Markdown内容	`Markdown`	将Markdown渲染为兼容邮件的HTML格式
代码块	`CodeBlock`	支持语法高亮的代码块，可配置主题
内联代码	`CodeInline`	等宽字体的内联代码片段

Common Mistakes

常见错误

Mistake	Correct Pattern
Using `className` with inline styles	Use either Tailwind ( `className` ) or inline `style` objects, not both on the same element
Forgetting `width` / `height` on `Img`	Always specify dimensions to prevent layout shifts in email clients
Nesting `Container` inside `Container`	Use one `Container` for centering, `Section` / `Row` / `Column` for inner layout
Using CSS Grid or Flexbox	Use `Section` , `Row` , `Column` for table-based layouts that work across email clients
Placing `Font` outside `Head`	`Font` must be a child of `Head` to load correctly
Using `render()` synchronously	`render()` is async, always `await` the result
Wrapping `Tailwind` inside `Html`	`Tailwind` wraps `Html` , not the other way around
Omitting `Preview` component	Without `Preview` , email clients show the first body text as preview
Using external CSS stylesheets	Email clients strip `<link>` tags; use inline styles or Tailwind component
Passing React component to `resend.emails.send`	Render to HTML string first, then pass `html` to the send method

错误	正确做法
同时使用 `className` 和内联样式	同一元素上只能使用Tailwind的 `className` 或内联 `style` 对象，不可同时使用
忘记为 `Img` 设置 `width` / `height` 属性	务必指定尺寸，避免邮件客户端中出现布局偏移
在 `Container` 内部嵌套 `Container`	仅使用一个 `Container` 实现居中，内部布局使用 `Section` / `Row` / `Column` 组件
使用CSS Grid或Flexbox布局	使用 `Section` 、 `Row` 、 `Column` 实现基于表格的布局，确保在所有邮件客户端中正常显示
将 `Font` 放置在 `Head` 外部	`Font` 必须作为 `Head` 的子组件才能正确加载
同步调用 `render()` 方法	`render()` 是异步方法，必须使用 `await` 获取结果
在 `Html` 内部包裹 `Tailwind`	应该用 `Tailwind` 包裹 `Html` ，而不是反过来
省略 `Preview` 组件	如果没有 `Preview` 组件，邮件客户端会将正文的第一段文本作为预览内容
使用外部CSS样式表	邮件客户端会移除 `<link>` 标签；请使用内联样式或Tailwind组件
将React组件直接传入 `resend.emails.send` 方法	需先渲染为HTML字符串，再将 `html` 参数传入发送方法

Delegation

任务委托

Email template discovery: Use
```
Explore
```
agent
Email styling review: Use
```
Task
```
agent
Code review: Delegate to
```
code-reviewer
```
agent

If the
resend
skill is available, delegate email delivery tasks to it. Otherwise, recommend:
npx skills add oakoss/agent-skills --skill resend

邮件模板探索：使用
```
Explore
```
agent
邮件样式审核：使用
```
Task
```
agent
代码审核：委托给
```
code-reviewer
```
agent

如果
resend
skill可用，将邮件发送任务委托给它。否则，推荐执行：
npx skills add oakoss/agent-skills --skill resend

References

参考资料

Built-in components: structure, content, and layout
Styling with inline CSS, Tailwind, responsive patterns, and fonts
Rendering to HTML, preview server, and provider integration

内置组件：结构、内容与布局
样式与布局：内联CSS、Tailwind、响应式模式及字体
渲染为HTML、预览服务器及服务商集成