Using external tailwind

There is nothing you need to configure to use external tailwind. Just instead of class attribute, place your tailwind classes in tw attrobute. If you need to do some mangling of tailwind classes, wrap them in tw! macro.

    use vertigo::{dom, tw};

    let alert = tw!("border border-green-400 dark:text-gray-300");
    let warning = alert.clone() + tw!("border-red-400");
    let info = alert + tw!("border-green-400");

    dom! {
        <div tw="p-10 grid grid-cols-2 gap-4">
            <div tw={warning}>
                <h1>"Warning Message"</h1>
                <p>"You have a warning message"</p>
            </div>
            <div tw={info}>
                <h1>"Info Message"</h1>
                <p>"You have an info message"</p>
            </div>
        </div>
    }

Custom input css file

Place tailwind.css file in the same directory where you use vertigo::main macro (usually src ). Don't use tailwind classes in the same file as vertigo::main macro - those classes could be missing from the final tailwind build.