- Rust 72%
- CSS 28%
e7cb1e86b0
manganis doesn't rewrite url() inside CSS files, so the
@font-face rules in main.css resolved to /fonts/* and 404'd
after bundling.
- register each woff2 via asset!() so dx hashes and serves
them under /assets/<file>-<hash>.woff2
- emit @font-face from a document::Style block via format!()
so the Asset Display gives the resolved hashed URL
- drop the now-stale @font-face block from main.css
- flatten assets/fonts/assets/fonts/* → assets/fonts/* (the
previous commit landed the woff2 files at the nested path)
|
||
|---|---|---|
| assets | ||
| src | ||
| .gitignore | ||
| AGENTS.md | ||
| Cargo.lock | ||
| Cargo.toml | ||
| clippy.toml | ||
| Dioxus.toml | ||
| README.md | ||
| tailwind.css | ||
Development
Your new jumpstart project includes basic organization with an organized assets folder and a components folder.
If you chose to develop with the router feature, you will also have a views folder.
project/
├─ assets/ # Any assets that are used by the app should be placed here
├─ src/
│ ├─ main.rs # The entrypoint for the app. It also defines the routes for the app.
│ ├─ components/
│ │ ├─ mod.rs # Defines the components module
│ │ ├─ hero.rs # The Hero component for use in the home page
│ ├─ views/ # The views each route will render in the app.
│ │ ├─ mod.rs # Defines the module for the views route and re-exports the components for each route
│ │ ├─ blog.rs # The component that will render at the /blog/:id route
│ │ ├─ home.rs # The component that will render at the / route
├─ Cargo.toml # The Cargo.toml file defines the dependencies and feature flags for your project
Automatic Tailwind (Dioxus 0.7+)
As of Dioxus 0.7, there no longer is a need to manually install tailwind. Simply dx serve and you're good to go!
Automatic tailwind is supported by checking for a file called tailwind.css in your app's manifest directory (next to Cargo.toml). To customize the file, use the dioxus.toml:
[application]
tailwind_input = "my.css"
tailwind_output = "assets/out.css"
Tailwind Manual Install
To use tailwind plugins or manually customize tailwind, you can can install the Tailwind CLI and use it directly.
- Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
- Install the Tailwind CSS CLI: https://tailwindcss.com/docs/installation/tailwind-cli
- Run the following command in the root of the project to start the Tailwind CSS compiler:
npx @tailwindcss/cli -i ./input.css -o ./assets/tailwind.css --watch
Serving Your App
Run the following command in the root of your project to start developing with the default platform:
dx serve
To run for a different platform, use the --platform platform flag. E.g.
dx serve --platform desktop