[6.12] HMR not working for new page creation

[amonys19212]

Environment

Module v6.12.0
Nuxt v3.12.2
Node.js v20.12.0
NPM v10.5.0

Reproduction

Stackblitz
https://stackblitz.com/edit/nuxt-starter-dttqi3

Describe the bug

I'm facing an issue with using Tailwind CSS in my project. My setup includes Nuxt 3.12.2, and I'm using the @nuxtjs/tailwindcss module version 6.12.0, both of which are the latest versions.

When I create a new page [test.vue] under the pages directory and add Tailwind CSS class names, HMR allows me to view the /test page. However, the Tailwind CSS styles are not being applied.

test.vue

<template>
  <div class="text-red-500">test</div>
</template>

Demo (Stackblitz):
https://github.com/nuxt-modules/tailwindcss/assets/112873293/8d1289b8-3d3e-49cb-9796-0abed0801f58

I encountered this issue during local development and then tested and reproduced it on Stackblitz.

I tried using an older version of the Tailwind CSS module, version 6.11.3, and everything worked fine, including new class names in newly added files.

I believe the issue is caused by the new First HMR feature introduced in version 6.12.0.

I first asked about this on Discord and received help from localhostess and Smef, but the issue still hasn't been resolved. I greatly appreciate their testing and assistance.

Additional context

No response

Logs

No response