Heroku部署下premailer-rails搭配TailwindCSS生产环境邮件CSS失效

根因说明 #

该问题核心是Heroku生产环境下，premailer-rails无法正确获取打包后的Tailwind CSS文件内容，无法完成类名到内联样式的转换，通常由两类原因导致：一是样式表引用走网络路径，premailer发起内部请求无法正常获取资源；二是premailer未配置正确的资产查找路径，找不到带哈希后缀的预编译CSS文件。

解决方案 #

按以下步骤配置即可修复：

• 配置premailer初始参数
  在config/initializers目录下新建premailer.rb，添加如下配置：

Premailer::Rails.config.merge!(
  asset_path: Rails.root.join('public', 'assets'),
  remove_classes: true,
  generate_text_part: true
)

• 修改邮件布局的样式引用
  修改app/views/layouts/mailer.html.erb，将原有的样式表引用替换为带inline参数的写法：

<%= stylesheet_link_tag "application.tailwind", inline: true %>

inline: true是premailer-rails对stylesheet_link_tag的扩展参数，会直接读取CSS文件内容内联到邮件的style标签中，无需依赖网络请求获取资源。

• 校验Heroku构建配置
  确保项目根目录package.json中存在正确的CSS构建脚本，Heroku部署时会自动执行构建：

{
  "scripts": {
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.tailwind.css --minify",
    "build": "yarn build:css"
  }
}

同时确认Gemfile中cssbundling-rails、premailer-rails均在生产环境分组内。

• 可选：配置生产环境asset_host
  如果调整后仍存在问题，在config/environments/production.rb中添加应用域名配置：

config.action_mailer.asset_host = "https://你的应用实际域名"

内容的提问来源于stack exchange，提问作者Thomas Van Holder