Laravel 9 + Vite环境下为邮件应用TailwindCSS样式的问题

问题背景 #

测试邮件布局时，已完成以下配置：

• 发送邮件的控制器（TestController.php）
• 邮件组件（MailLayout.php）
• Mailable类（TestingMail.php）
• 基于Jetstream的guest.blade.php改造的邮件布局（mail.blade.php）
• 基于welcome.blade.php改造的邮件内容模板（general.blade.php）

但收到的邮件完全无样式，且原Laravel Mix的样式处理方案无法直接迁移到Vite环境。

解决方法 #

通过结合两个Composer包解决问题：

1. 安装依赖 #

composer require fedeisas/laravel-mail-css-inliner innedev/laravel-vite-helper

2. 配置CSS内联 #

邮件客户端对外部样式表支持有限，需将CSS内联到HTML元素中，可通过两种方式启用：

• 全局配置：在config/mail.php的plugins数组中添加：

  'plugins' => [
      \Fedeisas\LaravelMailCssInliner\CssInlinerPlugin::class,
  ],
  

• 单个Mailable配置：在Mailable类的build方法中调用：

  public function build()
  {
      return $this->view('emails.general')
                  ->withCssInliner();
  }
  

3. Vite资源引用 #

使用laravel-vite-helper提供的vite_asset()助手函数替代原生Vite助手，在邮件布局模板中引入样式文件：

<link rel="stylesheet" href="{{ vite_asset('resources/css/mail.css') }}">

注意事项 #

laravel-vite-helper在npm run dev开发模式下无法正常使用，需执行npm run build构建生产环境资源后，邮件样式才能正常渲染。

内容的提问来源于stack exchange，提问作者msolla