Tailwindcss with desktop fails

[PointyFluff]

Problem

• Using the dioxus cli app to create a new DESKTOP app using TAILWINDCSS does NOT work.
• Following the book (v0.5) does NOT help.
• Warning Message provided at build time by CLI:

"WARN dioxus_desktop::protocol: Assets built with manganis cannot be preloaded (failed to read "/home/user/Projects/Rust/Dioxus/new-app/__assets_head.html"). This warning may occur when you build a desktop application without the dioxus CLI. If you do not use manganis, you can ignore this warning: No such file or directory (os error 2)."

• am using the dioxus CLI.
• linking / copying file __assets_head.html to project root does not help.

This issue was never fixed. My company is willing to pay for support. My project is now 2 weeks behind and my engineers are pressing me to find a solution. I am seriously considering rewriting this in eframe::egui as the lack of docs and support has been very frustrating.

Steps To Reproduce

• dx new -- desktop -- "app name" -- tailwindcss -- router (t | f)
• cargo add manganis
• const _TAILWIND_URL: &str = manganis::mg!(file("assets/tailwind.css")); added to src/main.rs
• npx tailwindcss -i ./input.css -o ./public/tailwind.css --watch
• dx serve, OR dx serve --platform desktop, OR dx serve --platform desktop --hot-reaload all provide the same results.

Expected behavior

Tailwindcss formatting in desktop app, as it does in wasm.

Or at least ALL other css stripped from project prior to adding any tailwind markup to src/main.rs

System dioxus 0.5.6 dx cli 0.5.6 rust 1.8.0 OS LinuxMint 21.2 OR Win10

Screenshots

• note default CSS formatting

• console shows unable to find tailwindcss

[ealmloff]

I understand the frustration, but there are more polite ways to phrase this issue. This is an open source project which comes with no expectation of support. We do our best to help where we can, but providing support for every project using Dioxus is not feasible. Using all caps in an issue is not a good way to attract help for support

[ealmloff]

From your instructions, it sounds like you are combining the guide for adding tailwind to an existing project with the template that already includes tailwind support. The template generates a markdown file with a command to build tailwind with a different location then you mentioned in your reproduction. You need to run tailwind with an output in ./assets/tailwind.css if you are using the code from the tailwind template:

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

[ealmloff]

For anyone using the alpha (0.6.0-alpha.2), the way you import tailwind changes slightly. Assets are linked within rsx with the asset macro and head elements:

rsx! {
    link::Head { rel: "stylesheet", href: asset!("./assets/tailwind.css") }
    div { class: "w-6" }
}

[tobiaslabu]

I ran into the same issue trying to add tailwind to an existing project. To find out what I did wrong I tried to create a new project using the Dioxus CLI. I ran the following steps and ended up with the same warning as before and results matching the original post:

1. Create project using dx init. I chose desktop as sub-template, Tailwind to create CSS and accepted using the Dioxus router.
2. Run npx tailwindcss -i ./input.css -o ./assets/tailwind.css to generate assets/tailwind.css
3. Run dx serve --hot-reload --platform desktop to launch the application

Step 2 showed a warning:

warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration. warn - https://tailwindcss.com/docs/content-configuration

Step 3 caused the warning shown in the original post:

WARN dioxus_desktop::protocol: Assets built with manganis cannot be preloaded (failed to read "/home/path_to_the_project/__assets_head.html"). This warning may occur when you build a desktop application without the dioxus CLI. If you do not use manganis, you can ignore this warning: No such file or directory (os error 2).

Did I miss a step? I tried not to mix the instructions and would expect the template to provide a working application using tailwind.

[kirildi]

As I know there is still problems with Manganis and they will probably be fixed in future versions. If the warning bothers you, may be use custom index.html. In my case I also have it and I'm loading the 2 css files needed with manganis, but this doesn't affect the app loading/execution. Also I'm using a custom index.html like:

// in my case I'm using format!(r#"..."#) to "inject" my css paths
// but this example is without manganis
let index_html = r#" <!-- your index.html content here with included css files in head->link  -->"#

and then inside main.rs (for dioxus desktop)

LaunchBuilder::desktop()
       .with_cfg(
           dioxus::desktop::Config::new()
               .with_window(window)
               .with_custom_index(index_html),
       )
       .launch(App);

[xandox]

I just ran into the same issue and figured out that the problem isn't with Tailwind. The problem is that dx serve --platform desktop ignores the out_dir (which is dist by default). If you run dx from the project root, the application will not load anything from dist if you reference it like /$SOME_FILE in your HTML. However, if you run dx from the dist directory, everything should work fine.

PS: This applies to the desktop application template from the latest dx CLI (Dioxus 0.5.7). PS again: I haven't checked how bundled versions work yet.

[InAnYan]

I'm having the same issue, is there any workaround?

Update: running from dist/ works

[bluenote10]

From your instructions, it sounds like you are combining the guide for adding tailwind to an existing project with the template that already includes tailwind support. The template generates a markdown file with a command to build tailwind with a different location then you mentioned in your reproduction.

For the record, the current template provided by dx new also doesn't seem to be working. At least I was following the "tailwind CSS" option, but the commands in the generated markdown file do not seem to work.

What's rather confusing: The step-by-step guide in the docs seem to differ from what the current template generates. At least in the template code there is no manganis in Cargo.toml and no const _TAILWIND_URL: &str = ... somewhere in the code as the step-by-step guide suggests. Also for the record: I tried to apply these things on top of the template, but also without success. It would help to clarify what is more up-to-date here, the template or the docs?

EDIT: I can confirm that running dx serve from inside dist also seems to work for me. However:

I haven't checked how bundled versions work yet.

This doesn't work for me even when running from inside dist. In fact, I cannot get it to work at all for Desktop. Following up on it in https://github.com/DioxusLabs/dioxus/issues/3111.

[jkelleyrtp]

Should be fixed with the release of 0.6 - the new asset system is much more reliable and the resolver is also more reliable.

[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.

[arne-fuchs]

I'm having the same issue, is there any workaround?

Update: running from dist/ works

Thanks! Currently had a problem loading assets in 0.7.0-rc.0 in this fixed it