Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

bwrigley's avatar

Building email template with Homestead, Vite, tailwind

Hello, still very new to Laravel and especially to Vite.

I was building my site, lazily just including the whole tailwind library from a CDN but I can't do that in an email template it seems. So I am trying to get my head around Vite (which I believe will solve my problem with emails?)

I have Vite installed and running fine in my dev environment, but when the application sends an email the paths to the CSS files don't work as Vite is including some interesting links. I'm using Maitrap to test these emails and the source shows:

<script type="module" src="http://[::1]:5173/@vite/client"></script><link rel="stylesheet" href="http://[::1]:5173/resources/css/app.css" /><script type="module" src="http://[::1]:5173/resources/js/app.js"></script>

I'm wondering if this is Homestead configuration that is incorrect. I'm using Homestead in a Windows 10 environment. My Homestead yaml looks like:

---
ip: "192.168.10.10"
memory: 16096
cpus: 4 

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: h:/Sites/Laravel
      to: /home/vagrant/Code

sites:

    - map: flashcards.elliotwrigley.test
      to: /home/vagrant/Code/elliotwrigley/public
      
mariabd: true
variables:
    - key:  APP_ENV
      value: testing 

databases:
    - flashcards

ports:
    - send: 5173
      to: 5173

My Vite config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Thanks for any help in advance!

0 likes
4 replies
bwrigley's avatar

@CamKem Thanks for your reply.

I'm only wondering about Vite as I know it's generating the URLs to the CSS files. Thanks for the link, I'll investigate that further.

click's avatar

For email templates it is recommended to embed your CSS into the email it self. Styling emails is not the same as styling a regular html page due the fact that email apps are not similar to a browser. The support is getting better every year but I recommend to do some reading about styling emails:

bwrigley's avatar

@click thanks for your reply!

Ah yes, that makes sense. As I'm useless at CSS I was hoping for some lazy way to work with tailwind and then generate inline CSS from that. I'll read more, thank you!

Please or to participate in this conversation.