New Laravel vite and tailwind CSS build issue

So started a new Laravel project and so thought give this Vite a go, before taking all out and putting Mix back in.

So just wanted the base Laravel project (No Vue, react, Inertia etc), just laravel and also Tailwind CSS.

Got it all working nicely and running, but then decided to try to see what the build version is like so run

npm run build

All went well until i then refreshed the browser, then then page just hangs with the Chrome Tab loading circle. Looked in the network tab and it was showing 'client, app.js and app.css' as pending...

As i write this is it still trying to load the page.

The page is a very stripped down page with 'Lorem' copy and one image and a few tailwind classes to test, so the page and classes used aren't heavy at all.

I am using local development via Laravel Valet.

Tried the trusted google search but they all reference vue, react set ups etc, and nothing really relating to this issue.

vite.config.js

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

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

postcss.config.js

module.exports = {
    plugins: {
      'postcss-import': {},
      tailwindcss: {},
      autoprefixer: {},
    },
  }

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    content: [
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.js',
    ],
    theme: {
        extend: {
			
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

In my layout page

@vite(['resources/css/app.css', 'resources/js/app.js'])