Getting started with Vite

Hi Starting a playground project with Laravel 10 and dipping my toes in with Vite for the first time. I've installed Jetstream and had a successful build - all good but now have problems with 2 areas:

Q1. When I add a style to an element in a view the added style is not being reflected in the built css file. For example I have this component:

<x-button class="ml-4 !bg-blue !text-white">
                            Import
                        </x-button>

When I run npm run build I expected the build to now include the blue styles into the final CSS, it's not.

Q2. If I try and run npm run dev I hit a maximum number of file watchers reached (using homestead). I've increased the file watch within linux to 100,000 but limit still being reached. It fails trying to watch node_modules for changes. Is there a way to configure Vite to not watch node_modules?

Here's my vite config file:

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

and here's the tailwind config:

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

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

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