Cheatsheet - Use Tailwind CSS for outgoing emails in Laravel
Nav • May 29, 2022
tailwind laravelFull 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"