diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index fbf7d2c1f5d490..0db6b23f936280 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -146,6 +146,11 @@ export async function handleHotUpdate(
// template is inlined into main, add main module instead
if (!templateModule) {
affectedModules.add(mainModule)
+ } else if (mainModule && !affectedModules.has(mainModule)) {
+ const styleImporters = [...mainModule.importers].filter((m) =>
+ /\.css($|\?)/.test(m.url)
+ )
+ styleImporters.forEach((m) => affectedModules.add(m))
}
}
if (didUpdateStyle) {
diff --git a/playground/tailwind/__test__/tailwind.spec.ts b/playground/tailwind/__test__/tailwind.spec.ts
index ee596a17999a6e..4483aabf6f6597 100644
--- a/playground/tailwind/__test__/tailwind.spec.ts
+++ b/playground/tailwind/__test__/tailwind.spec.ts
@@ -3,6 +3,7 @@ import {
editFile,
untilUpdated,
getColor,
+ getBgColor,
browserLogs,
page
} from '~utils'
@@ -64,4 +65,24 @@ if (!isBuild) {
browserLogs.length = 0
})
+
+ test('regenerate CSS and HMR (pug template)', async () => {
+ browserLogs.length = 0
+ const el = await page.$('.pug')
+
+ expect(await getBgColor(el)).toBe('rgb(248, 113, 113)')
+
+ editFile('src/components/PugTemplate.vue', (code) =>
+ code.replace('bg-red-400', 'bg-red-600')
+ )
+
+ await untilUpdated(() => getBgColor(el), 'rgb(220, 38, 38)')
+
+ expect(browserLogs).toMatchObject([
+ '[vite] css hot updated: /index.css',
+ '[vite] hot updated: /src/components/PugTemplate.vue?vue&type=template&lang.js'
+ ])
+
+ browserLogs.length = 0
+ })
}
diff --git a/playground/tailwind/src/components/PugTemplate.vue b/playground/tailwind/src/components/PugTemplate.vue
new file mode 100644
index 00000000000000..4169b534dee4ef
--- /dev/null
+++ b/playground/tailwind/src/components/PugTemplate.vue
@@ -0,0 +1,3 @@
+
+.bg-red-400.pug Pug template
+
diff --git a/playground/tailwind/src/views/Page.vue b/playground/tailwind/src/views/Page.vue
index 764a2a18e54fdb..84d4af06bb1c18 100644
--- a/playground/tailwind/src/views/Page.vue
+++ b/playground/tailwind/src/views/Page.vue
@@ -8,15 +8,17 @@
Tailwind style
+