From 3023d3065e5e16bed67d8dbd64348bdefe73228a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 8 Feb 2026 02:22:46 +0000
Subject: [PATCH 1/6] Initial plan


From bb97c18ba7cb693b4e89fd2ff51a7f3f881aff62 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 8 Feb 2026 02:30:25 +0000
Subject: [PATCH 2/6] Add ironhtml-tailwind crate with type-safe Tailwind
 utilities

Co-authored-by: dannywillems <6018454+dannywillems@users.noreply.github.com>
---
 Cargo.toml                                    |   1 +
 crates/ironhtml-tailwind/Cargo.toml           |  16 +
 crates/ironhtml-tailwind/README.md            | 176 +++++++++
 .../examples/tailwind_demo.rs                 | 180 +++++++++
 crates/ironhtml-tailwind/src/backgrounds.rs   |  85 +++++
 crates/ironhtml-tailwind/src/borders.rs       | 208 +++++++++++
 crates/ironhtml-tailwind/src/effects.rs       | 117 ++++++
 crates/ironhtml-tailwind/src/flexbox.rs       |  98 +++++
 crates/ironhtml-tailwind/src/grid.rs          |  87 +++++
 crates/ironhtml-tailwind/src/layout.rs        | 139 +++++++
 crates/ironhtml-tailwind/src/lib.rs           | 344 ++++++++++++++++++
 crates/ironhtml-tailwind/src/sizing.rs        | 120 ++++++
 crates/ironhtml-tailwind/src/spacing.rs       | 197 ++++++++++
 crates/ironhtml-tailwind/src/typography.rs    | 224 ++++++++++++
 14 files changed, 1992 insertions(+)
 create mode 100644 crates/ironhtml-tailwind/Cargo.toml
 create mode 100644 crates/ironhtml-tailwind/README.md
 create mode 100644 crates/ironhtml-tailwind/examples/tailwind_demo.rs
 create mode 100644 crates/ironhtml-tailwind/src/backgrounds.rs
 create mode 100644 crates/ironhtml-tailwind/src/borders.rs
 create mode 100644 crates/ironhtml-tailwind/src/effects.rs
 create mode 100644 crates/ironhtml-tailwind/src/flexbox.rs
 create mode 100644 crates/ironhtml-tailwind/src/grid.rs
 create mode 100644 crates/ironhtml-tailwind/src/layout.rs
 create mode 100644 crates/ironhtml-tailwind/src/lib.rs
 create mode 100644 crates/ironhtml-tailwind/src/sizing.rs
 create mode 100644 crates/ironhtml-tailwind/src/spacing.rs
 create mode 100644 crates/ironhtml-tailwind/src/typography.rs

diff --git a/Cargo.toml b/Cargo.toml
index 555458b..d0a16ed 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -14,6 +14,7 @@ ironhtml-attributes = { path = "crates/ironhtml-attributes" }
 ironhtml = { path = "crates/ironhtml" }
 ironhtml-macro = { path = "crates/ironhtml-macro" }
 ironhtml-bootstrap = { path = "crates/ironhtml-bootstrap" }
+ironhtml-tailwind = { path = "crates/ironhtml-tailwind" }
 proc-macro2 = "1"
 quote = "1"
 syn = { version = "2", features = ["full", "parsing", "extra-traits"] }
