Cheatsheet - Use Tailwind CSS for outgoing emails in Laravel

Nav • May 29, 2022

tailwind laravel

Full credit goes to:, 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",
// update webpack.mix.js (add the following)
const tailwindcss = require("tailwindcss");

mix.postCss("resources/css/mail.css", "public/css", [

// 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" "">

    <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>

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

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

    <p>See info below:</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>
# 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"