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.

it might be the Tailwind CSS v3.0.0-alpha ⚠ version that comes with that starter template? — mahatmanich
– mahatmanich, Commented Nov 1, 2021 at 6:51
I am bypassing this problem while developing at localhost by using ``` // safelist: [ { pattern: /./, }, ], ``` But the problem still appear when using hover: class though — Phạm Huy Phát
– Phạm Huy Phát, Commented Oct 5, 2023 at 15:10

Matthew · Accepted Answer · 2022-02-16 22:39:36Z

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

answered Feb 16, 2022 at 22:39

Matthew

5193 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Veerendra Singh · Accepted Answer · 2021-11-01 09:01:53Z

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.

answered Nov 1, 2021 at 9:01

Veerendra Singh

1852 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related