Vite + Tailwind: Not compiling certain classes

[jolly quiver]

I have an issue where I'm running the default configuration for Vite and Tailwind in a Laravel 10 installation along with Breeze (Blade stack). When working on views and I add a new, unused previously Tailwind class to the view, this new class will not compile and thus it won't reflect its properties in the view.

The most basic example to reproduce this issue is spinning up a fresh Laravel 10 install and then install Breeze. Go to the dashboard page and start toying around with Tailwind. Once you add an unused class in the current project it will not compile the class (for example bg-orange-400 which is not something you'd see in the default installation). Any other class already in use, or text changes will show fine, and the page is reloading fine. It's just that new classes are not being compiled.

I've already tried configuring the suggested watcher in the docs but it isn't helping.

Any ideas? Thanks in advance!

[keen otter]

Well, I've tried that, and that works out of the box 😅

Did you check your devtools for errors?

[jolly quiver]

Yeah, devtools wasn't showing anything. I wonder what's wrong then? Not working for me out of the box. Latest npm and all, updated dependencies.

[jolly quiver]

Just tried in a different machine, w10, using laragon and latest node/npm and same result. It ignores new classes. This wasn't happening before..

I have a Laravel 9 installation, exact same environment that works just fine and doesn't have this issue. Gonna share the package.json between them

Laravel 10 with issues:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.5",
        "postcss": "^8.4.6",
        "tailwindcss": "^3.1.0",
        "vite": "^4.0.0"
    }
}

Laravel 9 no issues:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "tailwindcss": "^3.1.0",
        "vite": "^3.0.0"
    }
}

So vite went up to version 4

Alright so I swapped to Vite v3 in my newest installation and that did solve the issue

[keen otter]

I know there's this with Sail/WSL you'd have to configure; https://laravel.com/docs/10.x/vite#configuring-hmr-in-sail-on-wsl2
No clue about Laragon tho

But if that's not configured properly it would result in errors in your browser's devtools iirc (don't use Windows and/or Sail, so just a guess)

[jolly quiver]

Nah that's not it. I've already tried that. I find it highly unlikely that my env could be wrong when a version prior is working fine (Vite v3) v4 breaks things for me on Windows.
I found a issue but for Vite v3 that's practically the same thing I'm describing
https://github.com/vitejs/vite/issues/10677
I can't make a reproduction though to create a new issue in their github

No errors in my output, no errors in vite's log