diff --git a/crates/ironhtml-tailwind/Cargo.toml b/crates/ironhtml-tailwind/Cargo.toml
new file mode 100644
index 0000000..25106b4
--- /dev/null
+++ b/crates/ironhtml-tailwind/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "ironhtml-tailwind"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+description = "Type-safe Tailwind CSS utilities for ironhtml with compile-time conflict detection"
+keywords = ["html", "tailwind", "css", "type-safe"]
+categories = ["web-programming"]
+
+[lints]
+workspace = true
+
+[dependencies]
+ironhtml.workspace = true
+ironhtml-elements.workspace = true
diff --git a/crates/ironhtml-tailwind/README.md b/crates/ironhtml-tailwind/README.md
new file mode 100644
index 0000000..0173fc1
--- /dev/null
+++ b/crates/ironhtml-tailwind/README.md
@@ -0,0 +1,176 @@
+# ironhtml-tailwind
+
+Type-safe Tailwind CSS utilities for [ironhtml](https://github.com/LeakIX/ironhtml) with ergonomic API and full IDE support.
+
+## Features
+
+- **Type-safe**: All Tailwind utilities are strongly typed enums
+- **Ergonomic**: Fluent API that integrates seamlessly with ironhtml
+- **Responsive**: Built-in support for responsive breakpoints (sm, md, lg, xl, 2xl)
+- **State variants**: Support for hover, focus, active, and other pseudo-classes
+- **Arbitrary values**: Escape hatch for custom classes
+- **No runtime overhead**: All abstractions compile away
+- **no_std compatible**: Works in embedded and WASM environments
+
+## Quick Start
+
+Add to your `Cargo.toml`:
+
+```toml
+[dependencies]
+ironhtml = "1.0"
+ironhtml-tailwind = "1.0"
+```
+
+## Usage
+
+### Basic Example
+
+```rust
+use ironhtml::typed::Element;
+use ironhtml_elements::Div;
+use ironhtml_tailwind::*;
+
+let element = Element::<Div>::new()
+    .tw(Padding::X(4))       // px-4
+    .tw(TextAlign::Center)   // text-center
+    .tw(Display::Flex)       // flex
+    .tw(FontWeight::Bold);   // font-bold
+
+let html = element.render();
+// <div class="px-4 text-center flex font-bold"></div>
+```
+
+### Responsive Design
+
+```rust
+use ironhtml::typed::Element;
+use ironhtml_elements::Div;
+use ironhtml_tailwind::*;
+
+let element = Element::<Div>::new()
+    .tw(Padding::X(4))      // Mobile: px-4
+    .tw_md(Padding::X(8))   // Tablet: md:px-8
+    .tw_lg(Padding::X(12)); // Desktop: lg:px-12
+```
+
+### Interactive States
+
+```rust
+use ironhtml::typed::Element;
+use ironhtml_elements::Button;
+use ironhtml_tailwind::*;
+
+let button = Element::<Button>::new()
+    .tw(BackgroundColor::Blue(500))
+    .tw_hover(BackgroundColor::Blue(700))
+    .tw_active(BackgroundColor::Blue(800))
+    .text("Click me");
+```
+
+### Complete Component Example
+
+```rust
+use ironhtml::typed::Element;
+use ironhtml_elements::{Div, H3, P};
+use ironhtml_tailwind::*;
+
+fn card(title: &str, description: &str) -> Element<Div> {
+    Element::<Div>::new()
+        .tw(BackgroundColor::White)
+        .tw(Padding::All(6))
+        .tw(BorderRadius::Lg)
+        .tw(Shadow::Default)
+        .tw_hover(Shadow::Lg)
+        .child::<H3, _>(|h| {
+            h.tw(FontSize::Xl)
+                .tw(FontWeight::Bold)
+                .tw(Margin::B(2))
+                .text(title)
+        })
+        .child::<P, _>(|p| {
+            p.tw(TextColor::Gray(600))
+                .text(description)
+        })
+}
+```
+
+## Supported Utilities
+
+### Spacing
+- **Padding**: `Padding::X(4)`, `Padding::Y(2)`, `Padding::All(8)`, etc.
+- **Margin**: `Margin::X(4)`, `Margin::Auto(MarginAxis::X)`, etc.
+
+### Layout
+- **Display**: `Display::Flex`, `Display::Grid`, `Display::Block`, etc.
+- **Position**: `Position::Relative`, `Position::Absolute`, etc.
+- **Overflow**: `Overflow::Hidden`, `Overflow::Auto`, etc.
+
+### Typography
+- **Font Size**: `FontSize::Xl`, `FontSize::Base`, etc.
+- **Font Weight**: `FontWeight::Bold`, `FontWeight::Medium`, etc.
+- **Text Align**: `TextAlign::Center`, `TextAlign::Left`, etc.
+- **Text Color**: `TextColor::Blue(500)`, `TextColor::Gray(700)`, etc.
+
+### Flexbox
+- **Flex Direction**: `FlexDirection::Row`, `FlexDirection::Col`, etc.
+- **Justify Content**: `JustifyContent::Center`, `JustifyContent::Between`, etc.
+- **Align Items**: `AlignItems::Center`, `AlignItems::Start`, etc.
+
+### Grid
+- **Grid Columns**: `GridCols::Cols(3)`, `GridCols::Cols(12)`, etc.
+- **Grid Rows**: `GridRows::Rows(2)`, etc.
+- **Gap**: `Gap::All(4)`, `Gap::X(2)`, `Gap::Y(8)`, etc.
+
+### Sizing
+- **Width**: `Width::Full`, `Width::Scaled(64)`, `Width::Fraction { numerator: 1, denominator: 2 }`
+- **Height**: `Height::Full`, `Height::Screen`, etc.
+
+### Borders
+- **Border Width**: `BorderWidth::Default`, `BorderWidth::Width2`, etc.
+- **Border Color**: `BorderColor::Gray(300)`, `BorderColor::Blue(500)`, etc.
+- **Border Radius**: `BorderRadius::Lg`, `BorderRadius::Full`, etc.
+
+### Backgrounds
+- **Background Color**: `BackgroundColor::Blue(500)`, `BackgroundColor::White`, etc.
+
+### Effects
+- **Shadow**: `Shadow::Md`, `Shadow::Lg`, `Shadow::Xl`, etc.
+- **Opacity**: `Opacity::O50`, `Opacity::O75`, etc.
+
+## Responsive Breakpoints
+
+- `tw_sm()` - Small devices (≥ 640px)
+- `tw_md()` - Medium devices (≥ 768px)
+- `tw_lg()` - Large devices (≥ 1024px)
+- `tw_xl()` - Extra large devices (≥ 1280px)
+- `tw_2xl()` - 2X large devices (≥ 1536px)
+
+## State Variants
+
+- `tw_hover()` - Hover state
+- `tw_focus()` - Focus state
+- `tw_active()` - Active state
+- `tw_disabled()` - Disabled state
+
+## Escape Hatch
+
+For custom or arbitrary classes not covered by the type-safe API:
+
+```rust
+element.tw_raw("custom-utility-class")
+```
+
+## Examples
+
+Run the included example:
+
+```bash
+cargo run --example tailwind_demo
+```
+
+This generates a complete HTML page demonstrating various Tailwind utilities.
+
+## License
+
+MIT
diff --git a/crates/ironhtml-tailwind/examples/tailwind_demo.rs b/crates/ironhtml-tailwind/examples/tailwind_demo.rs
new file mode 100644
index 0000000..524c6f3
--- /dev/null
+++ b/crates/ironhtml-tailwind/examples/tailwind_demo.rs
@@ -0,0 +1,180 @@
+//! Example demonstrating type-safe Tailwind CSS usage with ironhtml
+//!
+//! Run with: cargo run --example tailwind_demo
+
+use ironhtml::typed::{Document, Element};
+use ironhtml_elements::*;
+use ironhtml_tailwind::*;
+
+fn main() {
+    let page = Document::new()
+        .doctype()
+        .root::<Html, _>(|html| {
+            html.attr("lang", "en")
+                .child::<Head, _>(|head| {
+                    head.child::<Meta, _>(|m| m.attr("charset", "UTF-8"))
+                        .child::<Meta, _>(|m| {
+                            m.attr("name", "viewport")
+                                .attr("content", "width=device-width, initial-scale=1.0")
+                        })
+                        .child::<Title, _>(|t| t.text("Tailwind CSS Demo"))
+                        .child::<Script, _>(|s| {
+                            s.attr("src", "https://cdn.tailwindcss.com")
+                        })
+                })
+                .child::<Body, _>(|body| {
+                    body.tw(BackgroundColor::Gray(50))
+                        .tw(Padding::All(8))
+                        .child::<Div, _>(|_| container())
+                })
+        })
+        .build();
+
+    println!("{}", page);
+}
+
+/// Main container with card layout
+fn container() -> Element<Div> {
+    Element::<Div>::new()
+        .tw(Width::Full)
+        .tw(Display::Flex)
+        .tw(FlexDirection::Col)
+        .tw(Gap::All(8))
+        .child::<H1, _>(|h| {
+            h.tw(FontSize::Xl4)
+                .tw(FontWeight::Bold)
+                .tw(TextColor::Gray(900))
+                .tw(Margin::B(8))
+                .text("Tailwind CSS with ironhtml")
+        })
+        .child::<Div, _>(|_| hero_card())
+        .child::<Div, _>(|_| {
+            Element::<Div>::new()
+                .tw(Display::Grid)
+                .tw(GridCols::Cols(3))
+                .tw(Gap::All(6))
+                .tw_md(GridCols::Cols(1))
+                .child::<Div, _>(|_| feature_card("Fast", "Blazing fast type-safe HTML", "blue"))
+                .child::<Div, _>(|_| feature_card("Safe", "Compile-time Tailwind validation", "green"))
+                .child::<Div, _>(|_| feature_card("Easy", "Ergonomic API with full IDE support", "purple"))
+        })
+        .child::<Div, _>(|_| button_showcase())
+}
+
+/// Hero card component
+fn hero_card() -> Element<Div> {
+    Element::<Div>::new()
+        .tw(BackgroundColor::Blue(500))
+        .tw(TextColor::White)
+        .tw(Padding::All(8))
+        .tw(BorderRadius::Lg)
+        .tw(Shadow::Xl)
+        .child::<H2, _>(|h| {
+            h.tw(FontSize::Xl3)
+                .tw(FontWeight::Bold)
+                .tw(Margin::B(4))
+                .text("Type-Safe Tailwind CSS")
+        })
+        .child::<P, _>(|p| {
+            p.tw(FontSize::Lg)
+                .tw(Margin::B(6))
+                .text("Build beautiful UIs with Rust's type system ensuring your Tailwind classes are always valid.")
+        })
+        .child::<Div, _>(|d| {
+            d.tw(Display::Flex)
+                .tw(Gap::All(4))
+                .child::<Button, _>(|_| {
+                    Element::<Button>::new()
+                        .tw(BackgroundColor::White)
+                        .tw(TextColor::Blue(600))
+                        .tw(FontWeight::SemiBold)
+                        .tw(Padding::X(6))
+                        .tw(Padding::Y(3))
+                        .tw(BorderRadius::Md)
+                        .tw_hover(BackgroundColor::Gray(100))
+                        .text("Get Started")
+                })
+                .child::<Button, _>(|_| {
+                    Element::<Button>::new()
+                        .tw(BorderWidth::Width2)
+                        .tw(BorderColor::White)
+                        .tw(TextColor::White)
+                        .tw(FontWeight::SemiBold)
+                        .tw(Padding::X(6))
+                        .tw(Padding::Y(3))
+                        .tw(BorderRadius::Md)
+                        .tw_hover(BackgroundColor::Blue(600))
+                        .text("Learn More")
+                })
+        })
+}
+
+/// Feature card component
+fn feature_card(title: &str, description: &str, color: &str) -> Element<Div> {
+    let (bg_color, text_color, border_color) = match color {
+        "blue" => (BackgroundColor::Blue(50), TextColor::Blue(700), BorderColor::Blue(200)),
+        "green" => (BackgroundColor::Green(50), TextColor::Green(700), BorderColor::Green(200)),
+        "purple" => (BackgroundColor::Purple(50), TextColor::Purple(700), BorderColor::Purple(200)),
+        _ => (BackgroundColor::Gray(50), TextColor::Gray(700), BorderColor::Gray(200)),
+    };
+
+    Element::<Div>::new()
+        .tw(bg_color)
+        .tw(Padding::All(6))
+        .tw(BorderRadius::Lg)
+        .tw(BorderWidth::Default)
+        .tw(border_color)
+        .tw_hover(Shadow::Md)
+        .child::<H3, _>(|h| {
+            h.tw(text_color)
+                .tw(FontSize::Xl)
+                .tw(FontWeight::Bold)
+                .tw(Margin::B(2))
+                .text(title)
+        })
+        .child::<P, _>(|p| {
+            p.tw(TextColor::Gray(600))
+                .text(description)
+        })
+}
+
+/// Button showcase
+fn button_showcase() -> Element<Div> {
+    Element::<Div>::new()
+        .tw(BackgroundColor::White)
+        .tw(Padding::All(8))
+        .tw(BorderRadius::Lg)
+        .tw(Shadow::Default)
+        .child::<H2, _>(|h| {
+            h.tw(FontSize::Xl2)
+                .tw(FontWeight::Bold)
+                .tw(Margin::B(6))
+                .text("Button Variants")
+        })
+        .child::<Div, _>(|d| {
+            d.tw(Display::Flex)
+                .tw(Gap::All(4))
+                .tw(FlexDirection::Row)
+                .tw_md(FlexDirection::Col)
+                .child::<Button, _>(|_| styled_button("Primary", BackgroundColor::Blue(600), BackgroundColor::Blue(700)))
+                .child::<Button, _>(|_| styled_button("Success", BackgroundColor::Green(600), BackgroundColor::Green(700)))
+                .child::<Button, _>(|_| styled_button("Danger", BackgroundColor::Red(600), BackgroundColor::Red(700)))
+                .child::<Button, _>(|_| styled_button("Warning", BackgroundColor::Yellow(500), BackgroundColor::Yellow(600)))
+        })
+}
+
+/// Styled button helper
+fn styled_button(text: &str, bg: BackgroundColor, hover_bg: BackgroundColor) -> Element<Button> {
+    Element::<Button>::new()
+        .tw(bg)
+        .tw(TextColor::White)
+        .tw(FontWeight::Medium)
+        .tw(Padding::X(6))
+        .tw(Padding::Y(3))
+        .tw(BorderRadius::Md)
+        .tw(Shadow::Sm)
+        .tw_hover(hover_bg)
+        .tw_hover(Shadow::Md)
+        .tw_active(Shadow::Default)
+        .text(text)
+}
diff --git a/crates/ironhtml-tailwind/src/backgrounds.rs b/crates/ironhtml-tailwind/src/backgrounds.rs
new file mode 100644
index 0000000..fa64c05
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/backgrounds.rs
@@ -0,0 +1,85 @@
+//! Background utilities
+
+use alloc::format;
+use alloc::string::String;
+use crate::TailwindClass;
+
+/// Background color utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum BackgroundColor {
+    Slate(u16),
+    Gray(u16),
+    Zinc(u16),
+    Neutral(u16),
+    Stone(u16),
+    Red(u16),
+    Orange(u16),
+    Amber(u16),
+    Yellow(u16),
+    Lime(u16),
+    Green(u16),
+    Emerald(u16),
+    Teal(u16),
+    Cyan(u16),
+    Sky(u16),
+    Blue(u16),
+    Indigo(u16),
+    Violet(u16),
+    Purple(u16),
+    Fuchsia(u16),
+    Pink(u16),
+    Rose(u16),
+    Black,
+    White,
+    Transparent,
+    Current,
+    Inherit,
+}
+
+impl TailwindClass for BackgroundColor {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Slate(n) => format!("bg-slate-{n}"),
+            Self::Gray(n) => format!("bg-gray-{n}"),
+            Self::Zinc(n) => format!("bg-zinc-{n}"),
+            Self::Neutral(n) => format!("bg-neutral-{n}"),
+            Self::Stone(n) => format!("bg-stone-{n}"),
+            Self::Red(n) => format!("bg-red-{n}"),
+            Self::Orange(n) => format!("bg-orange-{n}"),
+            Self::Amber(n) => format!("bg-amber-{n}"),
+            Self::Yellow(n) => format!("bg-yellow-{n}"),
+            Self::Lime(n) => format!("bg-lime-{n}"),
+            Self::Green(n) => format!("bg-green-{n}"),
+            Self::Emerald(n) => format!("bg-emerald-{n}"),
+            Self::Teal(n) => format!("bg-teal-{n}"),
+            Self::Cyan(n) => format!("bg-cyan-{n}"),
+            Self::Sky(n) => format!("bg-sky-{n}"),
+            Self::Blue(n) => format!("bg-blue-{n}"),
+            Self::Indigo(n) => format!("bg-indigo-{n}"),
+            Self::Violet(n) => format!("bg-violet-{n}"),
+            Self::Purple(n) => format!("bg-purple-{n}"),
+            Self::Fuchsia(n) => format!("bg-fuchsia-{n}"),
+            Self::Pink(n) => format!("bg-pink-{n}"),
+            Self::Rose(n) => format!("bg-rose-{n}"),
+            Self::Black => "bg-black".into(),
+            Self::White => "bg-white".into(),
+            Self::Transparent => "bg-transparent".into(),
+            Self::Current => "bg-current".into(),
+            Self::Inherit => "bg-inherit".into(),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_background_color() {
+        assert_eq!(BackgroundColor::Blue(500).to_class(), "bg-blue-500");
+        assert_eq!(BackgroundColor::Gray(100).to_class(), "bg-gray-100");
+        assert_eq!(BackgroundColor::Red(600).to_class(), "bg-red-600");
+        assert_eq!(BackgroundColor::Transparent.to_class(), "bg-transparent");
+        assert_eq!(BackgroundColor::White.to_class(), "bg-white");
+    }
+}
diff --git a/crates/ironhtml-tailwind/src/borders.rs b/crates/ironhtml-tailwind/src/borders.rs
new file mode 100644
index 0000000..1c68fe1
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/borders.rs
@@ -0,0 +1,208 @@
+//! Border utilities
+
+use alloc::format;
+use alloc::string::String;
+use crate::TailwindClass;
+
+/// Border width utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum BorderWidth {
+    /// border (1px)
+    Default,
+    /// border-0
+    None,
+    /// border-2
+    Width2,
+    /// border-4
+    Width4,
+    /// border-8
+    Width8,
+    /// border-x-{n}
+    X(u8),
+    /// border-y-{n}
+    Y(u8),
+    /// border-t-{n}
+    T(u8),
+    /// border-b-{n}
+    B(u8),
+    /// border-l-{n}
+    L(u8),
+    /// border-r-{n}
+    R(u8),
+}
+
+impl TailwindClass for BorderWidth {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Default => "border".into(),
+            Self::None => "border-0".into(),
+            Self::Width2 => "border-2".into(),
+            Self::Width4 => "border-4".into(),
+            Self::Width8 => "border-8".into(),
+            Self::X(n) if *n == 0 => "border-x-0".into(),
+            Self::X(n) if *n == 2 => "border-x-2".into(),
+            Self::X(n) if *n == 4 => "border-x-4".into(),
+            Self::X(n) if *n == 8 => "border-x-8".into(),
+            Self::X(_) => "border-x".into(),
+            Self::Y(n) if *n == 0 => "border-y-0".into(),
+            Self::Y(n) if *n == 2 => "border-y-2".into(),
+            Self::Y(n) if *n == 4 => "border-y-4".into(),
+            Self::Y(n) if *n == 8 => "border-y-8".into(),
+            Self::Y(_) => "border-y".into(),
+            Self::T(n) if *n == 0 => "border-t-0".into(),
+            Self::T(n) if *n == 2 => "border-t-2".into(),
+            Self::T(n) if *n == 4 => "border-t-4".into(),
+            Self::T(n) if *n == 8 => "border-t-8".into(),
+            Self::T(_) => "border-t".into(),
+            Self::B(n) if *n == 0 => "border-b-0".into(),
+            Self::B(n) if *n == 2 => "border-b-2".into(),
+            Self::B(n) if *n == 4 => "border-b-4".into(),
+            Self::B(n) if *n == 8 => "border-b-8".into(),
+            Self::B(_) => "border-b".into(),
+            Self::L(n) if *n == 0 => "border-l-0".into(),
+            Self::L(n) if *n == 2 => "border-l-2".into(),
+            Self::L(n) if *n == 4 => "border-l-4".into(),
+            Self::L(n) if *n == 8 => "border-l-8".into(),
+            Self::L(_) => "border-l".into(),
+            Self::R(n) if *n == 0 => "border-r-0".into(),
+            Self::R(n) if *n == 2 => "border-r-2".into(),
+            Self::R(n) if *n == 4 => "border-r-4".into(),
+            Self::R(n) if *n == 8 => "border-r-8".into(),
+            Self::R(_) => "border-r".into(),
+        }
+    }
+}
+
+/// Border color utilities (same as text colors)
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum BorderColor {
+    Slate(u16),
+    Gray(u16),
+    Zinc(u16),
+    Neutral(u16),
+    Stone(u16),
+    Red(u16),
+    Orange(u16),
+    Amber(u16),
+    Yellow(u16),
+    Lime(u16),
+    Green(u16),
+    Emerald(u16),
+    Teal(u16),
+    Cyan(u16),
+    Sky(u16),
+    Blue(u16),
+    Indigo(u16),
+    Violet(u16),
+    Purple(u16),
+    Fuchsia(u16),
+    Pink(u16),
+    Rose(u16),
+    Black,
+    White,
+    Transparent,
+    Current,
+    Inherit,
+}
+
+impl TailwindClass for BorderColor {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Slate(n) => format!("border-slate-{n}"),
+            Self::Gray(n) => format!("border-gray-{n}"),
+            Self::Zinc(n) => format!("border-zinc-{n}"),
+            Self::Neutral(n) => format!("border-neutral-{n}"),
+            Self::Stone(n) => format!("border-stone-{n}"),
+            Self::Red(n) => format!("border-red-{n}"),
+            Self::Orange(n) => format!("border-orange-{n}"),
+            Self::Amber(n) => format!("border-amber-{n}"),
+            Self::Yellow(n) => format!("border-yellow-{n}"),
+            Self::Lime(n) => format!("border-lime-{n}"),
+            Self::Green(n) => format!("border-green-{n}"),
+            Self::Emerald(n) => format!("border-emerald-{n}"),
+            Self::Teal(n) => format!("border-teal-{n}"),
+            Self::Cyan(n) => format!("border-cyan-{n}"),
+            Self::Sky(n) => format!("border-sky-{n}"),
+            Self::Blue(n) => format!("border-blue-{n}"),
+            Self::Indigo(n) => format!("border-indigo-{n}"),
+            Self::Violet(n) => format!("border-violet-{n}"),
+            Self::Purple(n) => format!("border-purple-{n}"),
+            Self::Fuchsia(n) => format!("border-fuchsia-{n}"),
+            Self::Pink(n) => format!("border-pink-{n}"),
+            Self::Rose(n) => format!("border-rose-{n}"),
+            Self::Black => "border-black".into(),
+            Self::White => "border-white".into(),
+            Self::Transparent => "border-transparent".into(),
+            Self::Current => "border-current".into(),
+            Self::Inherit => "border-inherit".into(),
+        }
+    }
+}
+
+/// Border radius utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum BorderRadius {
+    /// rounded-none
+    None,
+    /// rounded-sm
+    Sm,
+    /// rounded
+    Default,
+    /// rounded-md
+    Md,
+    /// rounded-lg
+    Lg,
+    /// rounded-xl
+    Xl,
+    /// rounded-2xl
+    Xl2,
+    /// rounded-3xl
+    Xl3,
+    /// rounded-full
+    Full,
+}
+
+impl TailwindClass for BorderRadius {
+    fn to_class(&self) -> String {
+        match self {
+            Self::None => "rounded-none".into(),
+            Self::Sm => "rounded-sm".into(),
+            Self::Default => "rounded".into(),
+            Self::Md => "rounded-md".into(),
+            Self::Lg => "rounded-lg".into(),
+            Self::Xl => "rounded-xl".into(),
+            Self::Xl2 => "rounded-2xl".into(),
+            Self::Xl3 => "rounded-3xl".into(),
+            Self::Full => "rounded-full".into(),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_border_width() {
+        assert_eq!(BorderWidth::Default.to_class(), "border");
+        assert_eq!(BorderWidth::None.to_class(), "border-0");
+        assert_eq!(BorderWidth::Width2.to_class(), "border-2");
+        assert_eq!(BorderWidth::X(2).to_class(), "border-x-2");
+        assert_eq!(BorderWidth::Y(4).to_class(), "border-y-4");
+    }
+
+    #[test]
+    fn test_border_color() {
+        assert_eq!(BorderColor::Blue(500).to_class(), "border-blue-500");
+        assert_eq!(BorderColor::Gray(200).to_class(), "border-gray-200");
+        assert_eq!(BorderColor::Transparent.to_class(), "border-transparent");
+    }
+
+    #[test]
+    fn test_border_radius() {
+        assert_eq!(BorderRadius::None.to_class(), "rounded-none");
+        assert_eq!(BorderRadius::Default.to_class(), "rounded");
+        assert_eq!(BorderRadius::Lg.to_class(), "rounded-lg");
+        assert_eq!(BorderRadius::Full.to_class(), "rounded-full");
+    }
+}
diff --git a/crates/ironhtml-tailwind/src/effects.rs b/crates/ironhtml-tailwind/src/effects.rs
new file mode 100644
index 0000000..2851d91
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/effects.rs
@@ -0,0 +1,117 @@
+//! Effects utilities: shadows and opacity
+
+use alloc::string::String;
+use crate::TailwindClass;
+
+/// Shadow utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Shadow {
+    /// shadow-sm
+    Sm,
+    /// shadow (default)
+    Default,
+    /// shadow-md
+    Md,
+    /// shadow-lg
+    Lg,
+    /// shadow-xl
+    Xl,
+    /// shadow-2xl
+    Xl2,
+    /// shadow-inner
+    Inner,
+    /// shadow-none
+    None,
+}
+
+impl TailwindClass for Shadow {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Sm => "shadow-sm".into(),
+            Self::Default => "shadow".into(),
+            Self::Md => "shadow-md".into(),
+            Self::Lg => "shadow-lg".into(),
+            Self::Xl => "shadow-xl".into(),
+            Self::Xl2 => "shadow-2xl".into(),
+            Self::Inner => "shadow-inner".into(),
+            Self::None => "shadow-none".into(),
+        }
+    }
+}
+
+/// Opacity utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Opacity {
+    /// opacity-0
+    O0,
+    /// opacity-5
+    O5,
+    /// opacity-10
+    O10,
+    /// opacity-20
+    O20,
+    /// opacity-25
+    O25,
+    /// opacity-30
+    O30,
+    /// opacity-40
+    O40,
+    /// opacity-50
+    O50,
+    /// opacity-60
+    O60,
+    /// opacity-70
+    O70,
+    /// opacity-75
+    O75,
+    /// opacity-80
+    O80,
+    /// opacity-90
+    O90,
+    /// opacity-95
+    O95,
+    /// opacity-100
+    O100,
+}
+
+impl TailwindClass for Opacity {
+    fn to_class(&self) -> String {
+        match self {
+            Self::O0 => "opacity-0".into(),
+            Self::O5 => "opacity-5".into(),
+            Self::O10 => "opacity-10".into(),
+            Self::O20 => "opacity-20".into(),
+            Self::O25 => "opacity-25".into(),
+            Self::O30 => "opacity-30".into(),
+            Self::O40 => "opacity-40".into(),
+            Self::O50 => "opacity-50".into(),
+            Self::O60 => "opacity-60".into(),
+            Self::O70 => "opacity-70".into(),
+            Self::O75 => "opacity-75".into(),
+            Self::O80 => "opacity-80".into(),
+            Self::O90 => "opacity-90".into(),
+            Self::O95 => "opacity-95".into(),
+            Self::O100 => "opacity-100".into(),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_shadow() {
+        assert_eq!(Shadow::Sm.to_class(), "shadow-sm");
+        assert_eq!(Shadow::Default.to_class(), "shadow");
+        assert_eq!(Shadow::Lg.to_class(), "shadow-lg");
+        assert_eq!(Shadow::None.to_class(), "shadow-none");
+    }
+
+    #[test]
+    fn test_opacity() {
+        assert_eq!(Opacity::O0.to_class(), "opacity-0");
+        assert_eq!(Opacity::O50.to_class(), "opacity-50");
+        assert_eq!(Opacity::O100.to_class(), "opacity-100");
+    }
+}
diff --git a/crates/ironhtml-tailwind/src/flexbox.rs b/crates/ironhtml-tailwind/src/flexbox.rs
new file mode 100644
index 0000000..ba4561f
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/flexbox.rs
@@ -0,0 +1,98 @@
+//! Flexbox utilities
+
+use alloc::string::String;
+use crate::TailwindClass;
+
+/// Flex direction utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum FlexDirection {
+    Row,
+    RowReverse,
+    Col,
+    ColReverse,
+}
+
+impl TailwindClass for FlexDirection {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Row => "flex-row".into(),
+            Self::RowReverse => "flex-row-reverse".into(),
+            Self::Col => "flex-col".into(),
+            Self::ColReverse => "flex-col-reverse".into(),
+        }
+    }
+}
+
+/// Justify content utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum JustifyContent {
+    Start,
+    End,
+    Center,
+    Between,
+    Around,
+    Evenly,
+    Stretch,
+}
+
+impl TailwindClass for JustifyContent {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Start => "justify-start".into(),
+            Self::End => "justify-end".into(),
+            Self::Center => "justify-center".into(),
+            Self::Between => "justify-between".into(),
+            Self::Around => "justify-around".into(),
+            Self::Evenly => "justify-evenly".into(),
+            Self::Stretch => "justify-stretch".into(),
+        }
+    }
+}
+
+/// Align items utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum AlignItems {
+    Start,
+    End,
+    Center,
+    Baseline,
+    Stretch,
+}
+
+impl TailwindClass for AlignItems {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Start => "items-start".into(),
+            Self::End => "items-end".into(),
+            Self::Center => "items-center".into(),
+            Self::Baseline => "items-baseline".into(),
+            Self::Stretch => "items-stretch".into(),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_flex_direction() {
+        assert_eq!(FlexDirection::Row.to_class(), "flex-row");
+        assert_eq!(FlexDirection::Col.to_class(), "flex-col");
+        assert_eq!(FlexDirection::RowReverse.to_class(), "flex-row-reverse");
+    }
+
+    #[test]
+    fn test_justify_content() {
+        assert_eq!(JustifyContent::Start.to_class(), "justify-start");
+        assert_eq!(JustifyContent::Center.to_class(), "justify-center");
+        assert_eq!(JustifyContent::Between.to_class(), "justify-between");
+    }
+
+    #[test]
+    fn test_align_items() {
+        assert_eq!(AlignItems::Start.to_class(), "items-start");
+        assert_eq!(AlignItems::Center.to_class(), "items-center");
+        assert_eq!(AlignItems::Stretch.to_class(), "items-stretch");
+    }
+}
diff --git a/crates/ironhtml-tailwind/src/grid.rs b/crates/ironhtml-tailwind/src/grid.rs
new file mode 100644
index 0000000..96055a3
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/grid.rs
@@ -0,0 +1,87 @@
+//! Grid utilities
+
+use alloc::format;
+use alloc::string::String;
+use crate::TailwindClass;
+
+/// Grid columns utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum GridCols {
+    /// grid-cols-{n}
+    Cols(u8),
+    /// grid-cols-none
+    None,
+}
+
+impl TailwindClass for GridCols {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Cols(n) => format!("grid-cols-{n}"),
+            Self::None => "grid-cols-none".into(),
+        }
+    }
+}
+
+/// Grid rows utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum GridRows {
+    /// grid-rows-{n}
+    Rows(u8),
+    /// grid-rows-none
+    None,
+}
+
+impl TailwindClass for GridRows {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Rows(n) => format!("grid-rows-{n}"),
+            Self::None => "grid-rows-none".into(),
+        }
+    }
+}
+
+/// Gap utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Gap {
+    /// gap-{n}
+    All(u8),
+    /// gap-x-{n}
+    X(u8),
+    /// gap-y-{n}
+    Y(u8),
+}
+
+impl TailwindClass for Gap {
+    fn to_class(&self) -> String {
+        match self {
+            Self::All(n) => format!("gap-{n}"),
+            Self::X(n) => format!("gap-x-{n}"),
+            Self::Y(n) => format!("gap-y-{n}"),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_grid_cols() {
+        assert_eq!(GridCols::Cols(3).to_class(), "grid-cols-3");
+        assert_eq!(GridCols::Cols(12).to_class(), "grid-cols-12");
+        assert_eq!(GridCols::None.to_class(), "grid-cols-none");
+    }
+
+    #[test]
+    fn test_grid_rows() {
+        assert_eq!(GridRows::Rows(2).to_class(), "grid-rows-2");
+        assert_eq!(GridRows::None.to_class(), "grid-rows-none");
+    }
+
+    #[test]
+    fn test_gap() {
+        assert_eq!(Gap::All(4).to_class(), "gap-4");
+        assert_eq!(Gap::X(2).to_class(), "gap-x-2");
+        assert_eq!(Gap::Y(8).to_class(), "gap-y-8");
+    }
+}
diff --git a/crates/ironhtml-tailwind/src/layout.rs b/crates/ironhtml-tailwind/src/layout.rs
new file mode 100644
index 0000000..e4826d3
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/layout.rs
@@ -0,0 +1,139 @@
+//! Layout utilities: display, position, overflow
+
+use alloc::string::String;
+use crate::TailwindClass;
+
+/// Display utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Display {
+    Block,
+    InlineBlock,
+    Inline,
+    Flex,
+    InlineFlex,
+    Grid,
+    InlineGrid,
+    Table,
+    TableRow,
+    TableCell,
+    Hidden,
+    Contents,
+    FlowRoot,
+}
+
+impl TailwindClass for Display {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Block => "block".into(),
+            Self::InlineBlock => "inline-block".into(),
+            Self::Inline => "inline".into(),
+            Self::Flex => "flex".into(),
+            Self::InlineFlex => "inline-flex".into(),
+            Self::Grid => "grid".into(),
+            Self::InlineGrid => "inline-grid".into(),
+            Self::Table => "table".into(),
+            Self::TableRow => "table-row".into(),
+            Self::TableCell => "table-cell".into(),
+            Self::Hidden => "hidden".into(),
+            Self::Contents => "contents".into(),
+            Self::FlowRoot => "flow-root".into(),
+        }
+    }
+}
+
+/// Position utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Position {
+    Static,
+    Fixed,
+    Absolute,
+    Relative,
+    Sticky,
+}
+
+impl TailwindClass for Position {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Static => "static".into(),
+            Self::Fixed => "fixed".into(),
+            Self::Absolute => "absolute".into(),
+            Self::Relative => "relative".into(),
+            Self::Sticky => "sticky".into(),
+        }
+    }
+}
+
+/// Overflow utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Overflow {
+    Auto,
+    Hidden,
+    Clip,
+    Visible,
+    Scroll,
+    /// X-axis specific
+    XAuto,
+    XHidden,
+    XClip,
+    XVisible,
+    XScroll,
+    /// Y-axis specific
+    YAuto,
+    YHidden,
+    YClip,
+    YVisible,
+    YScroll,
+}
+
+impl TailwindClass for Overflow {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Auto => "overflow-auto".into(),
+            Self::Hidden => "overflow-hidden".into(),
+            Self::Clip => "overflow-clip".into(),
+            Self::Visible => "overflow-visible".into(),
+            Self::Scroll => "overflow-scroll".into(),
+            Self::XAuto => "overflow-x-auto".into(),
+            Self::XHidden => "overflow-x-hidden".into(),
+            Self::XClip => "overflow-x-clip".into(),
+            Self::XVisible => "overflow-x-visible".into(),
+            Self::XScroll => "overflow-x-scroll".into(),
+            Self::YAuto => "overflow-y-auto".into(),
+            Self::YHidden => "overflow-y-hidden".into(),
+            Self::YClip => "overflow-y-clip".into(),
+            Self::YVisible => "overflow-y-visible".into(),
+            Self::YScroll => "overflow-y-scroll".into(),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_display() {
+        assert_eq!(Display::Block.to_class(), "block");
+        assert_eq!(Display::Flex.to_class(), "flex");
+        assert_eq!(Display::Grid.to_class(), "grid");
+        assert_eq!(Display::Hidden.to_class(), "hidden");
+        assert_eq!(Display::InlineBlock.to_class(), "inline-block");
+    }
+
+    #[test]
+    fn test_position() {
+        assert_eq!(Position::Static.to_class(), "static");
+        assert_eq!(Position::Fixed.to_class(), "fixed");
+        assert_eq!(Position::Absolute.to_class(), "absolute");
+        assert_eq!(Position::Relative.to_class(), "relative");
+        assert_eq!(Position::Sticky.to_class(), "sticky");
+    }
+
+    #[test]
+    fn test_overflow() {
+        assert_eq!(Overflow::Auto.to_class(), "overflow-auto");
+        assert_eq!(Overflow::Hidden.to_class(), "overflow-hidden");
+        assert_eq!(Overflow::XAuto.to_class(), "overflow-x-auto");
+        assert_eq!(Overflow::YHidden.to_class(), "overflow-y-hidden");
+    }
+}
diff --git a/crates/ironhtml-tailwind/src/lib.rs b/crates/ironhtml-tailwind/src/lib.rs
new file mode 100644
index 0000000..2ca6609
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/lib.rs
@@ -0,0 +1,344 @@
+//! # ironhtml-tailwind
+//!
+//! Type-safe Tailwind CSS utilities for ironhtml with compile-time conflict detection.
+//!
+//! This crate provides type-safe Tailwind CSS class generation with a simple,
+//! ergonomic API that integrates seamlessly with ironhtml's typed HTML builder.
+//!
+//! ## Example
+//!
+//! ```rust
+//! use ironhtml_tailwind::*;
+//! use ironhtml::typed::Element;
+//! use ironhtml_elements::Div;
+//!
+//! let element = Element::<Div>::new()
+//!     .tw(Padding::X(4))       // px-4
+//!     .tw(TextAlign::Center)   // text-center
+//!     .tw(Display::Flex)       // flex
+//!     .tw(FontWeight::Bold);   // font-bold
+//!
+//! let html = element.render();
+//! assert!(html.contains("px-4"));
+//! assert!(html.contains("text-center"));
+//! assert!(html.contains("flex"));
+//! assert!(html.contains("font-bold"));
+//! ```
+//!
+//! ## Responsive Variants
+//!
+//! Use responsive methods for different breakpoints:
+//!
+//! ```rust
+//! use ironhtml_tailwind::*;
+//! use ironhtml::typed::Element;
+//! use ironhtml_elements::Div;
+//!
+//! let element = Element::<Div>::new()
+//!     .tw(Padding::X(4))      // px-4
+//!     .tw_md(Padding::X(8));  // md:px-8
+//!
+//! let html = element.render();
+//! assert!(html.contains("px-4"));
+//! assert!(html.contains("md:px-8"));
+//! ```
+//!
+//! ## State Variants
+//!
+//! Use state methods for hover, focus, etc:
+//!
+//! ```rust
+//! use ironhtml_tailwind::*;
+//! use ironhtml::typed::Element;
+//! use ironhtml_elements::Div;
+//!
+//! let element = Element::<Div>::new()
+//!     .tw(TextColor::Blue(500))
+//!     .tw_hover(TextColor::Blue(700));
+//!
+//! let html = element.render();
+//! assert!(html.contains("text-blue-500"));
+//! assert!(html.contains("hover:text-blue-700"));
+//! ```
+//!
+//! ## Escape Hatch
+//!
+//! Use `tw_raw()` for custom classes:
+//!
+//! ```rust
+//! use ironhtml_tailwind::*;
+//! use ironhtml::typed::Element;
+//! use ironhtml_elements::Div;
+//!
+//! let element = Element::<Div>::new()
+//!     .tw(Padding::X(4))
+//!     .tw_raw("custom-class");
+//!
+//! let html = element.render();
+//! assert!(html.contains("px-4"));
+//! assert!(html.contains("custom-class"));
+//! ```
+
+#![no_std]
+
+extern crate alloc;
+
+use alloc::format;
+use alloc::string::String;
+use ironhtml::typed::Element;
+use ironhtml_elements::HtmlElement;
+
+// Utility modules
+mod spacing;
+mod layout;
+mod typography;
+mod flexbox;
+mod grid;
+mod sizing;
+mod borders;
+mod backgrounds;
+mod effects;
+
+// Re-export utility types
+pub use spacing::{Margin, Padding};
+pub use layout::{Display, Overflow, Position};
+pub use typography::{FontSize, FontWeight, TextAlign, TextColor};
+pub use flexbox::{AlignItems, FlexDirection, JustifyContent};
+pub use grid::{Gap, GridCols, GridRows};
+pub use sizing::{Height, Width};
+pub use borders::{BorderColor, BorderRadius, BorderWidth};
+pub use backgrounds::BackgroundColor;
+pub use effects::{Opacity, Shadow};
+
+/// Trait for types that can be converted to Tailwind class strings
+pub trait TailwindClass {
+    /// Convert to a Tailwind CSS class string
+    fn to_class(&self) -> String;
+}
+
+/// Responsive breakpoint prefix
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Breakpoint {
+    /// Small (sm:) - >= 640px
+    Sm,
+    /// Medium (md:) - >= 768px
+    Md,
+    /// Large (lg:) - >= 1024px
+    Lg,
+    /// Extra Large (xl:) - >= 1280px
+    Xl,
+    /// 2X Large (2xl:) - >= 1536px
+    TwoXl,
+}
+
+impl Breakpoint {
+    const fn prefix(self) -> &'static str {
+        match self {
+            Self::Sm => "sm:",
+            Self::Md => "md:",
+            Self::Lg => "lg:",
+            Self::Xl => "xl:",
+            Self::TwoXl => "2xl:",
+        }
+    }
+}
+
+/// State variant prefix (hover, focus, etc)
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum StateVariant {
+    /// hover:
+    Hover,
+    /// focus:
+    Focus,
+    /// active:
+    Active,
+    /// disabled:
+    Disabled,
+    /// visited:
+    Visited,
+    /// focus-within:
+    FocusWithin,
+}
+
+impl StateVariant {
+    const fn prefix(self) -> &'static str {
+        match self {
+            Self::Hover => "hover:",
+            Self::Focus => "focus:",
+            Self::Active => "active:",
+            Self::Disabled => "disabled:",
+            Self::Visited => "visited:",
+            Self::FocusWithin => "focus-within:",
+        }
+    }
+}
+
+/// Extension trait for adding Tailwind utilities to HTML elements
+pub trait TailwindElement<E: HtmlElement>: Sized {
+    /// Add a Tailwind utility class
+    fn tw(self, class: impl TailwindClass) -> Self;
+    
+    /// Add responsive utility for sm breakpoint (>= 640px)
+    fn tw_sm(self, class: impl TailwindClass) -> Self;
+    
+    /// Add responsive utility for md breakpoint (>= 768px)
+    fn tw_md(self, class: impl TailwindClass) -> Self;
+    
+    /// Add responsive utility for lg breakpoint (>= 1024px)
+    fn tw_lg(self, class: impl TailwindClass) -> Self;
+    
+    /// Add responsive utility for xl breakpoint (>= 1280px)
+    fn tw_xl(self, class: impl TailwindClass) -> Self;
+    
+    /// Add responsive utility for 2xl breakpoint (>= 1536px)
+    fn tw_2xl(self, class: impl TailwindClass) -> Self;
+    
+    /// Add hover state utility
+    fn tw_hover(self, class: impl TailwindClass) -> Self;
+    
+    /// Add focus state utility
+    fn tw_focus(self, class: impl TailwindClass) -> Self;
+    
+    /// Add active state utility
+    fn tw_active(self, class: impl TailwindClass) -> Self;
+    
+    /// Add disabled state utility
+    fn tw_disabled(self, class: impl TailwindClass) -> Self;
+    
+    /// Add arbitrary class string
+    fn tw_raw(self, class: impl Into<String>) -> Self;
+}
+
+impl<E: HtmlElement> TailwindElement<E> for Element<E> {
+    fn tw(self, class: impl TailwindClass) -> Self {
+        self.class(class.to_class())
+    }
+    
+    fn tw_sm(self, class: impl TailwindClass) -> Self {
+        self.class(format!("{}{}", Breakpoint::Sm.prefix(), class.to_class()))
+    }
+    
+    fn tw_md(self, class: impl TailwindClass) -> Self {
+        self.class(format!("{}{}", Breakpoint::Md.prefix(), class.to_class()))
+    }
+    
+    fn tw_lg(self, class: impl TailwindClass) -> Self {
+        self.class(format!("{}{}", Breakpoint::Lg.prefix(), class.to_class()))
+    }
+    
+    fn tw_xl(self, class: impl TailwindClass) -> Self {
+        self.class(format!("{}{}", Breakpoint::Xl.prefix(), class.to_class()))
+    }
+    
+    fn tw_2xl(self, class: impl TailwindClass) -> Self {
+        self.class(format!("{}{}", Breakpoint::TwoXl.prefix(), class.to_class()))
+    }
+    
+    fn tw_hover(self, class: impl TailwindClass) -> Self {
+        self.class(format!("{}{}", StateVariant::Hover.prefix(), class.to_class()))
+    }
+    
+    fn tw_focus(self, class: impl TailwindClass) -> Self {
+        self.class(format!("{}{}", StateVariant::Focus.prefix(), class.to_class()))
+    }
+    
+    fn tw_active(self, class: impl TailwindClass) -> Self {
+        self.class(format!("{}{}", StateVariant::Active.prefix(), class.to_class()))
+    }
+    
+    fn tw_disabled(self, class: impl TailwindClass) -> Self {
+        self.class(format!("{}{}", StateVariant::Disabled.prefix(), class.to_class()))
+    }
+    
+    fn tw_raw(self, class: impl Into<String>) -> Self {
+        self.class(class.into())
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use ironhtml_elements::Div;
+
+    #[test]
+    fn test_basic_utilities() {
+        let elem = Element::<Div>::new()
+            .tw(Padding::X(4))
+            .tw(Margin::Y(2))
+            .tw(Display::Flex);
+        
+        let html = elem.render();
+        assert!(html.contains("px-4"));
+        assert!(html.contains("my-2"));
+        assert!(html.contains("flex"));
+    }
+
+    #[test]
+    fn test_responsive_variants() {
+        let elem = Element::<Div>::new()
+            .tw(Padding::X(4))
+            .tw_md(Padding::X(8));
+        
+        let html = elem.render();
+        assert!(html.contains("px-4"));
+        assert!(html.contains("md:px-8"));
+    }
+
+    #[test]
+    fn test_state_variants() {
+        let elem = Element::<Div>::new()
+            .tw(TextColor::Blue(500))
+            .tw_hover(TextColor::Blue(700));
+        
+        let html = elem.render();
+        assert!(html.contains("text-blue-500"));
+        assert!(html.contains("hover:text-blue-700"));
+    }
+
+    #[test]
+    fn test_raw_escape_hatch() {
+        let elem = Element::<Div>::new()
+            .tw(Padding::X(4))
+            .tw_raw("custom-class");
+        
+        let html = elem.render();
+        assert!(html.contains("px-4"));
+        assert!(html.contains("custom-class"));
+    }
+    
+    #[test]
+    fn test_multiple_utilities() {
+        let elem = Element::<Div>::new()
+            .tw(Padding::All(4))
+            .tw(Margin::X(2))
+            .tw(BackgroundColor::Blue(500))
+            .tw(TextColor::White)
+            .tw(BorderRadius::Lg)
+            .tw(Shadow::Md);
+        
+        let html = elem.render();
+        assert!(html.contains("p-4"));
+        assert!(html.contains("mx-2"));
+        assert!(html.contains("bg-blue-500"));
+        assert!(html.contains("text-white"));
+        assert!(html.contains("rounded-lg"));
+        assert!(html.contains("shadow-md"));
+    }
+    
+    #[test]
+    fn test_flexbox() {
+        let elem = Element::<Div>::new()
+            .tw(Display::Flex)
+            .tw(FlexDirection::Col)
+            .tw(JustifyContent::Center)
+            .tw(AlignItems::Center)
+            .tw(Gap::All(4));
+        
+        let html = elem.render();
+        assert!(html.contains("flex"));
+        assert!(html.contains("flex-col"));
+        assert!(html.contains("justify-center"));
+        assert!(html.contains("items-center"));
+        assert!(html.contains("gap-4"));
+    }
+}
diff --git a/crates/ironhtml-tailwind/src/sizing.rs b/crates/ironhtml-tailwind/src/sizing.rs
new file mode 100644
index 0000000..33b9e4b
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/sizing.rs
@@ -0,0 +1,120 @@
+//! Sizing utilities: width and height
+
+use alloc::format;
+use alloc::string::String;
+use crate::TailwindClass;
+
+/// Width utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Width {
+    /// w-{n} (where n is 0-96 in multiples of 4px via Tailwind scale)
+    Scaled(u8),
+    /// w-auto
+    Auto,
+    /// w-full (100%)
+    Full,
+    /// w-screen (100vw)
+    Screen,
+    /// w-min
+    Min,
+    /// w-max
+    Max,
+    /// w-fit
+    Fit,
+    /// w-1/2, w-1/3, etc
+    Fraction { numerator: u8, denominator: u8 },
+}
+
+impl TailwindClass for Width {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Scaled(n) => format!("w-{n}"),
+            Self::Auto => "w-auto".into(),
+            Self::Full => "w-full".into(),
+            Self::Screen => "w-screen".into(),
+            Self::Min => "w-min".into(),
+            Self::Max => "w-max".into(),
+            Self::Fit => "w-fit".into(),
+            Self::Fraction {
+                numerator,
+                denominator,
+            } => format!("w-{numerator}/{denominator}"),
+        }
+    }
+}
+
+/// Height utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Height {
+    /// h-{n}
+    Scaled(u8),
+    /// h-auto
+    Auto,
+    /// h-full (100%)
+    Full,
+    /// h-screen (100vh)
+    Screen,
+    /// h-min
+    Min,
+    /// h-max
+    Max,
+    /// h-fit
+    Fit,
+    /// h-1/2, h-1/3, etc
+    Fraction { numerator: u8, denominator: u8 },
+}
+
+impl TailwindClass for Height {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Scaled(n) => format!("h-{n}"),
+            Self::Auto => "h-auto".into(),
+            Self::Full => "h-full".into(),
+            Self::Screen => "h-screen".into(),
+            Self::Min => "h-min".into(),
+            Self::Max => "h-max".into(),
+            Self::Fit => "h-fit".into(),
+            Self::Fraction {
+                numerator,
+                denominator,
+            } => format!("h-{numerator}/{denominator}"),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_width() {
+        assert_eq!(Width::Scaled(64).to_class(), "w-64");
+        assert_eq!(Width::Auto.to_class(), "w-auto");
+        assert_eq!(Width::Full.to_class(), "w-full");
+        assert_eq!(Width::Screen.to_class(), "w-screen");
+        assert_eq!(
+            Width::Fraction {
+                numerator: 1,
+                denominator: 2
+            }
+            .to_class(),
+            "w-1/2"
+        );
+    }
+
+    #[test]
+    fn test_height() {
+        assert_eq!(Height::Scaled(32).to_class(), "h-32");
+        assert_eq!(Height::Auto.to_class(), "h-auto");
+        assert_eq!(Height::Full.to_class(), "h-full");
+        assert_eq!(Height::Screen.to_class(), "h-screen");
+        assert_eq!(
+            Height::Fraction {
+                numerator: 2,
+                denominator: 3
+            }
+            .to_class(),
+            "h-2/3"
+        );
+    }
+}
diff --git a/crates/ironhtml-tailwind/src/spacing.rs b/crates/ironhtml-tailwind/src/spacing.rs
new file mode 100644
index 0000000..209b7f4
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/spacing.rs
@@ -0,0 +1,197 @@
+//! Spacing utilities: padding and margin
+
+use alloc::format;
+use alloc::string::String;
+use crate::TailwindClass;
+
+/// Padding utilities (p-*, px-*, py-*, pt-*, pb-*, pl-*, pr-*)
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Padding {
+    /// Padding on all sides (p-*)
+    All(u8),
+    /// Padding left and right (px-*)
+    X(u8),
+    /// Padding top and bottom (py-*)
+    Y(u8),
+    /// Padding top (pt-*)
+    T(u8),
+    /// Padding bottom (pb-*)
+    B(u8),
+    /// Padding left (pl-*)
+    L(u8),
+    /// Padding right (pr-*)
+    R(u8),
+    /// Arbitrary padding value (p-[value])
+    Arbitrary(ArbitraryValue),
+}
+
+/// Margin utilities (m-*, mx-*, my-*, mt-*, mb-*, ml-*, mr-*)
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Margin {
+    /// Margin on all sides (m-*)
+    All(u8),
+    /// Margin left and right (mx-*)
+    X(u8),
+    /// Margin top and bottom (my-*)
+    Y(u8),
+    /// Margin top (mt-*)
+    T(u8),
+    /// Margin bottom (mb-*)
+    B(u8),
+    /// Margin left (ml-*)
+    L(u8),
+    /// Margin right (mr-*)
+    R(u8),
+    /// Auto margin (m-auto, mx-auto, etc)
+    Auto(MarginAxis),
+    /// Arbitrary margin value (m-[value])
+    Arbitrary(ArbitraryValue),
+}
+
+/// Axis for auto margins
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum MarginAxis {
+    /// All sides
+    All,
+    /// X axis (left and right)
+    X,
+    /// Y axis (top and bottom)
+    Y,
+    /// Top only
+    T,
+    /// Bottom only
+    B,
+    /// Left only
+    L,
+    /// Right only
+    R,
+}
+
+/// Arbitrary value for utilities (e.g., px-[13px], m-[1.5rem])
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub struct ArbitraryValue {
+    /// The value inside brackets
+    pub value: &'static str,
+    /// The axis/direction
+    pub axis: SpacingAxis,
+}
+
+/// Spacing axis for arbitrary values
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum SpacingAxis {
+    All,
+    X,
+    Y,
+    T,
+    B,
+    L,
+    R,
+}
+
+impl TailwindClass for Padding {
+    fn to_class(&self) -> String {
+        match self {
+            Self::All(n) => format!("p-{n}"),
+            Self::X(n) => format!("px-{n}"),
+            Self::Y(n) => format!("py-{n}"),
+            Self::T(n) => format!("pt-{n}"),
+            Self::B(n) => format!("pb-{n}"),
+            Self::L(n) => format!("pl-{n}"),
+            Self::R(n) => format!("pr-{n}"),
+            Self::Arbitrary(arb) => {
+                let prefix = match arb.axis {
+                    SpacingAxis::All => "p",
+                    SpacingAxis::X => "px",
+                    SpacingAxis::Y => "py",
+                    SpacingAxis::T => "pt",
+                    SpacingAxis::B => "pb",
+                    SpacingAxis::L => "pl",
+                    SpacingAxis::R => "pr",
+                };
+                format!("{prefix}-[{}]", arb.value)
+            }
+        }
+    }
+}
+
+impl TailwindClass for Margin {
+    fn to_class(&self) -> String {
+        match self {
+            Self::All(n) => format!("m-{n}"),
+            Self::X(n) => format!("mx-{n}"),
+            Self::Y(n) => format!("my-{n}"),
+            Self::T(n) => format!("mt-{n}"),
+            Self::B(n) => format!("mb-{n}"),
+            Self::L(n) => format!("ml-{n}"),
+            Self::R(n) => format!("mr-{n}"),
+            Self::Auto(axis) => {
+                let prefix = match axis {
+                    MarginAxis::All => "m",
+                    MarginAxis::X => "mx",
+                    MarginAxis::Y => "my",
+                    MarginAxis::T => "mt",
+                    MarginAxis::B => "mb",
+                    MarginAxis::L => "ml",
+                    MarginAxis::R => "mr",
+                };
+                format!("{prefix}-auto")
+            }
+            Self::Arbitrary(arb) => {
+                let prefix = match arb.axis {
+                    SpacingAxis::All => "m",
+                    SpacingAxis::X => "mx",
+                    SpacingAxis::Y => "my",
+                    SpacingAxis::T => "mt",
+                    SpacingAxis::B => "mb",
+                    SpacingAxis::L => "ml",
+                    SpacingAxis::R => "mr",
+                };
+                format!("{prefix}-[{}]", arb.value)
+            }
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_padding() {
+        assert_eq!(Padding::All(4).to_class(), "p-4");
+        assert_eq!(Padding::X(8).to_class(), "px-8");
+        assert_eq!(Padding::Y(2).to_class(), "py-2");
+        assert_eq!(Padding::T(1).to_class(), "pt-1");
+        assert_eq!(Padding::B(3).to_class(), "pb-3");
+        assert_eq!(Padding::L(6).to_class(), "pl-6");
+        assert_eq!(Padding::R(12).to_class(), "pr-12");
+    }
+
+    #[test]
+    fn test_margin() {
+        assert_eq!(Margin::All(4).to_class(), "m-4");
+        assert_eq!(Margin::X(8).to_class(), "mx-8");
+        assert_eq!(Margin::Y(2).to_class(), "my-2");
+        assert_eq!(Margin::T(1).to_class(), "mt-1");
+        assert_eq!(Margin::B(3).to_class(), "mb-3");
+        assert_eq!(Margin::L(6).to_class(), "ml-6");
+        assert_eq!(Margin::R(12).to_class(), "mr-12");
+    }
+
+    #[test]
+    fn test_margin_auto() {
+        assert_eq!(Margin::Auto(MarginAxis::All).to_class(), "m-auto");
+        assert_eq!(Margin::Auto(MarginAxis::X).to_class(), "mx-auto");
+        assert_eq!(Margin::Auto(MarginAxis::Y).to_class(), "my-auto");
+    }
+
+    #[test]
+    fn test_arbitrary_values() {
+        let arb = ArbitraryValue {
+            value: "13px",
+            axis: SpacingAxis::X,
+        };
+        assert_eq!(Padding::Arbitrary(arb).to_class(), "px-[13px]");
+        assert_eq!(Margin::Arbitrary(arb).to_class(), "mx-[13px]");
+    }
+}
diff --git a/crates/ironhtml-tailwind/src/typography.rs b/crates/ironhtml-tailwind/src/typography.rs
new file mode 100644
index 0000000..78eabc2
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/typography.rs
@@ -0,0 +1,224 @@
+//! Typography utilities: font size, weight, text align, and color
+
+use alloc::format;
+use alloc::string::String;
+use crate::TailwindClass;
+
+/// Font size utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum FontSize {
+    Xs,
+    Sm,
+    Base,
+    Lg,
+    Xl,
+    Xl2,
+    Xl3,
+    Xl4,
+    Xl5,
+    Xl6,
+    Xl7,
+    Xl8,
+    Xl9,
+}
+
+impl TailwindClass for FontSize {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Xs => "text-xs".into(),
+            Self::Sm => "text-sm".into(),
+            Self::Base => "text-base".into(),
+            Self::Lg => "text-lg".into(),
+            Self::Xl => "text-xl".into(),
+            Self::Xl2 => "text-2xl".into(),
+            Self::Xl3 => "text-3xl".into(),
+            Self::Xl4 => "text-4xl".into(),
+            Self::Xl5 => "text-5xl".into(),
+            Self::Xl6 => "text-6xl".into(),
+            Self::Xl7 => "text-7xl".into(),
+            Self::Xl8 => "text-8xl".into(),
+            Self::Xl9 => "text-9xl".into(),
+        }
+    }
+}
+
+/// Font weight utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum FontWeight {
+    Thin,
+    ExtraLight,
+    Light,
+    Normal,
+    Medium,
+    SemiBold,
+    Bold,
+    ExtraBold,
+    Black,
+}
+
+impl TailwindClass for FontWeight {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Thin => "font-thin".into(),
+            Self::ExtraLight => "font-extralight".into(),
+            Self::Light => "font-light".into(),
+            Self::Normal => "font-normal".into(),
+            Self::Medium => "font-medium".into(),
+            Self::SemiBold => "font-semibold".into(),
+            Self::Bold => "font-bold".into(),
+            Self::ExtraBold => "font-extrabold".into(),
+            Self::Black => "font-black".into(),
+        }
+    }
+}
+
+/// Text alignment utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum TextAlign {
+    Left,
+    Center,
+    Right,
+    Justify,
+    Start,
+    End,
+}
+
+impl TailwindClass for TextAlign {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Left => "text-left".into(),
+            Self::Center => "text-center".into(),
+            Self::Right => "text-right".into(),
+            Self::Justify => "text-justify".into(),
+            Self::Start => "text-start".into(),
+            Self::End => "text-end".into(),
+        }
+    }
+}
+
+/// Text color utilities
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum TextColor {
+    // Slate
+    Slate(u16),
+    // Gray
+    Gray(u16),
+    // Zinc
+    Zinc(u16),
+    // Neutral
+    Neutral(u16),
+    // Stone
+    Stone(u16),
+    // Red
+    Red(u16),
+    // Orange
+    Orange(u16),
+    // Amber
+    Amber(u16),
+    // Yellow
+    Yellow(u16),
+    // Lime
+    Lime(u16),
+    // Green
+    Green(u16),
+    // Emerald
+    Emerald(u16),
+    // Teal
+    Teal(u16),
+    // Cyan
+    Cyan(u16),
+    // Sky
+    Sky(u16),
+    // Blue
+    Blue(u16),
+    // Indigo
+    Indigo(u16),
+    // Violet
+    Violet(u16),
+    // Purple
+    Purple(u16),
+    // Fuchsia
+    Fuchsia(u16),
+    // Pink
+    Pink(u16),
+    // Rose
+    Rose(u16),
+    // Special colors
+    Black,
+    White,
+    Transparent,
+    Current,
+    Inherit,
+}
+
+impl TailwindClass for TextColor {
+    fn to_class(&self) -> String {
+        match self {
+            Self::Slate(n) => format!("text-slate-{n}"),
+            Self::Gray(n) => format!("text-gray-{n}"),
+            Self::Zinc(n) => format!("text-zinc-{n}"),
+            Self::Neutral(n) => format!("text-neutral-{n}"),
+            Self::Stone(n) => format!("text-stone-{n}"),
+            Self::Red(n) => format!("text-red-{n}"),
+            Self::Orange(n) => format!("text-orange-{n}"),
+            Self::Amber(n) => format!("text-amber-{n}"),
+            Self::Yellow(n) => format!("text-yellow-{n}"),
+            Self::Lime(n) => format!("text-lime-{n}"),
+            Self::Green(n) => format!("text-green-{n}"),
+            Self::Emerald(n) => format!("text-emerald-{n}"),
+            Self::Teal(n) => format!("text-teal-{n}"),
+            Self::Cyan(n) => format!("text-cyan-{n}"),
+            Self::Sky(n) => format!("text-sky-{n}"),
+            Self::Blue(n) => format!("text-blue-{n}"),
+            Self::Indigo(n) => format!("text-indigo-{n}"),
+            Self::Violet(n) => format!("text-violet-{n}"),
+            Self::Purple(n) => format!("text-purple-{n}"),
+            Self::Fuchsia(n) => format!("text-fuchsia-{n}"),
+            Self::Pink(n) => format!("text-pink-{n}"),
+            Self::Rose(n) => format!("text-rose-{n}"),
+            Self::Black => "text-black".into(),
+            Self::White => "text-white".into(),
+            Self::Transparent => "text-transparent".into(),
+            Self::Current => "text-current".into(),
+            Self::Inherit => "text-inherit".into(),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_font_size() {
+        assert_eq!(FontSize::Xs.to_class(), "text-xs");
+        assert_eq!(FontSize::Base.to_class(), "text-base");
+        assert_eq!(FontSize::Xl.to_class(), "text-xl");
+        assert_eq!(FontSize::Xl2.to_class(), "text-2xl");
+    }
+
+    #[test]
+    fn test_font_weight() {
+        assert_eq!(FontWeight::Thin.to_class(), "font-thin");
+        assert_eq!(FontWeight::Normal.to_class(), "font-normal");
+        assert_eq!(FontWeight::Bold.to_class(), "font-bold");
+        assert_eq!(FontWeight::Black.to_class(), "font-black");
+    }
+
+    #[test]
+    fn test_text_align() {
+        assert_eq!(TextAlign::Left.to_class(), "text-left");
+        assert_eq!(TextAlign::Center.to_class(), "text-center");
+        assert_eq!(TextAlign::Right.to_class(), "text-right");
+        assert_eq!(TextAlign::Justify.to_class(), "text-justify");
+    }
+
+    #[test]
+    fn test_text_color() {
+        assert_eq!(TextColor::Blue(500).to_class(), "text-blue-500");
+        assert_eq!(TextColor::Red(700).to_class(), "text-red-700");
+        assert_eq!(TextColor::Gray(300).to_class(), "text-gray-300");
+        assert_eq!(TextColor::Black.to_class(), "text-black");
+        assert_eq!(TextColor::White.to_class(), "text-white");
+    }
+}

From 638cb866b26900e6a525230b6019f5f9aaf6e1b2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 8 Feb 2026 02:32:10 +0000
Subject: [PATCH 3/6] Add #[must_use] attributes and fix clippy warnings

Co-authored-by: dannywillems <6018454+dannywillems@users.noreply.github.com>
---
 .../examples/tailwind_demo.rs                 |  87 +++++++++---
 crates/ironhtml-tailwind/src/backgrounds.rs   |   2 +-
 crates/ironhtml-tailwind/src/borders.rs       |   2 +-
 crates/ironhtml-tailwind/src/effects.rs       |   2 +-
 crates/ironhtml-tailwind/src/flexbox.rs       |   2 +-
 crates/ironhtml-tailwind/src/grid.rs          |   2 +-
 crates/ironhtml-tailwind/src/layout.rs        |   2 +-
 crates/ironhtml-tailwind/src/lib.rs           | 125 +++++++++++-------
 crates/ironhtml-tailwind/src/sizing.rs        |   2 +-
 crates/ironhtml-tailwind/src/spacing.rs       |   2 +-
 crates/ironhtml-tailwind/src/typography.rs    |   2 +-
 11 files changed, 152 insertions(+), 78 deletions(-)

diff --git a/crates/ironhtml-tailwind/examples/tailwind_demo.rs b/crates/ironhtml-tailwind/examples/tailwind_demo.rs
index 524c6f3..4f7c2ac 100644
--- a/crates/ironhtml-tailwind/examples/tailwind_demo.rs
+++ b/crates/ironhtml-tailwind/examples/tailwind_demo.rs
@@ -1,10 +1,16 @@
 //! Example demonstrating type-safe Tailwind CSS usage with ironhtml
 //!
-//! Run with: cargo run --example tailwind_demo
+//! Run with: `cargo run --example tailwind_demo`
 
 use ironhtml::typed::{Document, Element};
-use ironhtml_elements::*;
-use ironhtml_tailwind::*;
+use ironhtml_elements::{
+    Body, Button, Div, H1, H2, H3, Head, Html, Meta, P, Script, Title,
+};
+use ironhtml_tailwind::{
+    BackgroundColor, BorderColor, BorderRadius, BorderWidth, Display, FlexDirection,
+    FontSize, FontWeight, Gap, GridCols, Margin, Padding, Shadow, TailwindElement,
+    TextColor, Width,
+};
 
 fn main() {
     let page = Document::new()
@@ -18,9 +24,7 @@ fn main() {
                                 .attr("content", "width=device-width, initial-scale=1.0")
                         })
                         .child::<Title, _>(|t| t.text("Tailwind CSS Demo"))
-                        .child::<Script, _>(|s| {
-                            s.attr("src", "https://cdn.tailwindcss.com")
-                        })
+                        .child::<Script, _>(|s| s.attr("src", "https://cdn.tailwindcss.com"))
                 })
                 .child::<Body, _>(|body| {
                     body.tw(BackgroundColor::Gray(50))
@@ -30,7 +34,7 @@ fn main() {
         })
         .build();
 
-    println!("{}", page);
+    println!("{page}");
 }
 
 /// Main container with card layout
