Completely lost getting Vite + Tailwind to work for development

I'm having issues where newly added CSS classes to any of my blade templates is not updating app.css when using the vite dev server (npm run dev).

I have literally read every thread on this subject, tried multiple different config files setup and even consulted ChatGPT, I'm completely stuck.

Here's the issue: if I add new Tailwind classes to my blade files (stored in the default resources/views/*.blade.php directory) I can see vite detects changes to the blade file but resources/css/app.css does not get updated. I renamed the file as a check to see if it would be re-created and it wasn't.

I can run npm build and the css files in /public have all the correct classes and everything works so this is related to the vite dev server I believe. I don't have any console errors.

I'm using Vite HMR and I have a reverse proxy in front of it since I'm remotely developing however I don't have any issues with connections so I'm not sure that's the issue here. I have tried clearing cache, changing browsers, I can't figure out why vite recognizes changes to my blade templates but can't call tailwind to update app.css. Is it HMR that's the cause??

vite.config.js

import { defineConfig, loadEnv } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
    server: {
        host: 'localhost',
        strictPort: true,
        port: 5173,
        hmr: {
            host: 'dev-assets.mydomain.com',
            clientPort: 443
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

tailwind.config.js

/** @type {import('tailwindcss').Config} */

export default {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    theme: {
        extend: {},
    },
    plugins: ["tailwindcss ,autoprefixer"],
}

package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite --host --debug hmr",
        "build": "vite build",
        "watch": "vite build --watch"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.19",
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.39",
        "tailwindcss": "^3.4.4",
        "vite": "^5.3.3"
    }
}

resources/css/apps.css

@tailwind base;
@tailwind components;
@tailwind utilities;