Tailwindcss and Vue3 with Vitejs, need to restart server each time to see changes, Vite hot reload not working for tailwind classes

Question

I'm trying to make a project in Vue3, tailwindcss and Vite

for that I'm using this starter template mentioned on Vite js website: https://github.com/web2033/vite-vue3-tailwind-starter

Now the problem is tailwind classes are not working on Vite hot reload, HTML is updating without any problem but to see changes in style I need to restart the server again and again with

npm run dev

that is I think should not be the case, I cannot keep restarting server again and again

I tried to find some answers and after sometime I also tried disabling the cache in chrome yet no luck.

node version : v16.13.0

UPDATE

I ended up deleting the starter template and followed instructions on tailwind-css website for Vue(vite) project and it is now working fine.

Answer 1

I had the same problem, after adding the following lines to vite.config.ts everything started working correctly

server: {
  watch: {
    usePolling: true
  }
}

Finally, my Vite configuration looks like this:

import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
    watch: {
      usePolling: true
    }
  }
});

---

Vite 2.7.13, Vue 3.2.29, Tailwind 3.0.23, node 16.13.2