使用Ruby on Rails和Tailwind CSS构建HTML电子邮件指南
内容提要
本文介绍了如何使用Ruby on Rails和Tailwind CSS构建HTML电子邮件，特别是每周数据库报告邮件的实现过程。内容包括Rails应用设置、PostCSS配置、Tailwind CSS优化、内联样式处理及支持暗模式的技巧。使用roadie库简化内联样式管理，确保电子邮件在不同客户端中的兼容性，并强调测试电子邮件的重要性。
延伸解读
为何要为邮件单独配置CSS
文章强调邮件客户端对CSS的支持远不如浏览器，因此需要为邮件创建独立的CSS文件（如mailer.postcss.css），并与Web应用的CSS分开构建。通过PostCSS配置，可以针对邮件优化输出，例如禁用CSS变量、使用HEX颜色代替RGBA、使用PX单位代替REM，以提升兼容性。这种分离策略是构建可靠HTML邮件的基础。
内联样式与roadie库的实用价值
由于邮件客户端对样式表的支持有限，内联样式成为最可靠的方式，但手动内联容易出错且难以维护。文章推荐使用roadie库自动将CSS规则内联到HTML元素中，并与Tailwind CSS良好协作。这简化了样式管理，同时保留了使用类名和复用样式的开发体验，是平衡开发效率与兼容性的有效方案。
暗模式与Gmail裁剪的应对技巧
文章分享了支持暗模式的简单方法：通过meta标签和prefers-color-scheme媒体查询，结合Tailwind的暗模式工具类。同时，针对Gmail的102KB裁剪限制，建议精简内容、截断文本、移除不必要的Tailwind导入，并提供了调试邮件大小的方法。这些技巧有助于确保邮件在不同客户端中完整显示。
测试环节的关键实践
文章最后强调了测试的重要性，包括使用Rails的邮件预览功能快速查看渲染效果，以及通过自定义Rake任务发送测试邮件到真实邮箱，以验证在不同邮件客户端（如Gmail、Apple Mail）中的表现。实际发送测试能发现暗模式、媒体查询支持等问题，是确保邮件兼容性的必要步骤。
Q&A
如何使用Ruby on Rails和Tailwind CSS构建HTML电子邮件？
可以通过设置Rails应用、配置PostCSS、创建单独的CSS文件、使用roadie库处理内联样式等步骤来构建HTML电子邮件。
为什么需要为电子邮件创建单独的CSS文件？
因为电子邮件客户端对CSS的支持有限，单独的CSS文件可以优化样式以适应这些限制。
如何支持暗模式的电子邮件设计？
可以通过在HTML头部添加相关的meta标签和使用Tailwind CSS的暗模式功能来支持暗模式。
使用roadie库有什么好处？
roadie库可以简化内联样式的管理，确保电子邮件在不同客户端中的兼容性。
如何测试发送的HTML电子邮件？
可以通过Rails提供的预览功能和发送测试邮件来确保电子邮件在不同客户端中的渲染效果。
在构建HTML电子邮件时如何处理Gmail的内容剪辑问题？
可以通过减少不必要的内容和截断长查询来避免Gmail的内容剪辑问题。
