React邮件开发

技能简介

React Email 是一套用于构建 HTML 邮件的 React 组件库，采用现代组件化方式开发邮件模板，兼容主流邮件客户端。

业务背景

React Email让营销和运营团队能用熟悉的组件化方式开发邮件模板，告别手写HTML表格的繁琐。通过Tailwind CSS快速实现品牌视觉，一键预览Outlook、Gmail等主流客户端的渲染效果，大幅降低跨平台兼容测试成本，缩短邮件营销活动上线周期。

落地案例：市场部策划新品发布邮件时，开发者用React组件搭建模块化模板——标题区、产品卡片、CTA按钮均可复用。运营人员只需在配置界面替换文案、图片链接和用户变量（如{{username}}），即可生成适配各邮件客户端的HTML代码。发送前通过预览功能检查移动端显示效果，确保iPhone邮件App与网页版Gmail呈现一致的品牌体验。

能做什么

• 使用 React 组件编写邮件模板，支持 JSX 语法
• 通过 Tailwind CSS 实现邮件样式设计
• 预览邮件在不同客户端的渲染效果
• 生成兼容 Outlook、Gmail、Apple Mail 等客户端的 HTML
• 支持国际化和多语言邮件内容

使用说明

1. 创建项目

npx create-email@latest

或使用 yarn/pnpm/bun：

yarn create email
pnpm create email
bun create email

2. 进入项目目录并安装依赖

cd react-email-starter
npm install

3. 启动开发服务器

npm run dev

访问 localhost:3000 查看邮件预览界面。

4. 编写邮件组件

在 emails 文件夹中创建 .tsx 文件，使用 @react-email/components 提供的组件构建邮件模板。

输入与输出

见下方输入与输出表格。

风险提示

• 邮件客户端对 CSS 支持程度不一，需充分测试
• 图片必须使用绝对 URL，相对路径无法正常显示
• 部分高级 CSS 特性在 Outlook 中可能失效
• 生产环境部署前需在真实邮件客户端验证渲染效果

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/christina-de-martinez/react-email-skills/SKILL.md
来源类型：GitHub 开源项目