dioxus-class
Most dioxus samples are using plain strings for classes, e.g.
button
This is the common way in web development, it's very powerful, but not providing any checks, typos in the classes will be hard to notice.
How it Works
To support a certain CSS framework, Simple CSS values are defined as string constants, modifiers like hover:
are defined as functions, then you can write the previous example as following:
button
It looks very clean, and show the original values clearly, most importantly, the compiler will catch any typo now.
How to Create CSS framework
check dioxus-tailwindcss for more details.
Define class constant with macro
To create constants for your custom css, or creating a crate for existing frameworks, constants are created for compile time check.
Since css use -
as separator, macros are provided to generate rust const for them by replacing -
to _
These macros are accessable in dioxus_class::ext::*
;
constant!;
constant!;
Will be expanded to:
pub const btn_success: &'static str = "btn-success";
pub const btn_warning: &'static str = "btn-warning";
Define sets of constants
There are many similar value groups, which is not easy to define manually, simple macro rules can be created to make this easier.
// https://tailwindcss.com/docs/border-color
colors!;
colors!;
colors!;
colors!;
colors!;
colors!;
colors!;
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.