用 React 写邮件，全客户端兼容

Resend 官方出品，用 React 组件构建跨客户端兼容的 HTML 邮件模板，支持可视化编辑器嵌入与 Resend 发送集成

基本信息

• 技能名称?React Email Skills
• 中文名称?用 React 写邮件，全客户端兼容
• 作者?christina-de-martinez
• 分类?专业技能
• 版本?2.0.0
• 标签?react, email, html-email, resend, transactional-email, visual-editor, tailwind-css, component-library, typescript

使用方法

使用说明
核心用法
React Email 是 Resend 推出的开源框架，允许开发者使用 React 组件语法编写 HTML 邮件模板，彻底解决传统邮件开发的维护难题。核心工作流：

1. 模板开发 ：使用 @react-email/components 提供的语义化组件（Html、Head、Body、Container、Tailwind 等）构建邮件
2. 本地预览 ： npx create-email@latest 创建项目后， npm run dev 启动 3000 端口预览服务，实时查看多客户端渲染效果
3. 渲染输出 ：通过 render() 函数转换为 HTML 或纯文本，兼容任意邮件服务商
4. 可视化编辑 ：可嵌入 @react-email/editor （基于 TipTap/ProseMirror）到自有应用，提供所见即所得的邮件编辑器
   显著优点
   开发体验现代化 ：TypeScript 原生支持、组件复用、Tailwind CSS 样式（px 预设替代 rem）、热重载预览
   跨客户端兼容性 ：内置 600px 最大宽度约束、table 布局替代 flexbox/grid、自动处理 Outlook/Gmail 等客户端差异
   生态闭环完整 ：从模板开发（React Email）→ 可视化编辑（EmailEditor）→ 发送服务（Resend SDK）形成完整链路
   可嵌入架构 ：EmailEditor 作为 React 组件可集成到任意应用，支持主题定制、扩展插件、Inspector 侧边栏
   安全可信 ：MIT 协议、Resend 官方维护、GitHub 9K+ stars、零危险代码、S+ 安全评级
   潜在缺点与局限性
   技术栈绑定 ：强依赖 React 生态，非 React 项目引入成本较高（需额外构建步骤）
   样式约束严格 ：不支持 CSS 媒体查询（sm:/md:）、dark/light 主题选择器、flexbox/grid 布局，复杂响应式需求受限
   图片格式限制 ：明确禁止 SVG/WEBP，需提前转换为 PNG/JPG 并托管至 CDN
   文件大小限制 ：Gmail 对超过 102KB 的邮件进行截断，需控制模板复杂度
   编辑器依赖 ：可视化编辑器需额外安装 @react-email/editor ，增加 bundle 体积
   适合人群
   已有 React 技术栈的团队，希望统一前后端与邮件模板的技术选型
   SaaS 产品需要向用户提供内置邮件编辑功能（如营销自动化、通知模板定制）
   对邮件客户端兼容性要求高、缺乏专业邮件开发经验的中小型团队
   使用 Resend 作为邮件服务商，追求生态一体化体验的用户
   常规风险
   | 风险类别 | 说明 | 缓解措施 | |---------|------|---------| | 渲染一致性 | 邮件客户端 CSS 支持差异极大（参考 caniemail.com）| 严格遵循 Skill 中的组件规范，多客户端测试 | | 图片失效 | 相对路径图片在生产环境 404 | 必询问用户生产 CDN 域名，使用 baseURL 条件渲染 | | 变量注入误用 | 用户可能要求在 JSX 中写 {{variable}} | 强制解释此模式会使模板无效，引导使用 PreviewProps | | 依赖版本漂移 | npm 包更新可能引入不兼容变更 | package.json 锁定确切版本，升级前测试 | | API Key 泄露 | 生产环境发送需配置 Resend API Key | 仅通过环境变量注入，禁止硬编码 |