conditionally render tailwind

[brianmay]

Hello,

How can I conditionally add a tailwind class to an rsx element?

So far my attempts have resulted in tailiwind not seeing the conditional code and as a result not generating the required class.

I see solutions applicable for Javascript, not Rust.

Thanks

[ealmloff]

You can add multiple classes to the same element and dioxus will merge them together:

div {
    class: if true { "w-6" },
    class: if false { "bg-red" }
}

[brianmay]

I didn't know that. Thanks!

[socgnachilderic]

try to use classes crate.

use classes::classes;

div {
    class: classes!("w-6" => true, "bg-red" => false)
}

Or

div {
    class: if true { "w-6" } else { "bg-red"}
}

[brianmay]

Thanks for that. While it is good to know, sometimes using the classes crate is a better fit for the problem.

I found the following doesn't work. I get the error "Cannot merge non-fmt literals help: Only formatted strings can be merged together. If you want to merge literals, you can use a format string."

  let x = Some(10);
  rsx! {
        div {
            class: "text-2xl",
            class: if let Some(x) = x { if x == 10 { "text-success" } else { "text-error" } } else { "text-warning" },
        }
    };

What is wrong here? I suspect it is something to do with the nested if combined with the merge.

There are probably better ways to do this simple example without the nested if, and I think I would also try writing the condition outside the rsx! macro with the classes crate, but this is a simple example illustrate the error. Which I really wasn't expecting.

[Eptagone]

The way @ealmloff said works fine for simple conditions but for more complex logic it also throws me the error Only formatted strings can be merged together. So I created a utility function for that. Maybe it's not the best way but it works for me.

The function accepts a list of tuples where the first element is the class and the second element is a boolean that will determine whether the class will be included or not.

#[must_use]
pub(crate) fn class_list<'a, T>(list: T) -> String
where
    T: IntoIterator<Item = (&'a str, bool)>,
{
    list.into_iter()
        .filter(|(_, v)| *v)
        .map(|(s, _)| s)
        .collect::<Vec<&'a str>>()
        .join(" ")
}

You can use it like this:

rsx! {
  li {
    button {
      class: class_list([
          ("flex cursor-pointer *:m-auto", true),
          ("size-12", context.is_vertical()),
          ("text-neutral-400 hover:text-neutral-500", !is_active()),
          ("border-orange-500", is_active()),
          (
              match context.position {
                  TabsPosition::Top => "border-t-4",
                  TabsPosition::Bottom => "border-b-4",
                  TabsPosition::Left => "border-l-4",
                  TabsPosition::Right => "border-r-4",
              },
              is_active(),
          ),
      ]),
      onclick,
      r#type: "button",
      {children}
    }
  }
}

And if you are using the Tailwind CSS extension and want completitions, update the tailwindCSS.experimental.classRegex field in your .vscode/settings.json file with this and reload VS Code.

{
  "tailwindCSS.experimental.classRegex": [
    "class: \"(.*)\"",
    [
      "class_list\\(\\s*\\[([\\s\\S]*?)\\]\\s*\\)",
      "\"([^\"']*)\""
    ]
  ],
}