如何在Laravel邮件模板中启用Tailwind CSS？

你遇到的核心问题是：邮件客户端几乎都不支持外部JavaScript执行，而你用的Tailwind CDN是通过JS动态生成CSS规则的，所以发送后样式完全不会生效。另外还有几个邮件开发的坑你踩了：hover状态在绝大多数邮件客户端里不支持，自定义颜色的写法也不符合Tailwind规范。

下面是具体的解决步骤：

1. 编译Tailwind为静态CSS并内联到邮件 #

邮件要求样式必须是内联或者内嵌的静态CSS，不能依赖动态生成。你需要在本地编译Tailwind，然后把编译后的CSS内联到邮件里。

步骤1：配置Tailwind到Laravel项目 #

如果还没安装，先在项目里安装Tailwind：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

修改tailwind.config.js，把你的邮件模板路径加入content数组，同时定义自定义颜色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './resources/views/**/*.blade.php',
    './resources/views/emails/**/*.blade.php', // 你的邮件模板路径
  ],
  theme: {
    extend: {
      colors: {
        accent: '#C49B42', // 把你自定义的颜色加到这里
      },
    },
  },
  plugins: [],
}

步骤2：创建邮件专用CSS文件 #

在resources/css下新建email.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

编译CSS：

npx tailwindcss -i resources/css/email.css -o public/css/email.css --minify

步骤3：在Laravel邮件类中内联CSS #

打开你的邮件类（比如app/Mail/YourMailClass.php），在build()方法里添加内联CSS的代码：

public function build()
{
    $css = file_get_contents(public_path('css/email.css'));

    return $this->view('emails.your-template')
                ->embedCss($css); // 把CSS内联到邮件里
}

2. 修正邮件模板里的问题 #

去掉无效的hover类 #

邮件客户端不支持hover状态，所有hover:*类都可以删掉，比如hover:border-accent、hover:scale-110这些都不会生效。

修正自定义颜色的写法 #

之前的text-[#C49B42]可以改成我们在Tailwind配置里定义的text-accent，更规范也方便维护。

去掉无用的JavaScript #

邮件里的JS几乎都会被拦截，比如你用来生成年份的脚本，直接用PHP生成：

<p class="mt-3 text-gray-500 dark:text-gray-400">© {{ date('Y') }} LJSharp. All Rights Reserved.</p>

修正后的模板头部不需要Tailwind CDN脚本了，示例片段：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <!-- 移除Tailwind CDN脚本 -->
</head>
<body class="bg-gray-100">
    <div class="mx-auto mb-4 mt-5 flex max-w-2xl justify-center rounded px-6 text-center">
        <img class="h-16 w-auto" src="/images/logos/kg_logo1.png" alt="">
    </div>
    <section class="mx-auto max-w-2xl rounded bg-white px-6 py-8 shadow-lg">
        @yield('content')
    </section>
    <div class="mx-auto my-4 max-w-2xl rounded px-6 py-5 text-center">
        <footer>
            <div class="flex w-full items-center justify-center gap-5">
                <a href="mailto:info@kisiwaagyan.com" class="rounded-full text-accent">
                    <i class="ri-mail-line h-16 w-auto"></i>
                </a>
                <!-- 其他社交链接同理，去掉hover相关类 -->
            </div>
            <p class="mt-3 text-gray-500 dark:text-gray-400">© {{ date('Y') }} LJSharp. All Rights Reserved.</p>
        </footer>
    </div>
</body>
</html>

额外注意事项 #

• 邮件布局尽量用表格（或Tailwind flex配合，老旧客户端可能不支持flex），保证兼容性
• 避免使用复杂的Tailwind类，优先用基础类
• 测试邮件可以用Laravel的邮件预览功能，或者用本地测试工具查看渲染效果

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