-
-
Notifications
You must be signed in to change notification settings - Fork 134
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
FOUC (Flash of Unstyled Content ) when using vite-ssg + tailwind #372
Comments
We're having the same problem, vite/vite-ssg seems to be unable to extract any css that is within 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. |
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. |
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 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 |
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.
NOTE: Our base project is based on
vitesse
. We removedunocss
and addedtailwind
.Reproduction
https://github.com/antfu/vitesse
System Info
The text was updated successfully, but these errors were encountered: