Use custom CSS class

[abhi3700]

I have been looking a way to add repetitive CSS classes into one class.

Following is my project dir:

.
├── Cargo.lock
├── Cargo.toml
├── Dioxus.toml
├── LICENSE
├── README.md
├── assets
│   ├── favicon.ico
│   ├── header.svg
│   ├── main.css
│   └── tailwind.css
├── input.css
├── public
│   └── tailwind.css
├── src
│   ├── contacts.rs
│   ├── home.rs
│   ├── main.rs
│   ├── payment.rs
│   ├── profile.rs
│   └── wallet.rs
└── tailwind.config.js

I added CSS classes into `public/tailwind.css`:

.payment-container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 400px;
    text-align: center;
}

.toggle-group {
    display: inline-flex;
    background-color: #dddddd; /* Light gray background */
    border-radius: 8px; /* Rounded corners */
    padding: 2px; /* Spacing inside the container */
    width: 100%;
    margin-bottom: 15px;
}

.toggle-btn {
    border: none;
    padding: 10px 20px; /* Adjust padding for spacing */
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #666; /* Light gray text */
    background-color: transparent; /* Inactive buttons have transparent background */
    width: 50%;
    height: 35px;
}

And the rust code:

#[component]
pub(crate) fn Payment(user_id: i32) -> Element {
    let mut chain_flag = use_signal(|| true);

    // add the payment page
    rsx! {
        div { class: "payment-container",
            header { class: "",
                h2 { "Payment" }
                p { "Choose your payment method and enter details." }
                div { class: "toggle-group",
                    button {
                        onclick: move |_| chain_flag.set(true),
                        class: if chain_flag() { "toggle-btn active" } else { "toggle-btn inactive" },
                        id: "onchain",
                        "Onchain"
                    }
                    button {
                        onclick: move |_| chain_flag.set(false),
                        class: if chain_flag() { "toggle-btn inactive" } else { "toggle-btn active" },
                        id: "internal",
                        "Internal"
                    }
                }
            }
        }
    }
}

But, on running the 2 terminals (one for tailwind compilation & the other fordx serve):

I couldn't get my CSS design reflected in the UI.

Current output:

Expected ouput:

I am not sure what I am missing 🤔.
Any help please?

[RustGrow]

Hot reload doesn't works with tailwind css with v 0.5. Try to use 0.6 with tailwind cdn
You can read readme from
https://github.com/[RustGrow/crabsburger](https://github.com/RustGrow/crabsburger)

[abhi3700]

Actually, I just copy-pasted the CSS code snippets as is into input.css without following CDN like syntax. Followed by $ npx ... tailwind compilation.
And it worked! 🎉 .