@@ -55,8 +59,12 @@ fn container() -> Element<Div> {
                 .tw(Gap::All(6))
                 .tw_md(GridCols::Cols(1))
                 .child::<Div, _>(|_| feature_card("Fast", "Blazing fast type-safe HTML", "blue"))
-                .child::<Div, _>(|_| feature_card("Safe", "Compile-time Tailwind validation", "green"))
-                .child::<Div, _>(|_| feature_card("Easy", "Ergonomic API with full IDE support", "purple"))
+                .child::<Div, _>(|_| {
+                    feature_card("Safe", "Compile-time Tailwind validation", "green")
+                })
+                .child::<Div, _>(|_| {
+                    feature_card("Easy", "Ergonomic API with full IDE support", "purple")
+                })
         })
         .child::<Div, _>(|_| button_showcase())
 }
@@ -112,10 +120,26 @@ fn hero_card() -> Element<Div> {
 /// Feature card component
 fn feature_card(title: &str, description: &str, color: &str) -> Element<Div> {
     let (bg_color, text_color, border_color) = match color {
-        "blue" => (BackgroundColor::Blue(50), TextColor::Blue(700), BorderColor::Blue(200)),
-        "green" => (BackgroundColor::Green(50), TextColor::Green(700), BorderColor::Green(200)),
-        "purple" => (BackgroundColor::Purple(50), TextColor::Purple(700), BorderColor::Purple(200)),
-        _ => (BackgroundColor::Gray(50), TextColor::Gray(700), BorderColor::Gray(200)),
+        "blue" => (
+            BackgroundColor::Blue(50),
+            TextColor::Blue(700),
+            BorderColor::Blue(200),
+        ),
+        "green" => (
+            BackgroundColor::Green(50),
+            TextColor::Green(700),
+            BorderColor::Green(200),
+        ),
+        "purple" => (
+            BackgroundColor::Purple(50),
+            TextColor::Purple(700),
+            BorderColor::Purple(200),
+        ),
+        _ => (
+            BackgroundColor::Gray(50),
+            TextColor::Gray(700),
+            BorderColor::Gray(200),
+        ),
     };
 
     Element::<Div>::new()
@@ -132,10 +156,7 @@ fn feature_card(title: &str, description: &str, color: &str) -> Element<Div> {
                 .tw(Margin::B(2))
                 .text(title)
         })
-        .child::<P, _>(|p| {
-            p.tw(TextColor::Gray(600))
-                .text(description)
-        })
+        .child::<P, _>(|p| p.tw(TextColor::Gray(600)).text(description))
 }
 
 /// Button showcase
