用途:React Email 让开发者用 React 组件编写 HTML 邮件模板,覆盖欢迎邮件、密码重置、通知、订单确认、新闻简报等场景,并尽量兼容主流邮件客户端。
主要能力:提供 Html、Head、Preview、Body、Container、Section、Row、Column、Heading、Text、Button、Link、Img、Hr、CodeBlock、CodeInline、Markdown、Font、Tailwind 等组件;支持用 Tailwind 组件配合 pixelBasedPreset 写样式;支持 render 输出 HTML 或纯文本;支持 next-intl、react-i18next、react-intl 做国际化;可通过 Resend 等邮件服务发送。
使用方式:用 npx create-email@latest(或 yarn create email、pnpm create email、bun create email)创建 react-email-starter 项目,进入目录后安装依赖并运行 npm run dev(或 yarn dev、pnpm dev、bun dev),在 localhost:3000 预览 emails 目录下的模板。已有项目可在 package.json 添加 "email": "email dev --dir emails --port 3000"。图片放在 emails/static 下,生产环境需询问用户 CDN 地址,不要硬编码 localhost:3000。
限制:邮件客户端不支持 SVG、WEBP、flexbox、grid 和媒体查询(sm:、md:、lg:、xl:)及主题选择器(dark:、light:),应使用表格布局;Button 必须加 box-border,边框必须指定类型,单边边框需用 border-none 重置;不要直接在组件结构中写 {{variableName}} 模板变量;Gmail 会截断超过 102KB 的邮件。具体收费、价格与平台支持资料暂未提供。