The latest version of `Tailwind` styles are not working, and hot reloading is not effective.

[wcldyx]

Problem

The latest version of Tailwind styles are not working, and hot reloading is not effective.

Steps To Reproduce

Steps to reproduce the behavior:

• Modifying content or styles shows hot reload information in the console, but the UI does not respond. The UI only updates after pressing the 'R' key to recompile.

• Setting the font color to red using Tailwind CSS is not working, and an error message is visible in the console.

Expected behavior I hope that basic features like hot reload during development and Tailwind CSS work properly.

Environment:

• Dioxus version: 0.6.0-alpha.2
• Rust version: rustc 1.81.0
• OS info: win11
• App platform: desktop

[hardliner66]

Temporary workaround for tailwind:

Download tailwind.js file from https://cdn.tailwindcss.com and put it in your assets folder, then use the following to load it:

let cfg = dioxus::desktop::Config::new()
    .with_custom_head(r#"<script src="/assets/tailwind.js"></script>"#.to_string());

[IroncladDev]

You need to have a separate tailwind process running as Dioxus doesn't run it for you when you do dx serve

npx tailwindcss -i ./src/input.css -o ./assets/tailwind.css --watch

I'm also experiencing the issue on 0.6.0-alpha.2 where hot reloading is not effective on any platform. I see DEV: Hotreloaded <file> in the dev logs but there are no changes.

[doxle]

let cfg = dioxus::web::Config::new() .with_custom_head(r#""#.to_string());

when i try to do this for web, i get an error. Also noticed when i was running tailwind watch in 0.5 version everything was working perfectly. But i need to access the canvas elements and jumped to 0.6 version and my tailwind just stopped working

[RusticCraftsman]

I'm experimenting the same exact problem with:

dx version: 0.6.0-main rustc: 1.79.9 (nightly)

let cfg = dioxus::desktop::Config::new()
    .with_custom_head(r#"<script src="/assets/tailwind.js"></script>"#.to_string());

I do not understand this, where does one put those lines of code, exactly? @hardliner66 im using dioxus only for web

[hardliner66]

@RusticCraftsman

This was the code I used:

fn make_config() -> dioxus::desktop::Config {
    let cfg = dioxus::desktop::Config::new();
    #[cfg(not(debug_assertions))]
    let cfg = cfg.with_disable_context_menu(true);
    #[cfg(not(debug_assertions))]
    let cfg = cfg.with_menu(None);
    cfg.with_custom_head(r#"<script src="/assets/tailwind.js"></script>"#.to_string())
        .with_window(make_window())
}

fn make_window() -> WindowBuilder {
    WindowBuilder::new()
        .with_maximized(true)
        .with_resizable(true)
        .with_always_on_top(false)
}

fn main() {
    // Init logger
    dioxus_logger::init(Level::ERROR).expect("failed to init logger");
    info!("starting app");

    LaunchBuilder::desktop().with_cfg(make_config()).launch(App);

    launch(App);
}

[ealmloff]

In dioxus 0.6, tailwind should be included in a document::Stylesheet component as described in the guide:

use dioxus::prelude::*;

#[component]
fn app() -> Element {
    rsx! {
        // The Stylesheet component inserts a style link into the head of the document
        document::Stylesheet {
            // Urls are relative to your Cargo.toml file
            href: asset!("/assets/tailwind.css")
        }
    }
}

If you still cannot load the asset after including it with the asset! macro, make sure the version of the Dioxus CLI and dioxus you installed are matching. If you are using 0.6, you need to install the 0.6 CLI (previous releases and 0.6-alpha releases are compatible)

[RusticCraftsman]

In dioxus 0.6, tailwind should be included in a document::Stylesheet component as described in the guide:

use dioxus::prelude::*;

#[component]
fn app() -> Element {
    rsx! {
        // The Stylesheet component inserts a style link into the head of the document
        document::Stylesheet {
            // Urls are relative to your Cargo.toml file
            href: asset!("/assets/tailwind.css")
        }
    }
}

If you still cannot load the asset after including it with the asset! macro, make sure the version of the Dioxus CLI and dioxus you installed are matching. If you are using 0.6, you need to install the 0.6 CLI (previous releases and 0.6-alpha releases are compatible)

That does work as well as using (inside rsx!)

head {
 script { src: "/assets/tailwind.js" }
}

with the manually downloaded file following the suggested workaround

To me it seems like the template being distributed for tailwindcss is not correct, based on how my template was generated and the current templates repo: https://github.com/DioxusLabs/dioxus-template/blob/fb0a78ee345ff4a33f2ca0ec29bddbbbe458d301/Bare-Bones/src/main.rs#L27

@ealmloff , Do you recon the template should be changed to include this? if so, i could quickly open a pr as a fix

[ealmloff]

To me it seems like the template being distributed for tailwindcss is not correct, based on how my template was generated and the current templates repo: https://github.com/DioxusLabs/dioxus-template/blob/fb0a78ee345ff4a33f2ca0ec29bddbbbe458d301/Bare-Bones/src/main.rs#L27

The template uses document::Link { rel: "stylesheet", href: ... } which is what the stylesheet component renders under the hood. I tested the bare bones template on macos with the chrome browser and it seems to render correctly (after running the tailwind CLI).

@ealmloff , Do you recon the template should be changed to include this? if so, i could quickly open a pr as a fix

I think both versions should work the same, but it would be a bit better to include use the stylesheet component in the template as well so it is consistent with the tailwind guide

[RusticCraftsman]

To me it seems like the template being distributed for tailwindcss is not correct, based on how my template was generated and the current templates repo: https://github.com/DioxusLabs/dioxus-template/blob/fb0a78ee345ff4a33f2ca0ec29bddbbbe458d301/Bare-Bones/src/main.rs#L27

The template uses document::Link { rel: "stylesheet", href: ... } which is what the stylesheet component renders under the hood. I tested the bare bones template on macos with the chrome browser and it seems to render correctly (after running the tailwind CLI).

@ealmloff , Do you recon the template should be changed to include this? if so, i could quickly open a pr as a fix

I think both versions should work the same, but it would be a bit better to include use the stylesheet component in the template as well so it is consistent with the tailwind guide

Well, in my case, as i said, it did not work with only the default document::Link { rel: "stylesheet", href: ... } for some reason, only after adding document::Stylesheet {href: asset!("/assets/tailwind.css")} or head { script { src: "/assets/tailwind.js" }} with the downloaded js.

So if you say that the barebones default implementation should work, then there must be a misbehavior or a bug somewhere else in the code.

[jkelleyrtp]

I think this is resolved now - we worked on the asset system a lot and fixed as much asset-hotreloading as we could find. The underlying issue here probably had to do with the css being in the default gitignore.

[k-zehnder]

Just in case anyone comes across this and wants to use Dioxus v0.6 with Tailwind. I was struggling a lot to get this to work but found this repo.

https://github.com/rushmi0/Dioxus-v0.6

Works perfectly. Hope this will save someone some time. Thanks to rushmi0 for sharing it.

[ProvoK]

Just in case anyone comes across this and wants to use Dioxus v0.6 with Tailwind. I was struggling a lot to get this to work but found this repo.

https://github.com/rushmi0/Dioxus-v0.6

Works perfectly. Hope this will save someone some time. Thanks to rushmi0 for sharing it.

Note for the sailors: with tailwindcss 4 you'll need to slightly change the "input.css" to make it work, see: https://github.com/DioxusLabs/asset/issues/71#issuecomment-2649362237