styles flickering in dev with tailwind + css modules

Bug report

Describe the bug

I’m using tailwindcss with css modules and I notice that the first time the page loads, all my styles are not loaded. Trying to figure it put what was happening, I run the tailwindcss example and added a style from a css module and it happens there too, even when built for prod.

To Reproduce

Run the example from https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss

Add a index.module.css file with some style

add the styles form the css module in the index.js page

Expected behavior

Without the use of the css modules, all styles are loaded fine the first time, without flickering. Same behavior is expected using css modules

Screenshots

System information

• OS: macOS
• Browser (if applies) [e.g. chrome, safari]
• Version of Next.js: v9.3.6
• Version of Node.js: v13.12.0
• Version of tailwindcss: v1.4.4

[fadonascimento]

There is a workaround to resolve this problem Create a custom “_document.js” and add the class “no-fouc” in the Html component Create a custom “_app.js” and add the following code in the “componentDidMount”

const removeFouc = (foucElement) => {
      foucElement.className = foucElement.className.replace('no-fouc', 'fouc')
    }
 removeFouc(document.documentElement)

Add add this styles in the global styles:

.no-fouc {
  visibility: hidden;
 opacity: 0;
}

.fouc {
 visibility: visible;
 opacity: 1;
}

[Timer]

This should be fixed in next@^9.4.5-canary.15! Please upgrade and let us know.