README.md

Development

1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
2. Install the tailwind css cli: https://tailwindcss.com/docs/installation
3. Run the following command in the root of the project to start the tailwind CSS compiler:

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

Run the following command in the root of the project to start the Dioxus dev server:

dx serve --hot-reload true

• Open the browser to http://localhost:8080

Hot reloading with Tailwind CSS

Hot reloading Tailwind CSS will work with Tailwind CDN and Manganis using these settings.

1. Create a new project from the command line:

dx new -> web -> Project Name: project-name -> Tailwind -> true

You can change the platform, name, and router as needed.

No changes needed to the Dioxus.toml file.

2. Reinstall the CLI:

cargo install --git https://github.com/dioxuslabs/dioxus dioxus-cli --locked --force

dx --version
dioxus 0.6.0-alpha.2 (3c699aa)

3. Add dependencies to your Cargo.toml file:

[dependencies]
dioxus = { git = "https://github.com/DioxusLabs/dioxus", features = ["web", "router"] }
dioxus-logger = "0.5.1"

4. Start the Tailwind CSS compiler and the Dioxus dev server in different terminals:

npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch
dx serve --hot-reload true

5. Add the following support to main.rs inside rsx:

rsx!{
    script { src: asset!("https://cdn.tailwindcss.com") }
    head::Link { rel: "stylesheet", href: asset!("./assets/tailwind.css") }
}

Example component:

#[component]
fn App() -> Element {
    rsx! {
        // For Play CDN to try Tailwind
        script { src: asset!("https://cdn.tailwindcss.com") }
        // For Manganis
        head::Link { rel: "stylesheet", href: asset!("./assets/tailwind.css") }

        img { src: "header.svg", id: "header" }
        div { id: "links",
            div { class: "p-4 bg-yellow-300", "I" }
            p { "I" }
            div { class: "red p-2", "love" }
            div { class: "yellow", "Dioxus" }
            p { class: "red bg-slate-300", "team" }
        }
    }
}

If you need a local stylesheet for custom styles inside input.css.

1. Insert your custom styles inside input.css:

@layer components {
  p {
    @apply p-10 bg-yellow-600;
  }
  .red {
    @apply bg-red-600;
  }
  .yellow {
    @apply bg-yellow-600;
  }
  .blue {
    @apply bg-blue-600;
  }
}

2. Insert custom classes into the page:

rsx!{
    p { "I" }
    div { class: "red", "want to" }
    div { class: "yellow", "burger" }
    div { class: "blue", "burger" }
}

3. Rebuild the app:

button r on terminal

or

dx serve --hot-reload true