Leptos UI

Macros to build UI components easily with Leptos and Tailwind CSS. Built on top of tw_merge.

Features

clx! macro for creating components with merged Tailwind classes
a! macro for creating anchor elements with merged Tailwind classes
div! macro for creating components without children
input! macro for creating input elements with merged Tailwind classes
transition! macro for creating components with "view-transition-name:*"

Example in Production

This crate is used in rust-ui.com — check it out to see Leptos UI and Tailwind CSS in action :)

Usage

Basic Component with `clx!`

// components/ui/card.rs
use leptos::prelude::*;
use leptos_ui::clx;

mod components {
    use super::*;
    clx! {Card, div, "rounded-lg p-4", "bg-sky-500"} // 🩵
}

pub use components::*;

// components/demos/demo_card.rs
#[component]
pub fn DemoCard() -> impl IntoView {
    view! {
        <Card>"Card bg-sky-500 🩵"</Card>
        <Card class="bg-orange-500">"Card bg-orange-500 🧡"</Card>
        // └──> 🤯 NO CONFLICT CLASS!!
    }
}

Basic component with `void!`

use leptos::prelude::*;
use leptos_ui::void;

// Define self-closing components
void! {MyImage, img, "rounded-lg border"}
void! {MyInput, input, "px-3 py-2 border rounded"}
void! {MyDiv, div, "w-full h-4 bg-gray-200"}

#[component]
pub fn Demo() -> impl IntoView {
    view! {
        // ...
        <MyImage attr:src="test.jpg" class="w-32" />
        <Input prop:value=move || url().to_string() attr:readonly=true class="flex-1" />
        <MyDiv class="bg-blue-500" />
    }
}

VSCode Tailwind CSS IntelliSense

Enable autocomplete and conflict detection for Tailwind classes inside clx! and void! macros:

Install the "Tailwind CSS IntelliSense" Visual Studio Code extension
Add the following to your settings.json:

{
  "tailwindCSS.includeLanguages": {
    "rust": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    ["clx!\\s*\\{[^,]*,\\s*[^,]*,\\s*\"([^\"]*)\""],
    ["void!\\s*\\{[^,]*,\\s*[^,]*,\\s*\"([^\"]*)\""],
    ["tw_merge!\\(([^)]*)\\)"]
  ]
}

This enables:

Tailwind class autocomplete in Rust files
Real-time conflict detection (e.g., w-full w-fit)
Hover documentation for Tailwind classes

Tailwind IntelliSense Conflict Detection

Changelog

September 2025 - leptos_ui v0.2 Breaking Changes

We refactored the leptos_ui crate with breaking changes.

New macro system:

clx!: Elements with children
void!: Self-closing elements (no children)

See MDN Docs for reference about void elements.

Attribute changes: Removed direct props from macros. Use attr:* and prop:* pattern instead:

// Define component
void! {MyInput, input, "border border-input"}

// Before
<MyInput value=move || url().to_string() readonly=true class="flex-1" />

// After
<MyInput prop:value=move || url().to_string() attr:readonly=true class="flex-1" />

License

This project is licensed under the MIT License. See the LICENSE file for details.

leptos_ui 0.2.11