Message:

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 class="font-sans text-gray-900 antialiased">

            {{ $slot }}

        </div>

    </body>

</html>

resources\views\mails\general.blade.php

<x-mail-layout>

    <x-slot name="header">

        <h2 class="font-semibold text-xl text-gray-800 leading-tight">

            {{ __('Dashboard') }}

        </h2>

    </x-slot>



    <div class="py-12">

        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">

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

EDIT
I finnally made it work, combining the @Jaap's answer and other package:
https://github.com/fedeisas/laravel-mail-css-inliner

https://github.com/motomedialab/laravel-vite-helper

vite helper is not ideal because it does not work when npm run dev is running, but it is sufficient for me.

My Answer:
Here is a step-by-step guide on how to apply TailwindCSS styles to emails in Laravel 9 with Vite:

1. Install the necessary packages:
- Install the Laravel Mail CSS Inliner package by running the following command:



     composer require fedeisas/laravel-mail-css-inliner

- Install the Laravel Vite Helper package by running the following command:



     composer require motomedialab/laravel-vite-helper

2. Update your `app\Mail\TestingMail.php` file to use the CSS inliner:

php

   use Illuminate\Bus\Queueable;

   use Illuminate\Mail\Mailable;

   use Illuminate\Queue\SerializesModels;

   use Fedeisas\LaravelMailCssInliner\CssInliner;



   class TestingMail extends Mailable

   {

       use Queueable, SerializesModels;



       public function build()

       {

           $view = $this->view('mails.general');

           $inliner = new CssInliner();

           $inliner->fromHtml($view->render());

           $inlinedHtml = $inliner->inlinedHtml();

           return $this->html($inlinedHtml);

       }

   }

3. Update your `resources\views\layouts\mail.blade.php` file to include the Vite assets:

html

   

   

       

           

           

           

   

           {{ config('app.name', 'Laravel') }}

   

           

           

   

           

           @vite

       

       

           

               {{ $slot }}

4. Update your `resources\views\mails\general.blade.php` file to use TailwindCSS classes:

html

   

       

           

               {{ __('Dashboard') }}

5. Run the Vite development server by running the following command:



   npm run dev

6. Send a test email using your `TestController` and check if the styles are applied to the email.

By following these steps, you should be able to apply TailwindCSS styles to emails in Laravel 9 using Vite. Let me know if you encounter any issues or need further assistance.

John Davidson

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

{{ __('Dashboard') }}

Rate this post

Comments