How apply tailwindcss styles to emails in Laravel 9 with vite-CodePudding

I am not able to make work styles in my mails blade.

The final goal is to have a layout for mails. By now, for testing puposes, I have:

The controller that sends the mail
The mail component
The maileable class
The layout for emails, as a duplicated of guest.blade.php jetstream file
One specific email blade file, the content to add in the previus layout, is a duplicated of welcome.blade.php jetstream file

app\Http\Controllers\TestController.php

<?php
namespace App\Http\Controllers;

use App\Mail\TestingMail;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;

class TestController extends Controller
{
    public function __invoke(Request $request)
    {
        $result = Mail::to($request->user())
                ->send(new TestingMail());
        return view('welcome');
     }
}

app\View\Components\MailLayout.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class MailLayout extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('layouts.mail');
    }
}

app\Mail\TestingMail.php

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class TestingMail extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->view('mails.general');
    }
}

resources\views\layouts\mail.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        @vite(['resources/css/app.scss', 'resources/js/app.js'])
    </head>
    <body>
        <div >
            {{ $slot }}
        </div>
    </body>
</html>

resources\views\mails\general.blade.php

<x-mail-layout>
    <x-slot name="header">
        <h2 >
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div >
        <div >
            <div >
                <x-jet-welcome />
            </div>
        </div>
    </div>
</x-mail-layout>

I receive the mail with no styles. The only help that I found was this link https://ralphjsmit.com/tailwind-css-multiple-configurations-laravel-mix but that was wrote for laravel mix, I don't have idea to migrate this webpack.mix.js to vite.

Any help or orientation will be apreciated, thanks.

CodePudding user response：

For emails you want your styles to be inlined. I don’t think that’s a functionality that Vite, Tailwind or Blade for that matter have out of the box.

There is a package, however, that seems to solve your problem: https://github.com/fedeisas/laravel-mail-css-inliner

Never tried that one before, but it seems quite active. However the practice of auto-inlining is quite common for emails so Google around for that one. You’ll probably find some package that suits your needs.

CodePudding user response：

You have to build the vite files (npm run build) first, then include them in your mail template. Or you can inline them in a big <style> block.

If you want a better example, take a look at how welcome.blade.php does this in a fresh Laravel install.