Adding Tailwind to Gatsby Getting Flicker of Unstyled Content (FOUC)

Description

I’m trying to use Tailwind in my Gatsby project and I’m seeing a flicker of unstyled content when I try reloading the page.

This only happens in development environment (Using gatsby develop)

The code is here https://github.com/chadalen/personal-website/tree/gatsby-issue

For setting up Tailwindcss with Gatsby I have tried following these guides https://tailwindcss.com/docs/guides/gatsby https://www.gatsbyjs.com/docs/how-to/styling/tailwind-css/

Steps to reproduce

1. Run the following commands

git clone https://github.com/chadalen/personal-website.git
cd personal-website
git fetch
git checkout -t origin/gatsby-issue
npm install or yarn
npm run start or yarn start

1. Open a new tab, go to http://localhost:8000/
2. Refresh the page you should see the flicker of unstyled content

Expected result

There should not be any unstyled content upon loading the page.

Actual result

There is unstyled content upon loading the page.

Environment

System: OS: macOS 11.2 CPU: (16) x64 Intel® Core™ i9-9880H CPU @ 2.30GHz Shell: 3.1.2 - /usr/local/bin/fish Binaries: Node: 12.13.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.12.0 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 87.0.4280.88 Edge: 87.0.664.66 Firefox: 78.0.2 Safari: 14.0.3 npmPackages: gatsby: ^2.25.0 => 2.29.3 gatsby-image: ^2.4.7 => 2.8.0 gatsby-plugin-anchor-links: ^1.1.0 => 1.2.0 gatsby-plugin-html-attributes: ^1.0.5 => 1.0.5 gatsby-plugin-manifest: ^2.2.29 => 2.9.1 gatsby-plugin-netlify-cms: ^4.3.10 => 4.7.0 gatsby-plugin-postcss: ^3.4.0 => 3.4.0 gatsby-plugin-react-helmet: ^3.1.0 => 3.7.0 gatsby-plugin-sharp: ^2.6.11 => 2.11.2 gatsby-remark-prismjs: ^3.3.24 => 3.10.0 gatsby-source-filesystem: ^2.1.0 => 2.8.1 gatsby-transformer-remark: ^2.5.0 => 2.13.1 gatsby-transformer-sharp: ^2.5.5 => 2.9.0

[rahulsuresh-git]

Facing the same issue.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