I’m making a side project using tailwind and react with vite. I realised that the changes I made to my tailwind classes is not being reflected in the chrome dev tools and the changes are not displayed in the website. As a result I have to stop the server and run npm run dev again to see the reflected changes. I realised that this issue pops up only when I am trying to change the tailwind classes of a component that is imported and used in other components.

FYI I am using tailwind 3.4.16

Here is my tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  mode: 'jit',
  
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      screens: {
        'xs': '320px',   // Extra small screens
        'xss': '375px',
        'xsm': '425px',  // Extra small medium screens
        'sm': '640px',  // Small screens
        'md': '768px',  // Medium screens
        'lg': '1024px', // Large screens
        'xl': '1280px', // Extra large screens
        '2xl': '1536px' // 2 Extra large screens
      }
    },
  },
  plugins: [],
};

And here is my vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import tailwindcss from 'tailwindcss'

export default defineConfig({
    plugins: [react()],
    css: {
        postcss: {
            plugins: [tailwindcss()],
        },
    },
    resolve: {
        alias: {
            '@components': path.resolve(__dirname, 'src/components'),
        },
        preserveSymlinks: true, // Preserve symlink paths to maintain exact casing
    },

    server: {
        watch: {
            usePolling: true,
        },
        fs: {
            strict: true, // Enforces strict file system access, preserving case
        },
    },
});

Has anyone met this issue before?
Thank you all for the help!!!