Expand description

Helper macros for using the code generated by tailwindcss-to-rust.

The generated code provides a number of static structs where each field is a class name or modifier (like “lg” or “hover”). In typical use, you need to combine multiple names and modifiers into a single string to be set as an element’s class attribute. This crate provides two macros to make using this a bit more ergonomic.

A Dioxus example:

// Note that you have to write this css module to tie it all together.
use css::*;
use dioxus_prelude::*;

fn SomeComponent(cx: Scope) -> Element {
    cx.render(rsx! {
        div {
            // "grid-cols-3 md:grid-cols-6 lg:grid-cols-12"
            class: DC![
                M![M::md, C::fg::grid-cols-6],
                M![M::lg, C::fg::grid-cols-12]
            div {
                // "text-lg text-white"
                class: DC![C::typ::text_lg, C::typ::text_white],

It’s convenient to have a single module in your codebase that exports the macros along with the generated structs.

Let’s assume that module will live at src/css/mod.rs and that the code generated by tailwindcss-to-rust lives at src/css/generated.rs. The contents of mod.rs will look like this:

// This is the code generated by the tailwindcss-to-rust tool.
pub(crate) mod generated;

// You need to re-export the generated structs, the macros, and the
// `ToOptionVecstring` trait.
pub(crate) use generated::{C, M};
// If you're using Dioxus you'll also want to re-export the `DC` macro.
pub(crate) use tailwindcss_to_rust_macros::{ToOptionVecString, C, M};

See the examples directory in the git repo for all of the above example code.


pub use to_option_vec_string::ToOptionVecString;


Contains a trait to make the macros work with many types.


Takes one or more class names and returns a single space-separated string.
Variant of the C! macro for use with Dioxus class attributes.
Takes one or more tailwind modifier names and a class name, returning a single colon-separated string.


This is for use by the macros. Please don’t use it yourself.