React Email 是一个使用 React 组件构建和发送 HTML 邮件的工具，采用基于组件的现代邮件开发方式，兼容所有主流邮件客户端。
用途 用于以 React 组件方式编写 HTML 邮件模板，并可将模板渲染为 HTML 或纯文本，再通过邮件服务商发送。也可在应用中嵌入可视化邮件编辑器。
安装与初始化 安装：npm i react-email 或创建新项目： npx create-email@latest cd react-email-starter npm install npm run dev 支持 npm、yarn、pnpm、bun 等包管理器。开发服务器运行在 localhost:3000，提供 emails 文件夹中模板的预览界面。
添加到现有项目 安装依赖并在 package.json 中添加脚本： { "scripts": { "email": "email dev --dir emails --port 3000" } } emails 文件夹路径需相对于项目根目录，并确保 tsconfig.json 支持 JSX。
主要能力
- 组件化模板：提供 Html、Head、Preview、Body、Container、Heading、Text、Button、Link、Img、Hr、Section、Row、Column、Tailwind 等组件。
- 样式：通过 Tailwind 组件启用 Tailwind CSS 工具类，需配合 pixelBasedPreset（邮件客户端不支持 rem）。
- 渲染：使用 render 将组件转为 HTML，或传入 { plainText: true } 转为纯文本。
- 发送：支持任意邮件服务商，文档提供 Resend、Nodemailer、SendGrid 示例。Resend Node SDK 会自动处理 HTML 与纯文本渲染。
- 可视化编辑器：@react-email/editor 可嵌入应用，基于 TipTap/ProseMirror，产出邮件可用 HTML，包含 EmailEditor、StarterKit、Inspector、EmailTheming、composeReactEmail 等。
- 国际化：支持 next-intl、react-i18next、react-intl。
- CLI：email dev、email build、email start、email export、email resend setup、email resend reset。
使用方式要点
- 使用 Tailwind 时，<Head /> 需定义在 <Tailwind> 内；<Preview> 应为 <Body> 内第一个元素。
- 不要使用 flexbox 或 grid，改用 Row/Column 或表格布局。
- 避免媒体查询（sm:、md:、lg:、xl:）与主题选择器（dark:、light:）。
- 不要使用 SVG 或 WEBP 图片。
- 始终指定边框类型（如 border-solid）；单边边框需先重置其他边（border-none border-l border-solid）。
- Button 必须包含 box-border。
- 不要在 TypeScript 代码中直接使用模板变量（如 {{name}}），应直接引用属性；若用户坚持，只能将 mustache 字符串放在 PreviewProps 中。
- 本地图片放在 emails 目录下的 static 文件夹；开发与生产 URL 通过 NODE_ENV 区分，生产环境需向用户询问托管 URL，不要硬编码 localhost:3000。
适用场景 欢迎邮件、密码重置、订单确认、通知邮件、多列布局、团队邀请等。
限制与注意事项
- 多数邮件客户端不支持媒体查询，需采用其他方案。
- 邮件客户端不继承边框类型，需显式指定。
- 邮件文件大小建议低于 102KB，否则 Gmail 会截断。
- 需在 Gmail、Outlook、Apple Mail、Yahoo Mail 等客户端测试。
- 建议最大宽度约 600px，使用绝对图片 URL，提供纯文本版本。
- 无障碍方面：<Html> 默认 lang="en" dir="ltr"，可按语言覆盖；<Img> 默认 alt=""；有意义的图片需设置描述性 alt；链接图片的 alt 必须描述链接去向；标题层级不可跳级；文本对比度需达 4.5:1。
更多文档见 references/COMPONENTS.md、STYLING.md、EDITOR.md、SENDING.md、I18N.md、PATTERNS.md。