When using dioxus for GUI development, by default plain strings are used for CSS class, which is not ideal IMO, there is no compile time validation, and also the auto completion is only text based, and it's not easy to reuse class constants.
Class type been provided, which is just a wrapper struct around Vec<String>
, some basic From<>
and Add<>
implementation make it easier to be used.
constant!
macro for easier definition for css values, e.g.
constant!(table column group);
will be transformed to:
pub const table_column_group: &'static str = "table-column-group";
class!
macro provided for easier definition using string constants, e.g.
rsx! {
div {
class: class!(card_body text_center items_center hover(scale_105)),
div {
class: class!(card_title text_sm text_base_content),
"text"
}
}
}
Defined constants and modifiers for tailwindcss
Defined constants and modifiers for daisyui
Open web app in new tab
Search emoji by shortcode, built as demo project.
Build All Used CSS Classes
Since tailwindcss need to get all used values, when using class!
, the default build process is not working.
Check BUILD.md for how to handle this process.