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..370a567
--- /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, features = ["macros"] }
+ironhtml-elements.workspace = true
diff --git a/crates/ironhtml-tailwind/README.md b/crates/ironhtml-tailwind/README.md
new file mode 100644
index 0000000..e8225d8
--- /dev/null
+++ b/crates/ironhtml-tailwind/README.md
@@ -0,0 +1,206 @@
+# 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
+
+### 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;
+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 examples:
+
+```bash
+# Type-safe Tailwind utilities example
+cargo run --example tailwind_demo
+
+# html! macro with Tailwind example
+cargo run --example tailwind_macro
+```
+
+Both examples generate complete HTML pages 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..4f7c2ac
--- /dev/null
+++ b/crates/ironhtml-tailwind/examples/tailwind_demo.rs
@@ -0,0 +1,225 @@
+//! Example demonstrating type-safe Tailwind CSS usage with ironhtml
+//!
+//! Run with: `cargo run --example tailwind_demo`
+
+use ironhtml::typed::{Document, Element};
+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()
+        .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/examples/tailwind_macro.rs b/crates/ironhtml-tailwind/examples/tailwind_macro.rs
new file mode 100644
index 0000000..0a8c1a8
--- /dev/null
+++ b/crates/ironhtml-tailwind/examples/tailwind_macro.rs
@@ -0,0 +1,280 @@
+//! 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() {
+    // 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!("<!-- 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!();
+
+    // 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"),
+    ];
+
+    // 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 (type-safe) -->");
+    println!("{}", grid.render());
+    println!();
+
+    // 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 Type-Safe Page -->");
+    println!("{page}");
+}
diff --git a/crates/ironhtml-tailwind/src/backgrounds.rs b/crates/ironhtml-tailwind/src/backgrounds.rs
new file mode 100644
index 0000000..27bc8b1
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/backgrounds.rs
@@ -0,0 +1,94 @@
+//! Background utilities
+
+use crate::TailwindClass;
+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),
+    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..2ebe582
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/borders.rs
@@ -0,0 +1,219 @@
+//! Border utilities
+
+use crate::TailwindClass;
+use alloc::format;
+use alloc::string::String;
+
+/// 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)
+///
+/// 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),
+    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
+///
+/// See [Tailwind CSS Border Radius Documentation](https://tailwindcss.com/docs/border-radius)
+#[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..0f078fc
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/effects.rs
@@ -0,0 +1,119 @@
+//! Effects utilities: shadows and opacity
+
+use crate::TailwindClass;
+use alloc::string::String;
+
+/// 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
+///
+/// See [Tailwind CSS Opacity Documentation](https://tailwindcss.com/docs/opacity)
+#[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..e3c5849
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/flexbox.rs
@@ -0,0 +1,102 @@
+//! Flexbox utilities
+
+use crate::TailwindClass;
+use alloc::string::String;
+
+/// 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
+///
+/// See [Tailwind CSS Justify Content Documentation](https://tailwindcss.com/docs/justify-content)
+#[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
+///
+/// See [Tailwind CSS Align Items Documentation](https://tailwindcss.com/docs/align-items)
+#[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..8a81715
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/grid.rs
@@ -0,0 +1,91 @@
+//! Grid utilities
+
+use crate::TailwindClass;
+use alloc::format;
+use alloc::string::String;
+
+/// 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
+///
+/// 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}
+    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
+///
+/// See [Tailwind CSS Gap Documentation](https://tailwindcss.com/docs/gap)
+#[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..921051e
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/layout.rs
@@ -0,0 +1,143 @@
+//! Layout utilities: display, position, overflow
+
+use crate::TailwindClass;
+use alloc::string::String;
+
+/// 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
+///
+/// See [Tailwind CSS Position Documentation](https://tailwindcss.com/docs/position)
+#[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
+///
+/// See [Tailwind CSS Overflow Documentation](https://tailwindcss.com/docs/overflow)
+#[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..e4ce395
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/lib.rs
@@ -0,0 +1,373 @@
+//! # 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 backgrounds;
+mod borders;
+mod effects;
+mod flexbox;
+mod grid;
+mod layout;
+mod sizing;
+mod spacing;
+mod typography;
+
+// Re-export utility types
+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 spacing::{Margin, Padding};
+pub use typography::{FontSize, FontWeight, TextAlign, TextColor};
+
+/// 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
+    #[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;
+}
+
+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..fcf443a
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/sizing.rs
@@ -0,0 +1,122 @@
+//! Sizing utilities: width and height
+
+use crate::TailwindClass;
+use alloc::format;
+use alloc::string::String;
+
+/// 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
+///
+/// See [Tailwind CSS Height Documentation](https://tailwindcss.com/docs/height)
+#[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..15bbbce
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/spacing.rs
@@ -0,0 +1,199 @@
+//! Spacing utilities: padding and margin
+
+use crate::TailwindClass;
+use alloc::format;
+use alloc::string::String;
+
+/// 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-*)
+///
+/// See [Tailwind CSS Margin Documentation](https://tailwindcss.com/docs/margin)
+#[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..55ce874
--- /dev/null
+++ b/crates/ironhtml-tailwind/src/typography.rs
@@ -0,0 +1,237 @@
+//! Typography utilities: font size, weight, text align, and color
+
+use crate::TailwindClass;
+use alloc::format;
+use alloc::string::String;
+
+/// 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
+///
+/// See [Tailwind CSS Font Weight Documentation](https://tailwindcss.com/docs/font-weight)
+#[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
+///
+/// See [Tailwind CSS Text Align Documentation](https://tailwindcss.com/docs/text-align)
+#[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
+///
+/// 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
+    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");
+    }
+}