Install daisyUI for Dioxus

How to install Tailwind CSS and daisyUI in a Dioxus project

1. Create a new Dioxus project

Install Rust, WebAssembly Target and Dioxus CLI if you haven't already.

Create a new Dioxus project in the current directory

dx new ./

2. Install Tailwind CSS CLI and daisyUI

Initialize a new Node project.
And install Tailwind CSS CLI and daisyUI.

If you don't want to use Node.js, try Tailwind CSS and daisyUI standalone files instead.

npm init -y
npm install tailwindcss@latest @tailwindcss/cli@latest daisyui@latest

Create a new css file tailwind.css at root directory

@source "./src/**/*.{rs,html,css}";
@import "tailwindcss";
@plugin "daisyui";

3. Setup src/main.rs

Put a css file and a button to src/main.rs (and remove old code)

use dioxus::prelude::*;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    rsx! {
        document::Stylesheet {href: asset!("/assets/main.css")}
        button { class: "btn", "Hello daisyUI" }
    }
}

4. Run the dev server

Run the Tailwind CLI

npx @tailwindcss/cli -i ./tailwind.css -o ./assets/main.css --watch

In another terminal, run the Dioxus server

dx serve