vite-plugin-vue-layouts
vite-plugin-vue-layouts copied to clipboard
HMR auto refresh not working with Tailwind
When using v0.6.0, layouts auto-refresh via HMR. When using v0.7.0 layouts only update after running "vite dev"
If I change any Tailwind classes such as "bg-yellow-500"; Tailwind does not update as it did in v0.6.0.
<template> <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200"> <div class="mt-5 mx-auto text-center bg-yellow-500 text-white py-4"> [Home Layouts] </div> <RouterView /> <Footer /> </main> </template>
We are also bumping into this with tailwind, any ideas on a solution?
@Decad IT appears 0.7.0 does not work with any Version of Vite for hot reloading Tailwind. I'm using v0.6.0 for now..
If using Vite 2 the combination I've found that works is using:
- vite: 2.6.1
- vite-plugin-pages: 0.18.1
- vite-plugin-vue-layouts: 0.6.0
- tailwindcss: 3.1.2
- postcss: 8.4.14
If you are using Vite 3; your App.vue must be changed to work with vite plugin updates. You can use Vitesse as a reference: https://github.com/antfu/vitesse
App.vue must not use a transition and just use <Router-View>
<template>
<RouterView />
</template>
I have a project working with Vite 3 using the version below:
- "vite": "^3.0.9",
- "vite-plugin-pages": "^0.25.0"
- "vite-plugin-vue-layouts": "^0.6.0"
version 0.6.0 works well. Hope a fix for 0.7 will come soon.
it works,thanks.
I cannot duplicate in Vitesse, with Vite 5.0.5 https://github.com/antfu/vitesse
If you find an issue with that template and Vite 5, please open a new issue