6

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.

Veerendra Singh
  • 155
  • 1
  • 10

2 Answers2

2

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

Matthew
  • 369
  • 1
  • 12
0

I tried my head around it but was not able to come up with any solution, so I just deleted whole starter template and created a new project fresh from start but this time using the instructions on tailwind css website for Vue(vite) project and it is working completely fine.

If anyone of you is facing the same issue I would recommend using the docs on tailwind css website for Vue(vite) project because there might be some issue with starter templates.

Veerendra Singh
  • 155
  • 1
  • 10