Cheatsheet - Use Tailwind CSS for outgoing emails in Laravel

Nav • May 29, 2022

tailwind laravel

Full credit goes to: https://ralphjsmit.com/laravel-emails-tailwind-css, i've only condesned a few things.

Assuming Tailwind is installed, you can use the following steps to style your emails:

/* create resources/css/mail.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// create tailwind-mail.config.js
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
    content: ["./resources/views/mail/**/*.blade.php"],
    theme: {
        screens: {
            xxs: "375px",
            xs: "475px",
            ...defaultTheme.screens,
        },
    },
};

// update webpack.mix.js (add the following)
const tailwindcss = require("tailwindcss");

mix.postCss("resources/css/mail.css", "public/css", [
    tailwindcss("tailwind-mail.config.js"),
]).version();

// create a blade component
php artisan make:component EmailBase

<!-- update resources/views/components/email-base.blade.php -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="{{ url(mix('css/mail.css')) }}">
    @if ($subject = $attributes->get('subject'))
        <title>{{ $subject }}</title>
    @endif
</head>

<body>
    <div class="w-full h-full px-8 py-12">
        {{ $slot }}
    </div>
</body>

</html>

<!-- update outgoing email views -->
<x-email-base subject="New order placed">
    <h3 class="text-lg font-bold">New order placed on {{ config('app.name') }}.</h3>

    <p>See info below:</p>

    <p>
        <span class="mr-4 text-sm text-gray-700 uppercase">User name:</span>
        <span class="text-sm text-gray-900">{{ $order->user->name }}</span>
    </p>
</x-email-base>

# this will inline the mail.css into outgoing messages

composer require fedeisas/laravel-mail-css-inliner

# If it complains about version constraints:
composer require "fedeisas/laravel-mail-css-inliner:dev-master"