Vite is not reloading tailwindcss classes after file change

Question

I got the following issue in my Laravel 9 project.

We use vite and tailwindcss, but whenever I change the blade.php files and add a new class, the CSS is not recompiled.

My setup:

composer.json

"require": {
    "php": "^8.0.2",
    "doctrine/dbal": "^3.4",
    "guzzlehttp/guzzle": "^7.2",
    "innocenzi/laravel-vite": "0.2.*",
    "laravel/framework": "^9.19",
    "laravel/sanctum": "^3.0",
    "laravel/tinker": "^2.7"
},
"require-dev": {
    "fakerphp/faker": "^1.9.1",
    "laravel/pint": "^1.0",
    "laravel/sail": "^1.0.1",
    "mockery/mockery": "^1.4.4",
    "nunomaduro/collision": "^6.1",
    "phpunit/phpunit": "^9.5.10",
    "spatie/laravel-ignition": "^1.0"
},

package.json

{
    "private": true,
    "dependencies": {
        "@fortawesome/fontawesome-pro": "^6.2.0",
        "@tailwindcss/forms": "^0.5.3"
    },
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "vite build --watch"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.12",
        "postcss": "^8.4.18",
        "tailwindcss": "^3.2.1",
        "vite": "^3.1.8",
        "vite-plugin-laravel": "^0.2.2"
    }
}

tailwind.config.js

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

vite.config.ts

import { defineConfig } from 'vite';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
import laravel, { callArtisan, findPhpPath } from 'vite-plugin-laravel';

export default defineConfig({
    plugins: [
        laravel({
            postcss: [
                tailwindcss({
                    content: [
                        './resources/**/*.blade.php',
                        './resources/viewes/**/*.blade.php',
                        './resources/**/*.js',
                        './resources/**/*.vue',
                        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
                    ],
                    watch: {
                        reloadOnBladeUpdates: true
                    }
                }),
                autoprefixer(),
            ],
            watch: {
                reloadOnBladeUpdates: true,
                input: [
                    {
                        condition: file => file.includes('resources/lang'),
                        handle: () => callArtisan(findPhpPath(), 'i18n:generate'),
                    },
                    {
                        condition: file => file.includes('routes/'),
                        handle: () => callArtisan(findPhpPath(), 'routes:generate'),
                    },
                ],
            },
        }),
    ],
});

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

With this setup I run vite and php artisan serve. But as described above, if I add a class, say bg-green-500 this change is not executed until I restart vite or run vite build

Where did I go wrong here? Thanks in advance!

Answer 1

The issue is related to WSL2.

I added this line to the vite.config.ts:

server: {
    watch: {
        usePolling: true
    },
},

this solves the issue.