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