React Email 是一个使用 React 组件构建和发送 HTML 邮件的工具，采用现代化的组件化方式开发邮件，兼容所有主流邮件客户端。
【安装与初始化】 可通过 npm 安装：npm i react-email。也可使用脚手架创建新项目：npx create-email@latest，随后进入 react-email-starter 目录执行 npm install 和 npm run dev。支持 npm、yarn、pnpm、bun 等任意包管理器。开发服务器运行在 localhost:3000，提供 emails 文件夹中模板的预览界面。
【添加到现有项目】 安装依赖后，在 package.json 中添加脚本："email": "email dev --dir emails --port 3000"。需确保 emails 文件夹路径相对于项目根目录，并保证 tsconfig.json 正确支持 JSX。
【基本邮件模板】 使用 Html、Head、Preview、Body、Container、Heading、Text、Button、Tailwind、pixelBasedPreset 等组件构建邮件。示例中通过 Tailwind 组件配置 pixelBasedPreset 预设和品牌色，使用 Container 居中内容，Button 创建链接按钮。组件可定义 PreviewProps 用于测试预览。
【行为准则】 迭代代码时只更新用户要求的部分，保持其余不变。若用户要求使用媒体查询，应告知大多数邮件客户端不支持并建议替代方案。禁止在 TypeScript 代码中直接使用模板变量（如 {{name}}），应直接引用属性；若用户坚持，只能将 mustache 字符串放在 PreviewProps 中，绝不能放在组件 JSX 里。
【核心组件】 结构类：Html（根包装器，含 lang 属性）、Head（元元素、样式、字体）、Body（主内容包装器）、Container（最外层居中包装器，内置 max-width: 37.5em，每封邮件只用一次）、Section（内部内容块，无内置 max-width）、Row 与 Column（多列布局）、Tailwind（启用 Tailwind CSS 工具类）。 内容类：Preview（收件箱预览文本，始终放在 Body 内首位）、Heading、Text、Button（始终包含 box-border）、Link、Img、Hr。 专用类：CodeBlock、CodeInline、Markdown、Font。
【编写代码前】 若用户未提供以下信息，应先询问：品牌色（十六进制）、Logo 文件及格式（仅 PNG/JPG，SVG/WEBP 需警告）、风格偏好（专业、休闲或极简）、生产环境静态资源托管 URL。
【静态文件与图片】 本地图片须放在 emails 目录下的 static 文件夹中。开发与生产 URL 使用模式：根据 NODE_ENV 判断 baseURL，开发时为空（由 React Email 开发服务器提供），生产时为 CDN 域名。切勿硬编码 localhost:3000。
【样式规则】 使用 Tailwind 配合 pixelBasedPreset（邮件客户端不支持 rem）。禁止使用 flexbox 或 grid，改用 Row/Column 或表格布局。避免 CSS/Tailwind 媒体查询（sm:、md:、lg:、xl:）。禁止使用主题选择器（dark:、light:）。禁止使用 SVG 或 WEBP 图片。始终指定边框类型（border-solid 等）。单边边框需先重置其他边（border-none border-l border-solid）。 必需类：Button 需 box-border；Hr/任何边框需 border-solid；单边边框需 border-none 加对应边。 结构注意：使用 Tailwind 时始终在 Tailwind 内定义 Head；Preview 始终是 Body 内第一个元素；PreviewProps 只包含组件实际使用的属性；已知尺寸元素用固定宽高，内容图片用响应式尺寸。
【渲染】 使用 render 函数将组件转为 HTML：const html = await render(<WelcomeEmail ... />)。转为纯文本：await render(<WelcomeEmail ... />, { plainText: true })。
【发送】 支持任意邮件服务商。以 Resend SDK 为例：创建 Resend 实例，调用 resend.emails.send 并传入 from、to、subject 和 react 组件。Resend Node SDK 自动处理 HTML 和纯文本渲染。
【CLI 命令】 email dev --dir <path> --port <port>：启动预览开发服务器（默认 ./emails，端口 3000）。 email build --dir <path>：构建预览应用用于生产部署。 email start：运行已构建的预览应用。 email export --outDir <path> --pretty --plainText --dir <path>：导出模板为静态 HTML 文件。 email resend setup：通过 API 密钥连接 Resend 账户。 email resend reset：移除存储的 Resend API 密钥。
【国际化】 支持 next-intl、react-i18next 和 react-intl 三个库。
【邮件编辑器】 React Email 包含可视化编辑器（@react-email/editor），可嵌入应用，基于 TipTap/ProseMirror，生成邮件就绪的 HTML。包含 EmailEditor（含气泡菜单、斜杠命令和主题）、StarterKit（35+ 邮件感知扩展）、Inspector（上下文侧边栏）、EmailTheming（内置主题）、composeReactEmail（导出为 HTML 和纯文本）、通过 EmailNode 和 EmailMark 自定义扩展。
【邮件最佳实践】 跨客户端测试（Gmail、Outlook、Apple Mail、Yahoo Mail）；保持响应式（最大宽度约 600px）；使用绝对图片 URL；编写有意义的 alt 文本；提供纯文本版本；文件大小控制在 102KB 以下（Gmail 会截断）；添加 TypeScript 类型；包含预览属性；使用已验证域名。
【无障碍】 React Email 自动处理：Html 设置 lang 和 dir；Img 默认 alt=""；Markdown 渲染布局表格带 role="presentation"；Preview 同时输出 title 标签。需自行处理：以单个 Heading as="h1" 开头，按序嵌套子标题；为有意义图片设置有意义的 alt，装饰性图片显式传 alt=""；链接图片的 alt 必须描述链接去向；链接文本描述目的地；达到 4.5:1 文本对比度；手动布局表格添加 role="presentation"；非英语邮件传入 locale。