FOUC (Flash of Unstyled Content ) when using vite-ssg + tailwind

[armenr]

Describe the bug

When building my project using vite-ssg + tailwind, we consistently get FOUC on every load.

I have checked whether the same FOUC issue exists with the vanilla vitesse boilerplate, with the default code, and it does.

git clone [email protected]:antfu/vitesse.git \
  && cd vitesse \
  && pnpm i \
  && pnpm build:ssg \
  && pnpm preview

NOTE: Our base project is based on vitesse. We removed unocss and added tailwind.

Reproduction

https://github.com/antfu/vitesse

System Info

❯ npx envinfo --system --binaries --browsers
  System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 933.11 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.179
    Edge: 113.0.1774.57
    Firefox: 117.0
    Safari: 16.5.2

### Used Package Manager

pnpm

### Validations

- [X] Follow our [Code of Conduct](https://github.com/antfu/.github/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guide](https://github.com/antfu/contribute).
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- [X] The provided reproduction is a [minimal reproducible](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[khaledosman]

We're having the same problem, vite/vite-ssg seems to be unable to extract any css that is within .vue files, it only renders the html without any css causing massive layout shifts and FOUC.

The provided vitesse demo page masks it quite well because its a small app/bundle to be loaded and has service workers to cache assets which prevents this issue on repeated visits as the js bundle is loaded and the app is hydrated fast enough mostly, but with any bigger sized app that flicker is quite noticable as no css for any of the rendered components is applied at all, unless its coming from a global stylesheet.

[antfu]

I would suggest using Nuxt or VitePress; otherwise, I would say this might be a problem you need to figure out on your own (or PR welcome!).

If it's not a problem with UnoCSS but with Tailwind, then it's cold because of TW or some integrations to it - either way, I don't use TW, so you could imagine I won't have the incentive to look into it.

I could keep this issue open if anyone wants to provide more context or even work on it. But I wouldn't have high expectations of it getting solved any sooner.

[khaledosman]

I was testing it out in my own repo, its not an unocss or tailwind specific issue, I was using neither, and just had a random helloworld vue component. Opening the ssg rendered page with either js disabled, or after commenting out the script to hydrate the page rendered the component without any of its css (no matter whether I used scoped / module / lang="scss", etc.. or just plain old <style> tag

Any css within the vue component was not being loaded, however when I moved the css from the vue component and load it as global css/.scss stylesheet it works normally, its almost like all css has to be global for it to work