Dioxus fullstack/web with tailwind from "dx new" does not load stylesheet

[kahnclusions]

Problem

I've created a new project with dx new and selected styles with Tailwind, but it does not use the generated tailwind.css file. No tailwind styles are loaded. The Dioxus docs on Tailwind do not seem to match up with the project that's created by dx new so I'm a little confused at how to make it work... for example, the dx new project with Tailwind doesn't include manganis.

I'm guessing this is because the line style = ["tailwind.css"] in Dioxus.toml only causes the style to be loaded from the assets/ directory but not public/? If I instead run npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch then it does appear to be working.

I've tried adding a line like const _TAILWIND_URL: &str = manganis::mg!(file("public/tailwind.css")); but this only partially works... it only seems to load once but it doesn't pick up newer changes made to the tailwind.css file. It shows me an LSP error in my editor saying:Failed to add asset: No such file or directory (os error 2).

What are the steps to get a new project with dx new fully working with Tailwind?

Steps To Reproduce

Steps to reproduce the behavior:

• dx new
• select Fullstack (or web)
• select Tailwind
• edit src/main.rs and add some tailwind classes to one of the components
• start tailwind compilation with npx tailwindcss -i ./input.css -o ./public/tailwind.css --watch
• observe the tailwind classes you wrote are indeed appended at the end of public/tailwind.css
• start dx with dx serve --hot-reload

Expected behavior

The website to load with my styles applied.

Actual behaviour

No styles were applied. The file at http://localhost:8080/tailwind.css does not appear to be routable.

Environment:

• Dioxus version: 0.5.0
• Rust version: 1.77.1
• OS info: macOS
• App platform: fullstack, web

Questionnaire

• [x] I'm interested in fixing this myself but don't know where to start
• [ ] I would like to fix and I have a solution
• [ ] I don't have time to fix this right now, but maybe later

[frantisek-heca]

Yes, dealing with the same issue, while coming first time to Dioxus after the reddit 0.5 hype :)

I don't know about you, what instructions have you followed. But after dx new of fullstack I have just followed the README.md instructions saying to run npx tailwindcss -i ./input.css -o ./public/tailwind.css --watch

But the Dioxus.toml is configured with asset_dir = "assets"

I think the solution is in correcting the README.md to output to assets.

@kahnclusions I am curius, where did you found the npx tailwindcss -i ./input.css -o ./public/tailwind.css --watch line? Because if in README.md as me, we have found the probable only source of error :)

And this should be fixed asap, please. To not annoy newcomers :)

[umnovI]

From what I've noticed is that Dioxis creates a file with hash(?) at the end (example /tailwindcss4d9303ecf642b155.css), when detects a new file, but then fails to update it when there are any changes in the file it should watch. The file updates only if path has changed, for example, from "./public/tailwind.css" to "public/tailwind.css".

I've included a file with

const _TAILWIND_URL: &str = manganis::mg!(file("./public/tailwind.css"));

and that's the settings

[application]

# App (Project) Name
name = "testig-tailwind"

# Dioxus App Default Platform
# desktop, web
default_platform = "web"

# `build` & `serve` dist path
out_dir = "dist"

# resource (assets) file folder
asset_dir = "assets"

[web.app]

# HTML title tag content
title = "testig-tailwind"

[web.watcher]

# when watcher trigger, regenerate the `index.html`
reload_html = true

# which files or dirs will be watcher monitoring
watch_path = ["src", "assets", "./public/tailwind.css"]

index_on_404 = false

# include `assets` in web platform
[web.resource]

# Javascript code file
script = []

[web.resource.dev]

# Javascript code file
# serve: [dev-server] only
script = []