@@ -156,10 +177,34 @@ fn button_showcase() -> Element<Div> {
                 .tw(Gap::All(4))
                 .tw(FlexDirection::Row)
                 .tw_md(FlexDirection::Col)
-                .child::<Button, _>(|_| styled_button("Primary", BackgroundColor::Blue(600), BackgroundColor::Blue(700)))
-                .child::<Button, _>(|_| styled_button("Success", BackgroundColor::Green(600), BackgroundColor::Green(700)))
-                .child::<Button, _>(|_| styled_button("Danger", BackgroundColor::Red(600), BackgroundColor::Red(700)))
-                .child::<Button, _>(|_| styled_button("Warning", BackgroundColor::Yellow(500), BackgroundColor::Yellow(600)))
+                .child::<Button, _>(|_| {
+                    styled_button(
+                        "Primary",
+                        BackgroundColor::Blue(600),
+                        BackgroundColor::Blue(700),
+                    )
+                })
+                .child::<Button, _>(|_| {
+                    styled_button(
+                        "Success",
+                        BackgroundColor::Green(600),
+                        BackgroundColor::Green(700),
+                    )
+                })
+                .child::<Button, _>(|_| {
+                    styled_button(
+                        "Danger",
+                        BackgroundColor::Red(600),
+                        BackgroundColor::Red(700),
+                    )
+                })
+                .child::<Button, _>(|_| {
+                    styled_button(
+                        "Warning",
+                        BackgroundColor::Yellow(500),
+                        BackgroundColor::Yellow(600),
+                    )
+                })
         })
 }
 
