Next.js: styles flickering in dev with tailwind + css modules

Created on 3 May 2020 · 13Comments · Source: vercel/next.js

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

May-03-2020 14-06-19

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

bug 2 next

Source

tafelito

👍9

Most helpful comment

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;
}

fadonascimento on 3 Jun 2020

👍6 😕1 👎1

All 13 comments

I suspect this may have something to do with the automatic code splitting of css modules 🤔

Pytal on 7 May 2020

Probably related to https://github.com/zeit/next.js/issues/10268

mzygmunt on 8 May 2020

👍1

I have used plain css modules for components and styles apply after some ms.

dani97 on 27 May 2020

I have used plain css modules for components and styles apply after some ms.

According to https://stackoverflow.com/a/42969608/943337 i just added an empty script tag and my problem of a sidebar which was popping up at first load, is now solved.

https://github.com/vercel/next-plugins/issues/455#issuecomment-489452379

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GA_TRACKING_ID } from '../utils/anayltics';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="de">
        <Head>
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
          <script> </script>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Adrianjs42 on 27 May 2020

I have used plain css modules for components and styles apply after some ms.

According to https://stackoverflow.com/a/42969608/943337 i just added an empty script tag and my problem of a sidebar which was popping up at first load, is now solved.

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GA_TRACKING_ID } from '../utils/anayltics';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="de">
        <Head>
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
          <script> </script>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Thanks @Adrianjs42 the side bar popping in stopped in chrome.

dani97 on 28 May 2020

webdeb on 31 May 2020

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;
}

fadonascimento on 3 Jun 2020

👍6 😕1 👎1

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

Timer on 22 Jun 2020

👍3 🎉2 👎1

@Timer , I have installed next@^9.4.5-canary.18. Now the CSS flickering doesn't appear in the development mode, but it stays the same on the production version. The production version still has the bug.

Note that I'm using material-ui + css modules

Heres a version of the app that I've been working on facing this issue: https://cluster-11-lwj6nmcgy.vercel.app/ .

Prottoy2938 on 24 Jun 2020

👀1

@Prottoy2938 Same here. I made a comment to this issue https://github.com/vercel/next.js/issues/13058#issuecomment-654165987

casperle on 6 Jul 2020

@Timer , I have installed next@^9.4.5-canary.18. Now the CSS flickering doesn't appear in the development mode, but it stays the same on the production version. The production version still has the bug.

Note that I'm using material-ui + css modules

Heres a version of the app that I've been working on facing this issue: cluster-11-lwj6nmcgy.vercel.app .

Seems this your case is unrelated to css modules / tailwind and more so related to forgetting to implement pre-rendering of material-ui: https://github.com/vercel/next.js/issues/7322#issuecomment-653858948

timneutkens on 6 Jul 2020

@casperle , In my case the problem was because I was doing server side rendering. I followed this documentation from material-ui and fixed the issue

Prottoy2938 on 6 Jul 2020

With v9.4.5-canary.28 not flickering in dev and flickering in production.