Seeking a standard for handling Tailwind CSS layout shifts for Dioxus Web

[remysedlak]

Hi all,

I’ve been learning Dioxus + Tailwind CSS and noticed that web tailwind projects (not using dioxus fullstack) cause Flash of Unstyled Content (FOUC) during page load. Lighthouse plugin reports a CLS of 0.95. I've noticed perhaps the problem is that Tailwind uses hashed filenames in production (e.g., tailwind-d2c30edb.css), but the generated index.html references a static filename:

<link rel="stylesheet" href="/assets/tailwind.css">

This mismatch causes the styles to not load immediately, resulting in a flash of unstyled raw HTML.

I tried to write a PowerShell script that finds the latest tailwind-*.css in the assets/ folder and updates index.html to reference the correct hashed filename, which replaces the html scramble with just a static white screen instead. I'd like to remove the flash completely. Ideally the site should not display anything until css is loaded and html is already styled.

My questions:

1. Is there a better way to handle hashed Tailwind filenames when using Dioxus WASM builds?
2. Are there existing alternatives to this css name change solution? (e.g., a Dioxus plugin or Rust build script)?

If anyone has faced this or knows a more idiomatic Dioxus approach, I’d appreciate your insights!

Thanks,
Remy

[Weiming-Hu]

Just sharing one possible idea. This is my main.rs

mod components;

use dioxus::prelude::*;
use components::Route;

const TAILWIND_CSS: Asset = asset!("/assets/css/tailwind_output.css");

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    use_effect(move || {
        document::eval(
            r#"document.body.classList.add('loaded');"#
        );
    });

    rsx! {
        document::Link { rel: "stylesheet", href: TAILWIND_CSS }        
        Router::<Route> {}
    }
}

And I have customized the CSS:

body {
  opacity: 0;
}

body.loaded {
  opacity: 1;
}

CSS is loaded with Asset which should resolve to the hashed file name at production. But FOUC still happens so I made the page initially white. When the components have been loaded, the js command will make the content actually appear. I noticed FOUC is less likely to happen but it still happens sometimes. So the problem is still lurking around.

[remysedlak]

Thank you for your ideas, I've tried adding

<style>
  html, body {
    margin: 0;
    background-color: #111827;
    min-height: 100%;
  }
</style>

to head in index.html after using dx bundle --platform web.

A dark colored splash screen is better than the white screen flashing while wasm loads.

I'm confused why even lightweight 4kb CSS files cannot just render on the first frame like the inline css I described.

<link rel="preload" as="style" href="tailwind.css" />
   <link rel="stylesheet" href="tailwind.css">

I do not believe the code above beats any races with the wasm code, another solution I tried is just copying all CSS and pasting it in the index.html <style>, not bad.

[Weiming-Hu]

Good to know. Thanks for sharing!

[ealmloff]

You can add the tailwind link without the hash to your index.html file in the root of your project (with a id="main" for dioxus to render into). To make sure the asset is bundled without a hash you need to either:

1. Set asset_dir = "assets" in your dioxus.toml for dioxus 0.6 and earlier
2. Set the with hash option to false on your manganis asset: https://docs.rs/manganis-core/0.7.0-alpha.3/manganis_core/struct.AssetOptionsBuilder.html#method.with_hash_suffix for dioxus 0.7

[Weiming-Hu]

Thanks. This can be helpful in other cases as well. However, I think the OP was trying to solve the FOUC problem. I still experience FOUC even when I used hash file names. So I suspect these changes won't solve FOUC.

[remysedlak]

Thank you, I will test this out.