diff --git a/crates/ironhtml-tailwind/src/backgrounds.rs b/crates/ironhtml-tailwind/src/backgrounds.rs
index fa64c05..21ebcd4 100644
--- a/crates/ironhtml-tailwind/src/backgrounds.rs
+++ b/crates/ironhtml-tailwind/src/backgrounds.rs
@@ -1,8 +1,8 @@
 //! Background utilities
 
+use crate::TailwindClass;
 use alloc::format;
 use alloc::string::String;
-use crate::TailwindClass;
 
 /// Background color utilities
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
diff --git a/crates/ironhtml-tailwind/src/borders.rs b/crates/ironhtml-tailwind/src/borders.rs
index 1c68fe1..b3cfd8c 100644
--- a/crates/ironhtml-tailwind/src/borders.rs
+++ b/crates/ironhtml-tailwind/src/borders.rs
@@ -1,8 +1,8 @@
 //! Border utilities
 
+use crate::TailwindClass;
 use alloc::format;
 use alloc::string::String;
-use crate::TailwindClass;
 
 /// Border width utilities
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
diff --git a/crates/ironhtml-tailwind/src/effects.rs b/crates/ironhtml-tailwind/src/effects.rs
index 2851d91..6494c53 100644
--- a/crates/ironhtml-tailwind/src/effects.rs
+++ b/crates/ironhtml-tailwind/src/effects.rs
@@ -1,7 +1,7 @@
 //! Effects utilities: shadows and opacity
 
