Error in Conditional rendering using map

[abhi3700]

This is my repo.

I am getting error in rendering the button with expected color. The colors are given in array of tuples. The 2nd arg in tuple is color that is to color the buttons. But, it's not happening that way.
The rust code:

 
#[component]
fn .....  -> Element {

  rsx! {
       div { class: "flex gap-2 p-2",
            {
                [("Alice", "red"), ("Bob", "blue"), ("Charlie", "green")].iter().map(|&(name, color)| {
                    println!("color: {}", color);
                    rsx! { Workouts { name, color } }
                })
            }
        }
   }
}

#[derive(PartialEq, Props, Clone)]
struct Names {
    name: &'static str,
    color: &'static str,
}

#[component]
fn Workouts(Names { name, color }: Names) -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        button {
            // NOTE: class & style doesn't work together in terms of expected UI.
            // style: format!("background-color: {}", color),
            class: format!(
                "bg-{}-300 hover:bg-gray-400 py-1.5 px-5 rounded-md hover:text-gray-50",
                color,
            ),
            onclick: move |_| count += 1,
            "Workout by {name} for days: {count} "
        }
    }
}

Code: https://github.com/abhi3700/dioxus-playground/blob/5a1d6260396a5ee00504376fd9d7a1374c05149a/src/counter.rs#L43-L78

Here, all the 3 colors should be in red, blue, green respectively.

I am using dioxus version

❯ dx --version
dioxus 0.6.0-alpha.3 (09066dd)

Any idea what could be the potential cause?

[abhi3700]

I figured out the issue.

Tailwind CSS uses a static CSS generation process, meaning it cannot interpret dynamic class names generated at runtime.

As "bg-{}-300" is constructed dynamically, Tailwind doesn't recognize it, and thus the color is not applied.

To work around this limitation, we need to explicitly handle the colors by matching them and using the static class names like this:

let bg_class = match color {
        "red" => "bg-red-300",
        "blue" => "bg-blue-300",
        "green" => "bg-green-300",
        _ => "bg-gray-300", // Fallback color
    };

...

class: format!(
                "{} hover:bg-gray-400 py-1.5 px-5 rounded-md hover:text-gray-50",
                bg_class
            ),

Now, the UI shows as expected:

🎉

[abhi3700]

Use format_args! instead of format! as we don't need String allocation overhead.