#tailwind #styling #css

tailwind-rs-yew

Tailwind CSS integration for Yew framework

22 releases (13 breaking)

0.16.0 Sep 26, 2025
0.14.0 Sep 26, 2025

#2586 in Web programming

Download history

1,094 downloads per month

MIT license

2MB
43K SLoC

Tailwind-rs Yew Integration

This crate provides seamless integration between Tailwind CSS and the Yew framework. It follows our TDD-first approach (ADR-001) and comprehensive testing pyramid strategy (ADR-002).

Features

  • Type-safe class generation - Compile-time validation of Tailwind classes
  • Component-based styling - Yew component integration with Tailwind
  • Performance optimized - Efficient class caching and tree-shaking
  • Framework integration - Native Yew component support

Quick Start

use yew::prelude::*;
use tailwind_rs_yew::{Button, ButtonProps, ButtonVariant};

#[function_component]
pub fn MyButton(props: &ButtonProps) -> Html {
    let classes = yew::classes! {
        "px-4", "py-2", "rounded-md", "font-medium", "transition-colors",
        match props.variant {
            ButtonVariant::Primary => "bg-blue-600",
            ButtonVariant::Secondary => "bg-gray-200",
            ButtonVariant::Danger => "bg-red-600",
            ButtonVariant::Outline => "border border-gray-300",
        },
    };
    
    html! {
        <button class={classes}>
            {props.children.clone()}
        </button>
    }
}

Dependencies

~19–30MB
~442K SLoC