-use alloc::string::String;
 use crate::TailwindClass;
+use alloc::string::String;
 
 /// Shadow utilities
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
diff --git a/crates/ironhtml-tailwind/src/flexbox.rs b/crates/ironhtml-tailwind/src/flexbox.rs
index ba4561f..77d679d 100644
--- a/crates/ironhtml-tailwind/src/flexbox.rs
+++ b/crates/ironhtml-tailwind/src/flexbox.rs
@@ -1,7 +1,7 @@
 //! Flexbox utilities
 
-use alloc::string::String;
 use crate::TailwindClass;
+use alloc::string::String;
 
 /// Flex direction utilities
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
diff --git a/crates/ironhtml-tailwind/src/grid.rs b/crates/ironhtml-tailwind/src/grid.rs
index 96055a3..e770f40 100644
--- a/crates/ironhtml-tailwind/src/grid.rs
+++ b/crates/ironhtml-tailwind/src/grid.rs
@@ -1,8 +1,8 @@
 //! Grid utilities
 
+use crate::TailwindClass;
 use alloc::format;
 use alloc::string::String;
-use crate::TailwindClass;
 
 /// Grid columns utilities
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
diff --git a/crates/ironhtml-tailwind/src/layout.rs b/crates/ironhtml-tailwind/src/layout.rs
index e4826d3..717b245 100644
--- a/crates/ironhtml-tailwind/src/layout.rs
+++ b/crates/ironhtml-tailwind/src/layout.rs
@@ -1,7 +1,7 @@
 //! Layout utilities: display, position, overflow
 
-use alloc::string::String;
 use crate::TailwindClass;
+use alloc::string::String;
 
 /// Display utilities
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
diff --git a/crates/ironhtml-tailwind/src/lib.rs b/crates/ironhtml-tailwind/src/lib.rs
index 2ca6609..e4ce395 100644
--- a/crates/ironhtml-tailwind/src/lib.rs
+++ b/crates/ironhtml-tailwind/src/lib.rs
@@ -89,26 +89,26 @@ use ironhtml::typed::Element;
 use ironhtml_elements::HtmlElement;
 
 // Utility modules
-mod spacing;
-mod layout;
-mod typography;
+mod backgrounds;
+mod borders;
+mod effects;
 mod flexbox;
 mod grid;
+mod layout;
 mod sizing;
-mod borders;
-mod backgrounds;
-mod effects;
+mod spacing;
+mod typography;
 
 // Re-export utility types
-pub use spacing::{Margin, Padding};
-pub use layout::{Display, Overflow, Position};
-pub use typography::{FontSize, FontWeight, TextAlign, TextColor};
+pub use backgrounds::BackgroundColor;
+pub use borders::{BorderColor, BorderRadius, BorderWidth};
+pub use effects::{Opacity, Shadow};
 pub use flexbox::{AlignItems, FlexDirection, JustifyContent};
 pub use grid::{Gap, GridCols, GridRows};
+pub use layout::{Display, Overflow, Position};
 pub use sizing::{Height, Width};
