Closed kahnclusions closed 2 months ago
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 :)
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 = []
Problem
I've created a new project with
dx new
and selected styles with Tailwind, but it does not use the generatedtailwind.css
file. No tailwind styles are loaded. The Dioxus docs on Tailwind do not seem to match up with the project that's created bydx new
so I'm a little confused at how to make it work... for example, thedx new
project with Tailwind doesn't includemanganis
.I'm guessing this is because the line
style = ["tailwind.css"]
inDioxus.toml
only causes the style to be loaded from theassets/
directory but notpublic/
? If I instead runnpx 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 thetailwind.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
Fullstack
(orweb
)Tailwind
src/main.rs
and add some tailwind classes to one of the componentsnpx tailwindcss -i ./input.css -o ./public/tailwind.css --watch
public/tailwind.css
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:
Questionnaire