Flash of unstyled content when hosted
Whenever I host a TanStack Start app in a VPS using a dockerfile, and I visit a page I always get a flash where no single style is applied, then a split second later, the styling gets applied. This doesn't happen when I host on Vercel.
On Vercel, the only styling that doesn't get applied as soon as the page loads is the font. I get this issue on both the vinxi and devinxi (alpha) versions. Please, how do I fix this?
10 Replies
helpful-purple•6mo ago
you dont have errors? how you are importing css and using vite?
unwilling-turquoiseOP•6mo ago
I'm importing the CSS in the __root.tsx file. Here's the repository: https://github.com/gozmanthefirst/tanstarter.
helpful-purple•6mo ago
seems ok at first look, do you have any hydration warnings while testing?
like-gold•6mo ago
I thin you need to set also the souce when importing tailwind
or you will have hydration error
like-gold•6mo ago
GitHub
[Start] CSS files in node-server build don't work with Tailwind 4.0...
Which project does this relate to? Start Describe the bug When using TailwindCSS v4.0 beta, the node-server build has problems with stylesheets. Here's a repro repo: https://github.com/glecetre...
unwilling-turquoiseOP•6mo ago
Yes, I get a hydration error.
helpful-purple•6mo ago
try supress it to see if the error goes out, might be the case
unwilling-turquoiseOP•6mo ago
I'll try this.
Will suppressing it eliminate the flash of unstyled content?
helpful-purple•6mo ago
Im not sure why, probably a react internal thing, just add the
suppressHydrationWarning to the html tag and let me knowunwilling-turquoiseOP•6mo ago
This worked. Thank you!