-pub use borders::{BorderColor, BorderRadius, BorderWidth};
-pub use backgrounds::BackgroundColor;
-pub use effects::{Opacity, Shadow};
+pub use spacing::{Margin, Padding};
+pub use typography::{FontSize, FontWeight, TextAlign, TextColor};
 
 /// Trait for types that can be converted to Tailwind class strings
 pub trait TailwindClass {
@@ -176,36 +176,47 @@ impl StateVariant {
 /// Extension trait for adding Tailwind utilities to HTML elements
 pub trait TailwindElement<E: HtmlElement>: Sized {
     /// Add a Tailwind utility class
+    #[must_use]
     fn tw(self, class: impl TailwindClass) -> Self;
-    
+
     /// Add responsive utility for sm breakpoint (>= 640px)
+    #[must_use]
     fn tw_sm(self, class: impl TailwindClass) -> Self;
-    
+
     /// Add responsive utility for md breakpoint (>= 768px)
+    #[must_use]
     fn tw_md(self, class: impl TailwindClass) -> Self;
-    
+
     /// Add responsive utility for lg breakpoint (>= 1024px)
+    #[must_use]
     fn tw_lg(self, class: impl TailwindClass) -> Self;
-    
+
     /// Add responsive utility for xl breakpoint (>= 1280px)
+    #[must_use]
     fn tw_xl(self, class: impl TailwindClass) -> Self;
-    
+
     /// Add responsive utility for 2xl breakpoint (>= 1536px)
+    #[must_use]
     fn tw_2xl(self, class: impl TailwindClass) -> Self;
-    
+
     /// Add hover state utility
+    #[must_use]
     fn tw_hover(self, class: impl TailwindClass) -> Self;
-    
+
     /// Add focus state utility
+    #[must_use]
     fn tw_focus(self, class: impl TailwindClass) -> Self;
-    
+
     /// Add active state utility
+    #[must_use]
     fn tw_active(self, class: impl TailwindClass) -> Self;
-    
+
     /// Add disabled state utility
+    #[must_use]
     fn tw_disabled(self, class: impl TailwindClass) -> Self;
-    
+
     /// Add arbitrary class string
+    #[must_use]
     fn tw_raw(self, class: impl Into<String>) -> Self;
 }
 
@@ -213,43 +224,63 @@ impl<E: HtmlElement> TailwindElement<E> for Element<E> {
     fn tw(self, class: impl TailwindClass) -> Self {
         self.class(class.to_class())
     }
-    
+
     fn tw_sm(self, class: impl TailwindClass) -> Self {
         self.class(format!("{}{}", Breakpoint::Sm.prefix(), class.to_class()))
     }
-    
+
     fn tw_md(self, class: impl TailwindClass) -> Self {
         self.class(format!("{}{}", Breakpoint::Md.prefix(), class.to_class()))
     }
-    
+
     fn tw_lg(self, class: impl TailwindClass) -> Self {
         self.class(format!("{}{}", Breakpoint::Lg.prefix(), class.to_class()))
     }
-    
+
     fn tw_xl(self, class: impl TailwindClass) -> Self {
         self.class(format!("{}{}", Breakpoint::Xl.prefix(), class.to_class()))
     }
-    
+
     fn tw_2xl(self, class: impl TailwindClass) -> Self {
-        self.class(format!("{}{}", Breakpoint::TwoXl.prefix(), class.to_class()))
+        self.class(format!(
+            "{}{}",
+            Breakpoint::TwoXl.prefix(),
+            class.to_class()
+        ))
     }
-    
+
     fn tw_hover(self, class: impl TailwindClass) -> Self {
-        self.class(format!("{}{}", StateVariant::Hover.prefix(), class.to_class()))
+        self.class(format!(
+            "{}{}",
+            StateVariant::Hover.prefix(),
+            class.to_class()
+        ))
     }
-    
+
     fn tw_focus(self, class: impl TailwindClass) -> Self {
-        self.class(format!("{}{}", StateVariant::Focus.prefix(), class.to_class()))
+        self.class(format!(
+            "{}{}",
+            StateVariant::Focus.prefix(),
+            class.to_class()
+        ))
     }
-    
+
     fn tw_active(self, class: impl TailwindClass) -> Self {
-        self.class(format!("{}{}", StateVariant::Active.prefix(), class.to_class()))
+        self.class(format!(
+            "{}{}",
+            StateVariant::Active.prefix(),
+            class.to_class()
+        ))
     }
-    
+
     fn tw_disabled(self, class: impl TailwindClass) -> Self {
-        self.class(format!("{}{}", StateVariant::Disabled.prefix(), class.to_class()))
+        self.class(format!(
+            "{}{}",
+            StateVariant::Disabled.prefix(),
+            class.to_class()
+        ))
     }
-    
+
     fn tw_raw(self, class: impl Into<String>) -> Self {
         self.class(class.into())
     }
@@ -266,7 +297,7 @@ mod tests {
             .tw(Padding::X(4))
             .tw(Margin::Y(2))
             .tw(Display::Flex);
-        
+
         let html = elem.render();
         assert!(html.contains("px-4"));
         assert!(html.contains("my-2"));
@@ -275,10 +306,8 @@ mod tests {
 
     #[test]
     fn test_responsive_variants() {
-        let elem = Element::<Div>::new()
-            .tw(Padding::X(4))
-            .tw_md(Padding::X(8));
-        
+        let elem = Element::<Div>::new().tw(Padding::X(4)).tw_md(Padding::X(8));
+
         let html = elem.render();
         assert!(html.contains("px-4"));
         assert!(html.contains("md:px-8"));
@@ -289,7 +318,7 @@ mod tests {
         let elem = Element::<Div>::new()
             .tw(TextColor::Blue(500))
             .tw_hover(TextColor::Blue(700));
-        
+
         let html = elem.render();
         assert!(html.contains("text-blue-500"));
         assert!(html.contains("hover:text-blue-700"));
@@ -300,12 +329,12 @@ mod tests {
         let elem = Element::<Div>::new()
             .tw(Padding::X(4))
             .tw_raw("custom-class");
-        
+
         let html = elem.render();
         assert!(html.contains("px-4"));
         assert!(html.contains("custom-class"));
     }
-    
+
     #[test]
     fn test_multiple_utilities() {
         let elem = Element::<Div>::new()
@@ -315,7 +344,7 @@ mod tests {
             .tw(TextColor::White)
             .tw(BorderRadius::Lg)
             .tw(Shadow::Md);
-        
+
         let html = elem.render();
         assert!(html.contains("p-4"));
         assert!(html.contains("mx-2"));
@@ -324,7 +353,7 @@ mod tests {
         assert!(html.contains("rounded-lg"));
         assert!(html.contains("shadow-md"));
     }
-    
+
     #[test]
     fn test_flexbox() {
         let elem = Element::<Div>::new()
@@ -333,7 +362,7 @@ mod tests {
             .tw(JustifyContent::Center)
             .tw(AlignItems::Center)
             .tw(Gap::All(4));
-        
+
         let html = elem.render();
         assert!(html.contains("flex"));
         assert!(html.contains("flex-col"));
diff --git a/crates/ironhtml-tailwind/src/sizing.rs b/crates/ironhtml-tailwind/src/sizing.rs
index 33b9e4b..5186f87 100644
--- a/crates/ironhtml-tailwind/src/sizing.rs
+++ b/crates/ironhtml-tailwind/src/sizing.rs
@@ -1,8 +1,8 @@
 //! Sizing utilities: width and height
 
+use crate::TailwindClass;
 use alloc::format;
 use alloc::string::String;
-use crate::TailwindClass;
 
 /// Width utilities
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
diff --git a/crates/ironhtml-tailwind/src/spacing.rs b/crates/ironhtml-tailwind/src/spacing.rs
index 209b7f4..183e2b2 100644
--- a/crates/ironhtml-tailwind/src/spacing.rs
+++ b/crates/ironhtml-tailwind/src/spacing.rs
@@ -1,8 +1,8 @@
 //! Spacing utilities: padding and margin
 
+use crate::TailwindClass;
 use alloc::format;
 use alloc::string::String;
-use crate::TailwindClass;
 
 /// Padding utilities (p-*, px-*, py-*, pt-*, pb-*, pl-*, pr-*)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
diff --git a/crates/ironhtml-tailwind/src/typography.rs b/crates/ironhtml-tailwind/src/typography.rs
index 78eabc2..155534a 100644
--- a/crates/ironhtml-tailwind/src/typography.rs
+++ b/crates/ironhtml-tailwind/src/typography.rs
@@ -1,8 +1,8 @@
 //! Typography utilities: font size, weight, text align, and color
 
+use crate::TailwindClass;
 use alloc::format;
 use alloc::string::String;
-use crate::TailwindClass;
 
 /// Font size utilities
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]

From e9ddb2df0057aae5e5e4ed9ec03bfaca0cbd8fd6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 8 Feb 2026 02:35:15 +0000
Subject: [PATCH 4/6] Add documentation for color shade values

Co-authored-by: dannywillems <6018454+dannywillems@users.noreply.github.com>
---
 crates/ironhtml-tailwind/src/backgrounds.rs | 9 +++++++++
 crates/ironhtml-tailwind/src/borders.rs     | 9 +++++++++
 crates/ironhtml-tailwind/src/typography.rs  | 9 +++++++++
 3 files changed, 27 insertions(+)

diff --git a/crates/ironhtml-tailwind/src/backgrounds.rs b/crates/ironhtml-tailwind/src/backgrounds.rs
index 21ebcd4..27bc8b1 100644
--- a/crates/ironhtml-tailwind/src/backgrounds.rs
+++ b/crates/ironhtml-tailwind/src/backgrounds.rs
@@ -5,6 +5,15 @@ use alloc::format;
 use alloc::string::String;
 
 /// Background color utilities
+///
+/// Color shades should use standard Tailwind values:
+/// - 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+///
+/// Example:
+/// ```
+/// use ironhtml_tailwind::BackgroundColor;
+/// let color = BackgroundColor::Blue(500);  // bg-blue-500
+/// ```
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum BackgroundColor {
     Slate(u16),
diff --git a/crates/ironhtml-tailwind/src/borders.rs b/crates/ironhtml-tailwind/src/borders.rs
index b3cfd8c..f870745 100644
--- a/crates/ironhtml-tailwind/src/borders.rs
+++ b/crates/ironhtml-tailwind/src/borders.rs
@@ -74,6 +74,15 @@ impl TailwindClass for BorderWidth {
 }
 
 /// Border color utilities (same as text colors)
+///
+/// Color shades should use standard Tailwind values:
+/// - 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+///
+/// Example:
+/// ```
+/// use ironhtml_tailwind::BorderColor;
+/// let color = BorderColor::Gray(300);  // border-gray-300
+/// ```
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum BorderColor {
     Slate(u16),
diff --git a/crates/ironhtml-tailwind/src/typography.rs b/crates/ironhtml-tailwind/src/typography.rs
index 155534a..3932b4a 100644
--- a/crates/ironhtml-tailwind/src/typography.rs
+++ b/crates/ironhtml-tailwind/src/typography.rs
@@ -97,6 +97,15 @@ impl TailwindClass for TextAlign {
 }
 
 /// Text color utilities
+///
+/// Color shades should use standard Tailwind values:
+/// - 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+///
+/// Example:
+/// ```
+/// use ironhtml_tailwind::TextColor;
+/// let color = TextColor::Blue(500);  // text-blue-500
+/// ```
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum TextColor {
     // Slate

From 1664d1ba7c56798bb45ac39e3244703cf8a6d4ae Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 8 Feb 2026 02:42:17 +0000
Subject: [PATCH 5/6] Add html! macro example and Tailwind documentation links

- Add tailwind_macro.rs example demonstrating usage with html! macro
- Add documentation links to Tailwind CSS docs for all utility classes
- Update README with macro example and both example commands
- Enable macros feature in ironhtml-tailwind dependencies

Co-authored-by: dannywillems <6018454+dannywillems@users.noreply.github.com>
---
 crates/ironhtml-tailwind/Cargo.toml           |   2 +-
 crates/ironhtml-tailwind/README.md            |  36 ++++-
 .../examples/tailwind_macro.rs                | 152 ++++++++++++++++++
 crates/ironhtml-tailwind/src/borders.rs       |   2 +
 crates/ironhtml-tailwind/src/effects.rs       |   2 +
 crates/ironhtml-tailwind/src/flexbox.rs       |   4 +
 crates/ironhtml-tailwind/src/grid.rs          |   4 +
 crates/ironhtml-tailwind/src/layout.rs        |   4 +
 crates/ironhtml-tailwind/src/sizing.rs        |   2 +
 crates/ironhtml-tailwind/src/spacing.rs       |   2 +
 crates/ironhtml-tailwind/src/typography.rs    |   4 +
 11 files changed, 210 insertions(+), 4 deletions(-)
 create mode 100644 crates/ironhtml-tailwind/examples/tailwind_macro.rs

diff --git a/crates/ironhtml-tailwind/Cargo.toml b/crates/ironhtml-tailwind/Cargo.toml
index 25106b4..370a567 100644
--- a/crates/ironhtml-tailwind/Cargo.toml
+++ b/crates/ironhtml-tailwind/Cargo.toml
@@ -12,5 +12,5 @@ categories = ["web-programming"]
 workspace = true
 
 [dependencies]
-ironhtml.workspace = true
+ironhtml = { workspace = true, features = ["macros"] }
 ironhtml-elements.workspace = true
diff --git a/crates/ironhtml-tailwind/README.md b/crates/ironhtml-tailwind/README.md
index 0173fc1..e8225d8 100644
--- a/crates/ironhtml-tailwind/README.md
+++ b/crates/ironhtml-tailwind/README.md
@@ -24,7 +24,33 @@ ironhtml-tailwind = "1.0"
 
 ## Usage
 
-### Basic Example
+### With html! Macro (Recommended)
+
+The html! macro provides the most ergonomic syntax for building HTML with Tailwind:
+
+```rust
+use ironhtml::html;
+
+let card = html! {
+    div.class("bg-white rounded-lg shadow-md p-6 hover:shadow-lg") {
+        h2.class("text-2xl font-bold text-gray-900 mb-2") {
+            "Welcome"
+        }
+        p.class("text-gray-600 mb-4") {
+            "Type-safe HTML with Tailwind utilities"
+        }
+        button.class("bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600") {
+            "Get Started"
+        }
+    }
+};
+```
+
+See the [macro example](examples/tailwind_macro.rs) for a complete demonstration.
+
+### With Typed API
+
+For type-safe Tailwind utilities:
 
 ```rust
 use ironhtml::typed::Element;
@@ -163,13 +189,17 @@ element.tw_raw("custom-utility-class")
 
 ## Examples
 
-Run the included example:
+Run the included examples:
 
 ```bash
+# Type-safe Tailwind utilities example
 cargo run --example tailwind_demo
+
+# html! macro with Tailwind example
+cargo run --example tailwind_macro
 ```
 
-This generates a complete HTML page demonstrating various Tailwind utilities.
+Both examples generate complete HTML pages demonstrating various Tailwind utilities.
 
 ## License
 
diff --git a/crates/ironhtml-tailwind/examples/tailwind_macro.rs b/crates/ironhtml-tailwind/examples/tailwind_macro.rs
new file mode 100644
index 0000000..3a3d295
--- /dev/null
+++ b/crates/ironhtml-tailwind/examples/tailwind_macro.rs
@@ -0,0 +1,152 @@
+//! Example demonstrating Tailwind CSS with the html! macro
+//!
+//! Run with: `cargo run --example tailwind_macro`
+
+use ironhtml::html;
+
+#[allow(clippy::too_many_lines)]
+fn main() {
+    // Simple card component using html! macro with Tailwind classes
+    let card = html! {
+        div.class("bg-white rounded-lg shadow-md p-6 hover:shadow-lg") {
+            h2.class("text-2xl font-bold text-gray-900 mb-2") {
+                "Welcome to ironhtml"
+            }
+            p.class("text-gray-600 mb-4") {
+                "Type-safe HTML with Tailwind CSS utilities"
+            }
+            button.class("bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600") {
+                "Get Started"
+            }
+        }
+    };
+
+    println!("<!-- Card Component -->");
+    println!("{}", card.render());
+    println!();
+
+    // Responsive grid layout with dynamic content
+    let features = vec![
+        ("Fast", "Blazing fast compilation"),
+        ("Safe", "Type-safe at compile time"),
+        ("Easy", "Intuitive API design"),
+    ];
+
+    let grid = html! {
+        div.class("grid grid-cols-1 md:grid-cols-3 gap-6") {
+            for feature in #features {
+                div.class("bg-gray-50 p-6 rounded-lg border border-gray-200") {
+                    h3.class("text-xl font-bold text-blue-700 mb-2") {
+                        #feature.0
+                    }
+                    p.class("text-gray-600") {
+                        #feature.1
+                    }
+                }
+            }
+        }
+    };
+
+    println!("<!-- Feature Grid -->");
+    println!("{}", grid.render());
+    println!();
+
+    // Conditional rendering with state
+    let is_active = true;
+    let status_badge = html! {
+        div.class("inline-flex items-center") {
+            if #is_active {
+                span.class("bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium") {
+                    "Active"
+                }
+            }
+        }
+    };
+
+    println!("<!-- Status Badge -->");
+    println!("{}", status_badge.render());
+    println!();
+
+    // Complete page with Tailwind CDN
+    let page = html! {
+        html {
+            head {
+                meta.charset("UTF-8")
+                meta.name("viewport").content("width=device-width, initial-scale=1.0")
+                title { "Tailwind Macro Demo" }
+                script.src("https://cdn.tailwindcss.com") { }
+            }
+            body.class("bg-gray-50 min-h-screen") {
+                div.class("container mx-auto px-4 py-8") {
+                    h1.class("text-4xl font-bold text-gray-900 mb-8") {
+                        "Tailwind CSS with html! Macro"
+                    }
+                    
+                    // Hero section
+                    div.class("bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl p-8 mb-8") {
+                        h2.class("text-3xl font-bold mb-4") {
+                            "Build Beautiful UIs"
+                        }
+                        p.class("text-lg mb-6") {
+                            "Combine the power of Rust's type system with Tailwind CSS"
+                        }
+                        div.class("flex gap-4") {
+                            button.class("bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100") {
+                                "Learn More"
+                            }
+                            button.class("border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600") {
+                                "Documentation"
+                            }
+                        }
+                    }
+
+                    // Feature cards
+                    div.class("grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8") {
+                        div.class("bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow") {
+                            div.class("text-4xl mb-4") { "🚀" }
+                            h3.class("text-xl font-bold mb-2") { "Fast Development" }
+                            p.class("text-gray-600") {
+                                "Rapid prototyping with utility-first CSS"
+                            }
+                        }
+                        div.class("bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow") {
+                            div.class("text-4xl mb-4") { "🛡️" }
+                            h3.class("text-xl font-bold mb-2") { "Type Safety" }
+                            p.class("text-gray-600") {
+                                "Catch errors at compile time, not runtime"
+                            }
+                        }
+                        div.class("bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow") {
+                            div.class("text-4xl mb-4") { "📦" }
+                            h3.class("text-xl font-bold mb-2") { "No Dependencies" }
+                            p.class("text-gray-600") {
+                                "Pure Rust with no JavaScript build step"
+                            }
+                        }
+                    }
+
+                    // Code example section
+                    div.class("bg-gray-900 text-gray-100 rounded-lg p-6") {
+                        h3.class("text-xl font-bold mb-4 text-white") {
+                            "Example Usage"
+                        }
+                        pre.class("bg-gray-800 p-4 rounded overflow-x-auto") {
+                            code.class("text-sm") {
+"let card = html! {
+    div.class(\"bg-white p-6 rounded shadow\") {
+        h2.class(\"text-xl font-bold\") { \"Hello\" }
+        p.class(\"text-gray-600\") { \"World\" }
+    }
+};"
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    };
+
+    println!("<!-- Full Page -->");
+    println!("<!DOCTYPE html>");
+    println!("{}", page.render());
+}
diff --git a/crates/ironhtml-tailwind/src/borders.rs b/crates/ironhtml-tailwind/src/borders.rs
index f870745..2ebe582 100644
--- a/crates/ironhtml-tailwind/src/borders.rs
+++ b/crates/ironhtml-tailwind/src/borders.rs
@@ -149,6 +149,8 @@ impl TailwindClass for BorderColor {
 }
 
 /// Border radius utilities
+///
+/// See [Tailwind CSS Border Radius Documentation](https://tailwindcss.com/docs/border-radius)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum BorderRadius {
     /// rounded-none
diff --git a/crates/ironhtml-tailwind/src/effects.rs b/crates/ironhtml-tailwind/src/effects.rs
index 6494c53..0f078fc 100644
--- a/crates/ironhtml-tailwind/src/effects.rs
+++ b/crates/ironhtml-tailwind/src/effects.rs
@@ -40,6 +40,8 @@ impl TailwindClass for Shadow {
 }
 
 /// Opacity utilities
+///
+/// See [Tailwind CSS Opacity Documentation](https://tailwindcss.com/docs/opacity)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum Opacity {
     /// opacity-0
diff --git a/crates/ironhtml-tailwind/src/flexbox.rs b/crates/ironhtml-tailwind/src/flexbox.rs
index 77d679d..e3c5849 100644
--- a/crates/ironhtml-tailwind/src/flexbox.rs
+++ b/crates/ironhtml-tailwind/src/flexbox.rs
@@ -24,6 +24,8 @@ impl TailwindClass for FlexDirection {
 }
 
 /// Justify content utilities
+///
+/// See [Tailwind CSS Justify Content Documentation](https://tailwindcss.com/docs/justify-content)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum JustifyContent {
     Start,
@@ -50,6 +52,8 @@ impl TailwindClass for JustifyContent {
 }
 
 /// Align items utilities
+///
+/// See [Tailwind CSS Align Items Documentation](https://tailwindcss.com/docs/align-items)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum AlignItems {
     Start,
diff --git a/crates/ironhtml-tailwind/src/grid.rs b/crates/ironhtml-tailwind/src/grid.rs
index e770f40..8a81715 100644
--- a/crates/ironhtml-tailwind/src/grid.rs
+++ b/crates/ironhtml-tailwind/src/grid.rs
@@ -23,6 +23,8 @@ impl TailwindClass for GridCols {
 }
 
 /// Grid rows utilities
+///
+/// See [Tailwind CSS Grid Template Rows Documentation](https://tailwindcss.com/docs/grid-template-rows)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum GridRows {
     /// grid-rows-{n}
@@ -41,6 +43,8 @@ impl TailwindClass for GridRows {
 }
 
 /// Gap utilities
+///
+/// See [Tailwind CSS Gap Documentation](https://tailwindcss.com/docs/gap)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum Gap {
     /// gap-{n}
diff --git a/crates/ironhtml-tailwind/src/layout.rs b/crates/ironhtml-tailwind/src/layout.rs
index 717b245..921051e 100644
--- a/crates/ironhtml-tailwind/src/layout.rs
+++ b/crates/ironhtml-tailwind/src/layout.rs
@@ -42,6 +42,8 @@ impl TailwindClass for Display {
 }
 
 /// Position utilities
+///
+/// See [Tailwind CSS Position Documentation](https://tailwindcss.com/docs/position)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum Position {
     Static,
@@ -64,6 +66,8 @@ impl TailwindClass for Position {
 }
 
 /// Overflow utilities
+///
+/// See [Tailwind CSS Overflow Documentation](https://tailwindcss.com/docs/overflow)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum Overflow {
     Auto,
diff --git a/crates/ironhtml-tailwind/src/sizing.rs b/crates/ironhtml-tailwind/src/sizing.rs
index 5186f87..fcf443a 100644
--- a/crates/ironhtml-tailwind/src/sizing.rs
+++ b/crates/ironhtml-tailwind/src/sizing.rs
@@ -44,6 +44,8 @@ impl TailwindClass for Width {
 }
 
 /// Height utilities
+///
+/// See [Tailwind CSS Height Documentation](https://tailwindcss.com/docs/height)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum Height {
     /// h-{n}
diff --git a/crates/ironhtml-tailwind/src/spacing.rs b/crates/ironhtml-tailwind/src/spacing.rs
index 183e2b2..15bbbce 100644
--- a/crates/ironhtml-tailwind/src/spacing.rs
+++ b/crates/ironhtml-tailwind/src/spacing.rs
@@ -26,6 +26,8 @@ pub enum Padding {
 }
 
 /// Margin utilities (m-*, mx-*, my-*, mt-*, mb-*, ml-*, mr-*)
+///
+/// See [Tailwind CSS Margin Documentation](https://tailwindcss.com/docs/margin)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum Margin {
     /// Margin on all sides (m-*)
diff --git a/crates/ironhtml-tailwind/src/typography.rs b/crates/ironhtml-tailwind/src/typography.rs
index 3932b4a..55ce874 100644
--- a/crates/ironhtml-tailwind/src/typography.rs
+++ b/crates/ironhtml-tailwind/src/typography.rs
@@ -43,6 +43,8 @@ impl TailwindClass for FontSize {
 }
 
 /// Font weight utilities
+///
+/// See [Tailwind CSS Font Weight Documentation](https://tailwindcss.com/docs/font-weight)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum FontWeight {
     Thin,
@@ -73,6 +75,8 @@ impl TailwindClass for FontWeight {
 }
 
 /// Text alignment utilities
+///
+/// See [Tailwind CSS Text Align Documentation](https://tailwindcss.com/docs/text-align)
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum TextAlign {
     Left,

From 201058959d60feca91d638b9bebb58108019ba3d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 8 Feb 2026 03:17:48 +0000
Subject: [PATCH 6/6] Update tailwind_macro example to use type-safe .tw()
 utilities

The example now demonstrates three approaches:
1. Simple html! macro with raw string classes (for comparison)
2. Type-safe component functions using .tw() methods
3. Complete page built with type-safe Tailwind utilities

This shows how to get type safety while still using familiar HTML-like syntax.

Co-authored-by: dannywillems <6018454+dannywillems@users.noreply.github.com>
---
 .../examples/tailwind_macro.rs                | 384 ++++++++++++------
 1 file changed, 256 insertions(+), 128 deletions(-)

diff --git a/crates/ironhtml-tailwind/examples/tailwind_macro.rs b/crates/ironhtml-tailwind/examples/tailwind_macro.rs
index 3a3d295..0a8c1a8 100644
--- a/crates/ironhtml-tailwind/examples/tailwind_macro.rs
+++ b/crates/ironhtml-tailwind/examples/tailwind_macro.rs
@@ -1,152 +1,280 @@
-//! Example demonstrating Tailwind CSS with the html! macro
+//! Example demonstrating type-safe Tailwind CSS with the html! macro
+//!
+//! This example shows how to combine the html! macro with type-safe Tailwind utilities.
+//! Since the macro doesn't directly support `.tw()` methods, we use helper functions to
+//! create type-safe components that can be used within the macro.
 //!
 //! Run with: `cargo run --example tailwind_macro`
 
 use ironhtml::html;
+use ironhtml::typed::Element;
+use ironhtml_elements::{
+    Body, Button, Div, H1, H2, H3, Head, Html, Meta, P, Script, Title,
+};
+use ironhtml_tailwind::{
+    BackgroundColor, BorderColor, BorderRadius, BorderWidth, Display, FontSize, FontWeight, Gap,
+    GridCols, Height, Margin, Padding, Shadow, TailwindElement, TextColor,
+};
+
+// Helper function to create a type-safe card component
+fn card_component() -> Element<Div> {
+    Element::<Div>::new()
+        .tw(BackgroundColor::White)
+        .tw(BorderRadius::Lg)
+        .tw(Shadow::Md)
+        .tw(Padding::All(6))
+        .tw_hover(Shadow::Lg)
+        .child::<H2, _>(|h| {
+            h.tw(FontSize::Xl2)
+                .tw(FontWeight::Bold)
+                .tw(TextColor::Gray(900))
+                .tw(Margin::B(2))
+                .text("Welcome to ironhtml")
+        })
+        .child::<P, _>(|p| {
+            p.tw(TextColor::Gray(600))
+                .tw(Margin::B(4))
+                .text("Type-safe HTML with Tailwind CSS utilities")
+        })
+        .child::<Button, _>(|_| {
+            button_component("Get Started")
+        })
+}
+
+// Type-safe button component
+fn button_component(text: &str) -> Element<Button> {
+    Element::<Button>::new()
+        .tw(BackgroundColor::Blue(500))
+        .tw(TextColor::White)
+        .tw(Padding::X(4))
+        .tw(Padding::Y(2))
+        .tw(BorderRadius::Default)
+        .tw_hover(BackgroundColor::Blue(600))
+        .text(text)
+}
+
+// Type-safe feature card
+fn feature_card(_icon: &str, title: &str, description: &str) -> Element<Div> {
+    Element::<Div>::new()
+        .tw(BackgroundColor::Gray(50))
+        .tw(Padding::All(6))
+        .tw(BorderRadius::Lg)
+        .tw(BorderWidth::Default)
+        .tw(BorderColor::Gray(200))
+        .child::<H3, _>(|h| {
+            h.tw(FontSize::Xl)
+                .tw(FontWeight::Bold)
+                .tw(TextColor::Blue(700))
+                .tw(Margin::B(2))
+                .text(title)
+        })
+        .child::<P, _>(|p| {
+            p.tw(TextColor::Gray(600))
+                .text(description)
+        })
+}
+
+// Type-safe hero section
+fn hero_section() -> Element<Div> {
+    Element::<Div>::new()
+        .tw_raw("bg-gradient-to-r from-blue-500 to-purple-600")
+        .tw(TextColor::White)
+        .tw(BorderRadius::Xl)
+        .tw(Padding::All(8))
+        .tw(Margin::B(8))
+        .child::<H2, _>(|h| {
+            h.tw(FontSize::Xl3)
+                .tw(FontWeight::Bold)
+                .tw(Margin::B(4))
+                .text("Build Beautiful UIs")
+        })
+        .child::<P, _>(|p| {
+            p.tw(FontSize::Lg)
+                .tw(Margin::B(6))
+                .text("Combine the power of Rust's type system with Tailwind CSS")
+        })
+        .child::<Div, _>(|d| {
+            d.tw(Display::Flex)
+                .tw(Gap::All(4))
+                .child::<Button, _>(|_| {
+                    Element::<Button>::new()
+                        .tw(BackgroundColor::White)
+                        .tw(TextColor::Blue(600))
+                        .tw(Padding::X(6))
+                        .tw(Padding::Y(3))
+                        .tw(BorderRadius::Lg)
+                        .tw(FontWeight::SemiBold)
+                        .tw_hover(BackgroundColor::Gray(100))
+                        .text("Learn More")
+                })
+                .child::<Button, _>(|_| {
+                    Element::<Button>::new()
+                        .tw(BorderWidth::Width2)
+                        .tw(BorderColor::White)
+                        .tw(Padding::X(6))
+                        .tw(Padding::Y(3))
+                        .tw(BorderRadius::Lg)
+                        .tw(FontWeight::SemiBold)
+                        .tw_hover(BackgroundColor::White)
+                        .tw_hover(TextColor::Blue(600))
+                        .text("Documentation")
+                })
+        })
+}
 
 #[allow(clippy::too_many_lines)]
 fn main() {
-    // Simple card component using html! macro with Tailwind classes
-    let card = html! {
-        div.class("bg-white rounded-lg shadow-md p-6 hover:shadow-lg") {
-            h2.class("text-2xl font-bold text-gray-900 mb-2") {
-                "Welcome to ironhtml"
-            }
-            p.class("text-gray-600 mb-4") {
-                "Type-safe HTML with Tailwind CSS utilities"
-            }
-            button.class("bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600") {
-                "Get Started"
-            }
+    // Approach 1: Use html! macro with raw class strings (simple, but not type-safe)
+    let simple_card = html! {
+        div.class("bg-white rounded-lg shadow-md p-6") {
+            h2.class("text-2xl font-bold mb-2") { "Simple Card" }
+            p.class("text-gray-600") { "Using raw Tailwind classes" }
         }
     };
 
-    println!("<!-- Card Component -->");
-    println!("{}", card.render());
+    println!("<!-- Simple Card (raw strings) -->");
+    println!("{}", simple_card.render());
+    println!();
+
+    // Approach 2: Use type-safe component functions
+    println!("<!-- Type-safe Card Component -->");
+    println!("{}", card_component().render());
     println!();
 
-    // Responsive grid layout with dynamic content
+    // Approach 3: Mix html! macro for structure with type-safe utilities
     let features = vec![
         ("Fast", "Blazing fast compilation"),
         ("Safe", "Type-safe at compile time"),
         ("Easy", "Intuitive API design"),
     ];
 
-    let grid = html! {
-        div.class("grid grid-cols-1 md:grid-cols-3 gap-6") {
-            for feature in #features {
-                div.class("bg-gray-50 p-6 rounded-lg border border-gray-200") {
-                    h3.class("text-xl font-bold text-blue-700 mb-2") {
-                        #feature.0
-                    }
-                    p.class("text-gray-600") {
-                        #feature.1
-                    }
-                }
-            }
-        }
-    };
+    // Use type-safe wrapper for grid
+    let grid = Element::<Div>::new()
+        .tw(Display::Grid)
+        .tw(GridCols::Cols(1))
+        .tw_md(GridCols::Cols(3))
+        .tw(Gap::All(6))
+        .children::<Div, _, _>(features, |feature, _| {
+            feature_card("", feature.0, feature.1)
+        });
 
-    println!("<!-- Feature Grid -->");
+    println!("<!-- Feature Grid (type-safe) -->");
     println!("{}", grid.render());
     println!();
 
-    // Conditional rendering with state
-    let is_active = true;
-    let status_badge = html! {
-        div.class("inline-flex items-center") {
-            if #is_active {
-                span.class("bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium") {
-                    "Active"
-                }
-            }
-        }
-    };
-
-    println!("<!-- Status Badge -->");
-    println!("{}", status_badge.render());
-    println!();
-
-    // Complete page with Tailwind CDN
-    let page = html! {
-        html {
-            head {
-                meta.charset("UTF-8")
-                meta.name("viewport").content("width=device-width, initial-scale=1.0")
-                title { "Tailwind Macro Demo" }
-                script.src("https://cdn.tailwindcss.com") { }
-            }
-            body.class("bg-gray-50 min-h-screen") {
-                div.class("container mx-auto px-4 py-8") {
-                    h1.class("text-4xl font-bold text-gray-900 mb-8") {
-                        "Tailwind CSS with html! Macro"
-                    }
-                    
-                    // Hero section
-                    div.class("bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl p-8 mb-8") {
-                        h2.class("text-3xl font-bold mb-4") {
-                            "Build Beautiful UIs"
-                        }
-                        p.class("text-lg mb-6") {
-                            "Combine the power of Rust's type system with Tailwind CSS"
-                        }
-                        div.class("flex gap-4") {
-                            button.class("bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100") {
-                                "Learn More"
-                            }
-                            button.class("border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600") {
-                                "Documentation"
-                            }
-                        }
-                    }
-
-                    // Feature cards
-                    div.class("grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8") {
-                        div.class("bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow") {
-                            div.class("text-4xl mb-4") { "🚀" }
-                            h3.class("text-xl font-bold mb-2") { "Fast Development" }
-                            p.class("text-gray-600") {
-                                "Rapid prototyping with utility-first CSS"
-                            }
-                        }
-                        div.class("bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow") {
-                            div.class("text-4xl mb-4") { "🛡️" }
-                            h3.class("text-xl font-bold mb-2") { "Type Safety" }
-                            p.class("text-gray-600") {
-                                "Catch errors at compile time, not runtime"
-                            }
-                        }
-                        div.class("bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow") {
-                            div.class("text-4xl mb-4") { "📦" }
-                            h3.class("text-xl font-bold mb-2") { "No Dependencies" }
-                            p.class("text-gray-600") {
-                                "Pure Rust with no JavaScript build step"
-                            }
-                        }
-                    }
-
-                    // Code example section
-                    div.class("bg-gray-900 text-gray-100 rounded-lg p-6") {
-                        h3.class("text-xl font-bold mb-4 text-white") {
-                            "Example Usage"
-                        }
-                        pre.class("bg-gray-800 p-4 rounded overflow-x-auto") {
-                            code.class("text-sm") {
-"let card = html! {
-    div.class(\"bg-white p-6 rounded shadow\") {
-        h2.class(\"text-xl font-bold\") { \"Hello\" }
-        p.class(\"text-gray-600\") { \"World\" }
-    }
-};"
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    };
+    // Approach 4: Build entire page with type-safe utilities
+    let page = ironhtml::typed::Document::new()
+        .doctype()
+        .root::<Html, _>(|html| {
+            html.attr("lang", "en")
+                .child::<Head, _>(|head| {
+                    head.child::<Meta, _>(|m| m.attr("charset", "UTF-8"))
+                        .child::<Meta, _>(|m| {
+                            m.attr("name", "viewport")
+                                .attr("content", "width=device-width, initial-scale=1.0")
+                        })
+                        .child::<Title, _>(|t| t.text("Type-Safe Tailwind Demo"))
+                        .child::<Script, _>(|s| {
+                            s.attr("src", "https://cdn.tailwindcss.com")
+                        })
+                })
+                .child::<Body, _>(|body| {
+                    body.tw(BackgroundColor::Gray(50))
+                        .tw(Height::Screen)
+                        .child::<Div, _>(|container| {
+                            container
+                                .tw_raw("container mx-auto")
+                                .tw(Padding::X(4))
+                                .tw(Padding::Y(8))
+                                .child::<H1, _>(|h| {
+                                    h.tw(FontSize::Xl4)
+                                        .tw(FontWeight::Bold)
+                                        .tw(TextColor::Gray(900))
+                                        .tw(Margin::B(8))
+                                        .text("Type-Safe Tailwind CSS")
+                                })
+                                .child::<Div, _>(|_| hero_section())
+                                .child::<Div, _>(|grid_container| {
+                                    grid_container
+                                        .tw(Display::Grid)
+                                        .tw(GridCols::Cols(1))
+                                        .tw_md(GridCols::Cols(3))
+                                        .tw(Gap::All(6))
+                                        .child::<Div, _>(|_| {
+                                            Element::<Div>::new()
+                                                .tw(BackgroundColor::White)
+                                                .tw(Padding::All(6))
+                                                .tw(BorderRadius::Lg)
+                                                .tw(Shadow::Default)
+                                                .tw_hover(Shadow::Lg)
+                                                .child::<Div, _>(|d| {
+                                                    d.tw(FontSize::Xl4)
+                                                        .tw(Margin::B(4))
+                                                        .text("🚀")
+                                                })
+                                                .child::<H3, _>(|h| {
+                                                    h.tw(FontSize::Xl)
+                                                        .tw(FontWeight::Bold)
+                                                        .tw(Margin::B(2))
+                                                        .text("Fast Development")
+                                                })
+                                                .child::<P, _>(|p| {
+                                                    p.tw(TextColor::Gray(600))
+                                                        .text("Type-safe Tailwind utilities")
+                                                })
+                                        })
+                                        .child::<Div, _>(|_| {
+                                            Element::<Div>::new()
+                                                .tw(BackgroundColor::White)
+                                                .tw(Padding::All(6))
+                                                .tw(BorderRadius::Lg)
+                                                .tw(Shadow::Default)
+                                                .tw_hover(Shadow::Lg)
+                                                .child::<Div, _>(|d| {
+                                                    d.tw(FontSize::Xl4)
+                                                        .tw(Margin::B(4))
+                                                        .text("🛡️")
+                                                })
+                                                .child::<H3, _>(|h| {
+                                                    h.tw(FontSize::Xl)
+                                                        .tw(FontWeight::Bold)
+                                                        .tw(Margin::B(2))
+                                                        .text("Type Safety")
+                                                })
+                                                .child::<P, _>(|p| {
+                                                    p.tw(TextColor::Gray(600))
+                                                        .text("Compile-time guarantees")
+                                                })
+                                        })
+                                        .child::<Div, _>(|_| {
+                                            Element::<Div>::new()
+                                                .tw(BackgroundColor::White)
+                                                .tw(Padding::All(6))
+                                                .tw(BorderRadius::Lg)
+                                                .tw(Shadow::Default)
+                                                .tw_hover(Shadow::Lg)
+                                                .child::<Div, _>(|d| {
+                                                    d.tw(FontSize::Xl4)
+                                                        .tw(Margin::B(4))
+                                                        .text("📦")
+                                                })
+                                                .child::<H3, _>(|h| {
+                                                    h.tw(FontSize::Xl)
+                                                        .tw(FontWeight::Bold)
+                                                        .tw(Margin::B(2))
+                                                        .text("No Dependencies")
+                                                })
+                                                .child::<P, _>(|p| {
+                                                    p.tw(TextColor::Gray(600))
+                                                        .text("Pure Rust implementation")
+                                                })
+                                        })
+                                })
+                        })
+                })
+        })
+        .build();
 
-    println!("<!-- Full Page -->");
-    println!("<!DOCTYPE html>");
-    println!("{}", page.render());
+    println!("<!-- Full Type-Safe Page -->");
+    println!("{page}");
 }