Laravel, Tailwind and Vite - a few notes

# November 17, 2024, php,laravel,tailwind

The combination of Laravel, Tailwind and Vite has made my work a lot easier. Especially replacing the slow Webpack (Laravel Mix) with Vite was a great productivity boost, since the building times are much, MUCH, shorter.

I had to do just some small tweaks to make things work:

1. After installing Laravel, I had to install Tailwind using the official guide, this is pretty easy and straightforward.

2. Then I had to edit the package.json file and add the "watch" NPM script to be able to watch the CSS file changes and build the CSS on every change.

...

    "scripts": {

        "dev": "vite",

        "build": "vite build",

        "watch": "vite build --watch"

    },

...

3. After adding the @vite(['resources/css/app.css', 'resources/js/app.js']) code to the HEAD section of my template, it still didn't work. When viewing the source code, I noticed that the <link> for the CSS still pointed at the local dev server with 5173 port.

After some searching, I found the solution here - I needed to delete the public/hot file.

After that, everything is working!