FOUC with TailwindCSS and NextJs 13

[kevinlowe0x3F7]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:42:11 PST 2023; root:xnu-8792.81.3~2/RELEASE_X86_64
Binaries:
  Node: 19.6.1
  npm: 9.4.0
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.2.2-canary.1
  eslint-config-next: 13.2.1
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-yxetxb?file=app%2Fpage.tsx

To Reproduce

1. Navigate to app/page.tsx once the dev command is running
2. Try changing the Hello World text. On rerender it will inconsistently show a FOUC. It may require several tries

Describe the Bug

Split second of white screen and unstyled content while iterating in dev. The StackBlitz should be a pretty minimal Tailwind + NextJS project setup. Subsequent refreshes seem to work fine.

Expected Behavior

No FOUC

Which browser are you using? (if relevant)

Chrome 109.0.5414.119 (Official Build) (x86_64)

How are you deploying your application? (if relevant)

No response

[unbelivr]

same issue #46197

[geotrev]

You beat me to the punch.

This happens for normal CSS modules too. The issue is being discussed at some length in the app dir discussion thread.

Here's a simple reproduction with a colocated CSS file (navigate to /about and the h1 on subsequent page should initially render in its default size, then pop into the size defined in the stylesheet).

I've confirmed at least on latest Firefox and Chrome on Windows 10.

EDIT: Not sure if this matters but for /pages routes, I do notice hovering Link anchors preloads the subsequent view's styles. That doesn't happen for /app routes though.

[timfee]

Also see #46947 :)

[abusada]

Hello there, facing the same issue did anyone figure out how to solve it?
I'm using appDirectory

[medonat]

We also have this issue.

[nickwild-999]

Yes happening for me too

[tangochris]

For me, this issue is resolved in today's release of NextJS 13.3.1. CLS now 0.033. Yay!

[geotrev]

Confirmed this issue is fixed as well after updating to v13.3.1. 🤝

[nickwild-999]

Worked for me too. Thanks for the heads up

[shuding]

This issue is fixed in recent versions with a test add in #47708.

[ImraKocis]

FOUC still present on Firefox for me

Environment information

I am using pages/_app.tsx

"next": "^13.3.1",
"react": "^18.2.0",
"tailwindcss": "3.2.4",

Problem description

FOUC is only present on Firefox browser. I can notice it only on fonts, I'm using next/font google font's along side with tailwind css.

I can show some code if needed

[john-whiting]

I am also having the FOUC issue only on the Firefox browser. Testing against Chrome shows no FOUC. Mine is with tailwind styling too, and not just fonts.

    "next": "13.4.2",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "tailwindcss": "3.3.2",

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.