HMR auto refresh not working with Tailwind

[chris-nccpa]

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>

[Decad]

We are also bumping into this with tailwind, any ideas on a solution?

[chris-nccpa]

@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"

[grandsong]

version 0.6.0 works well. Hope a fix for 0.7 will come soon.

[chenbimo]

it works,thanks.

[JohnCampionJr]

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