Tailwindcss Hot Relead issue

Tailwindcss classes don’t make changes via hot reload. But all other changes works fine like text changes or Frmaework7 component changes etc.

If I reload the whole page then I see changes for tailwindcss. I thought maybe I made some mistake because I changed fremawork7 file structure a little bit.

So I Installed a fresh project with Framework7 CLI.

Installed Tailwindcss via official documentation for Vite.

This is inside tailwind.config.js

module.exports = {
	mode: "jit",
	content: ["./src/**/*.{html,vue,js,ts,jsx,tsx}"],
	darkMode: "class",
	theme: {
		extend: {},
	},
	plugins: [],
};

This is inside postcss.config.js

module.exports = {
	plugins: {
		"postcss-preset-env": {},
		tailwindcss: {},
	},
};

This is inside src/css/app.css

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

As mentioned, Tailwind is working but when I change some classes, I don’t see changes with hot reload unless I reload the full page.

console.log is showing this on each save.

[vite] hot updated: /pages/home.vue
client.ts:354 [vite] hot updated: /css/app.css