# Leptos UI
Macros to build UI components easily with Leptos and Tailwind CSS. Built on top of [tw_merge](https://crates.io/crates/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](https://www.rust-ui.com) — check it out to see Leptos UI and Tailwind CSS in action :)
## Usage
### Basic Component with `clx!`
```rust
// 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!!
}
}
```
## Installation
Add this to your `Cargo.toml`:
```toml
[dependencies]
leptos_ui = "0.1"
```
P.S.: Don't forget to regularly run `cargo update` (frequent updates)!
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.