Flickers from default TailwindCSS styling

[Destaq]

The default TailwindCSS theme is applied for some time, even on a production build, when using DaisyUI.

I believe this is due to upgrading to Nuxt-Bridge and thus slightly changing the way in which TailwindCSS is imported.

You can see a minimum reproducible example here, by going to the examples/nuxtjs section.

Screen.Recording.2021-10-16.at.11.39.21.AM.mov

[saadeghi]

@Destaq Thanks for reporting. I will look at it today.

[saadeghi]

@Destaq I added a nuxt3 example
However I'm not sure how Nuxt-Bridge works. I couldn't find any documents about supporting PostCSS 🤷‍♂️

[saadeghi]

@Destaq I'm closing this and I will follow the issue you opened on nuxt/framework
Feel free to re-open this if needed.
Also let me know if you have any questions.

[Destaq]

@saadeghi Reopening this as I've found a significant issue when using nuxt3, even with the example you provided.

The problem is with supporting multiple themes. It only occurs when you have a pages directory, and thus Vue Router (as the nuxt3 example for the repo does. If you add the following code to pages/index.vue:

<script>
export default {
  setup() {
    useMeta({
      htmlAttrs: {
        "data-theme": "retro"
      }
    })
  },
};
</script>

then there will be a flicker from the default DaisyUI styling (either dark or light mode, depending on the system), to the chosen theme. The library is immediately used, but it utilizes one of these two things before flickering to the right theme.

Of course, this can be changed by manually setting the data-theme at the top in the simplified example I provided, but would not solve the issue, as the data-theme in the <script> will be dynamic, based on loading cookies. An example of this is below.

<script>
import { useCookie } from "#app";

export default {
  setup() {
    const theme = useCookie("theme") || "garden";

    useMeta({
      htmlAttrs: {
        "data-theme": theme,
      },
      title: "My Nuxt App",
    });

    return { theme };
  },
};
</script>

Any tips to get this working with no flicker?

[Destaq]

This only occurs when Server-Side-Rendering is set to true (the default). The following nuxt.config.js configuration doesn't cause the issue.

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        }
      }
    },
  },
  ssr: false,
})

But this is far from an ideal solution, only sharing in case it helps find the root cause of the problem. Any DaisyUI workaround with SSR would be much appreciated.

[saadeghi]

I did some tests.
Instead of Tailwind file, I imported this little file:

[data-theme="retro"]{
  background-color: black;
}

And when I refresh pages on Chrome and FireFox, I see flicker of a white page before it gets black. (Safari is fine)
When I import this file:

:root{
  background-color: black;
}

And I refresh the page, there's no flicker, page is black in every millisecond.

It looks like Chrome and Firefox are reading attribute selector styles slower than other element selectors 🤔

[saadeghi]

Also this code will show yellow flicker before it turns black. but it should simply show black color with no delay.

:root{
  --color: yellow;
}
[data-theme="retro"]{
  --color: black;
}
:root{
  background-color: var(--color);
}

I guess the problem is performance of attribute selectors on Chrome and Firefox.

[andreashaerter]

Just for-the-record: I am currently experiencing a comparable issue using

• tailwindcss: 3.0.23
• @tailwindcss/forms: 0.5.0
• @tailwindcss/typography: 0.5.2
• daisyui: 2.11.0

and Hugo (no JavaScript libraries or Frameworks involved; same effect when JS is disabled). Will try to produce an easy-to-follow setup to make it easier to reproduce the issue.

[andreashaerter]

A bit more information: I guess this issue is not related to daisyUI. I am able to reproduce it on nearly every website using Tailwind as well as on a simple local site under following condition:

• Chromium based browser with NoScript-Extension (this is essential)
• Site containing SVG images

Examples on tailwindui.com as well as a local Hugo experiment with daisyUI (cf. comment above):

Reloading a website is more likely to trigger the effect than opening the website the first time. As NoScript had trouble with Googles DeclarativeNetRequest API (like others), there might be some CSS magic which is simply getting to slow when these kind of extensions are involved.

However, I can reproduce some slightly comparable issues on other website but only Tailwind based are this recognizable due to the default color scheme. Even though it's an edge case: Maybe one can find a way to make the default style flicker less recognizable?

[saadeghi]

I agree this is not a problem from daisyUI because daisyUI is just a plugin that adds component class names to a Tailwind CSS build and at the end, it's up to the framework how to handle CSS (load it as a file or not/ load it before JS files, or inside JS or after JS render)

One way would be separating critical style (that is needed in the first view) and load them before first before any JS. But there's a big issue about that: CSS specificity. If it's a separate file or inline CSS it will mess with Tailwind's order of class names because it's important what class name comes first in a utility-first library.

I think it's better to move this issue to discussions.