SvelteKit(ViteJS) + TailwindCSS not hot reloading components

I'm trying to code an app using TailwindCSS and SvelteKit, which uses ViteJS under the hood, and while coding I realized that my Header component that is inside ./src/components/common/Header.svelte was not hot reloading on changes. No matter how big or small the change to the component, Svelte would not display them until I terminated script in the console and re-ran npm run dev.

The normal behaviour would be that the whole page updated WITH changes to the components other than pages.

Note that adding and removing changes to any routes the changes are instantly visible but the components stay the same.

This issue got quite annoying after some time and I tried finding the fix in TailwindCSS and in the svelte.config.js (Not a .cjs file in Svelte-Kit) file.

After searching for a ton of answers I could not find anything that worked.

This behaviour is quite weird since in the other projects that I work on that use this same architecture of TailwindCSS and Svelte-kit the HMR works like a charm.

Here is the code for my Header.svelte file and the __layout.svelte

Header.svelte

<script>
</script>

<header>
    <!-- TEST HEADER -->
    <nav>
        <ul class="flex gap-5 bg-red-500">
            <!--These classes are tests and won't change the appearance of the Header unless I restart the script-->
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
            <!--Other random change that won't update-->
            <li>Random Change</li>
        </ul>
    </nav>
</header>

__layout.svelte

<script>
    import '../css/tailwind.css';
    import Header from '../components/common/Header.svelte';
</script>

<Header />
<slot />

also my config files:

tailwind.config.cjs

module.exports = {
    content: ['./src/**/*.svelte', './src/app.html'],
    plugins: []
};

svelte.config.js

import preprocess from 'svelte-preprocess';
import path from 'path';


// @type {import('@sveltejs/kit').Config
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        vite: {
            resolve: {
                alias: {
                    '@components': path.resolve('./src/components'),
                    '@routes': path.resolve('./src/routes'),
                    '@utils': path.resolve('./src/utils'),
                    '@data': path.resolve('./src/data')
                }
            }
        }
    }
};

export default config;