Tailwindcss-module: Dark Mode - Flash generated on routes

[xanzhu]

Version

@nuxtjs/tailwindcss: 3.2.0
nuxt: 2.14.7

Reproduction Link

https://github.com/xanzhu/mo

Steps to reproduce

Provided two urls with/without flash present.
Only difference is usage of the modern build when generating

Modern build: https://mo-ppzexz0t6.vercel.app/
Default build: https://mo-67xvahpww.vercel.app/

Open one of the selected urls, in the address bar type a random path to generate a 404 error

_Example provided is using the latest tailwind version with native dark mode support see here_

What is Expected?

Page loads normally based on browser colour scheme

What is actually happening?

Page loads with a flash before the content is generated.

Specific to my case this only occurs when using the modern property

---

Example with varying configuration/setup

https://nuxtjs.org

• Flash on load
• Flash on 404 page
• Flash on manually navigating to existing routes

Also appearing on subdomains (Inconsistent)

https://i18n.nuxtjs.org

• Flash on manually navigating to exisiting routes

I've come across quite a few projects with this problem

---

This bug is very inconsistent where the flash will occur or just doesn't show up, both with default and modern builds. Browser specific occurring on Chromium based browsers (Rarely see any visual issues with other browser engines). Not introduced with tailwind v2 as present in all prior methods for dark mode with varying configurations/setups.

I've tested using tailwinds apply rule inside default.vue via a body tag @apply dark:bg-black bg-white or direct inside tailwind.css file this works but not with the modern build. Same applies to using a bodyAttrs inside nuxt.config.js.

Not a huge issue but visually annoying for native dark sites 👀

[Atinux]

Hi @xanzhu, thank you for reporting, actually I cannot really recommend the modern build for Nuxt 2, we are rewriting it for Nuxt 3 (to be the default value with a legacy mode for older browser).

It will take me too much time to debug this sadly :grimacing:

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.