Vue SFCs prevent Tailwind from generating CSS classes with vite-plugin-ssr

[AaronBeaudoin]

Describe the bug

When using vite-plugin-ssr with a page in "client-only" mode (by changing the filename from .page.vue to .page.client.vue), Tailwind cannot seem to generate new classes. See instructions provided in the linked repo.

I believe this issue is related to @vitejs/plugin-vue and not vite-plugin-ssr or Tailwind because everything works fine as long as the page file is a .page.client.js or some other extension and not a .page.client.vue Vue SFC file. I posted the issue here instead of vuejs/core because even when using a SFC file, everything works when just doing .page.vue (not doing "client-only" mode).

Reproduction

https://github.com/AaronBeaudoin/vite-issue-vue-sfc-tailwind

System Info

System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 80.53 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Safari: 15.1
  npmPackages:
    @vitejs/plugin-vue: ^3.0.1 => 3.0.1 
    vite: ^3.0.2 => 3.0.2

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[brillout]

For more context, this how vite-plugin-ssr treats .page.vue and .page.client.vue files:

<!-- /pages/about.page.vue -->
<template>
  <h1>About</h1>
  <p>
    This page is:
  </p>
  <ul>
    <li>Loaded and rendered to HTML on the sever-side (SSR).</li>
    <li>Loaded and rendered (hydrated) in the browser.</li>
  </ul>
</template>

If the user defines about.page.client.vue instead of about.page.vue:

<!-- /pages/about.page.client.vue -->
<template>
  <h1>About</h1>
  <p>
    This page is:
  </p>
  <ul>
    <li>Only loaded and rendered in the browser.</li>
    <li>Is is <em>not</em> loaded on the server-side (and therefore not rendered to HTML).</li>
  </ul>
</template>

This is how vite-plugin-ssr enables the user to have SPA pages as well SSR pages.

In addition to what Aaron wrote, we believe it's a problem related to @vitejs/plugin-vue also because Tailwind works when using React instead of Vue: https://github.com/brillout/vite-plugin-ssr_tailwind-css.

[sapphi-red]

By applying #9341 (comment), it worked.
So it's happening by the same reason with #9341.
Closing to keep a single discussion going.