Remove legacy examples and keep only numbered tutorial sequence

-65

examples/advanced_features.ml

··· 1 - let () = 2 - Printf.printf "=== Advanced Tailwind Features ===\n"; 3 - 4 - (* V4 Container Queries *) 5 - let container_responsive = Tailwind.V4.container_query `Lg 6 - (Tailwind.Css.make "text-2xl") in 7 - Printf.printf "Container Query (V4): %s\n" (Tailwind.to_string container_responsive); 8 - 9 - (* V4 Starting Style *) 10 - let starting_animation = Tailwind.V4.starting_style 11 - (Tailwind.Css.make "opacity-0") in 12 - Printf.printf "Starting Style (V4): %s\n" (Tailwind.to_string starting_animation); 13 - 14 - (* V4 Text Shadow *) 15 - let text_shadow = Tailwind.V4.text_shadow `Lg in 16 - Printf.printf "Text Shadow (V4): %s\n" (Tailwind.to_string text_shadow); 17 - 18 - (* Advanced Variants - Pseudo-classes *) 19 - let hover_effect = Tailwind.Variants.hover (Tailwind.Css.make "bg-blue-600") in 20 - Printf.printf "Hover Effect: %s\n" (Tailwind.to_string hover_effect); 21 - 22 - let focus_visible = Tailwind.Variants.apply 23 - (Tailwind.Variants.pseudo `Focus_visible (Tailwind.Css.make "ring-2")) 24 - (Tailwind.Css.make "input") in 25 - Printf.printf "Focus Visible: %s\n" (Tailwind.to_string focus_visible); 26 - 27 - (* Responsive with Media Features *) 28 - let dark_mode = Tailwind.Responsive.(apply 29 - (media `Dark (Tailwind.Css.make "bg-gray-900")) 30 - (Tailwind.Css.make "bg-white")) in 31 - Printf.printf "Dark Mode: %s\n" (Tailwind.to_string dark_mode); 32 - 33 - let motion_safe = Tailwind.Responsive.(apply 34 - (media `Motion_safe (Tailwind.Css.make "transition-all")) 35 - (Tailwind.Css.make "transform")) in 36 - Printf.printf "Motion Safe: %s\n" (Tailwind.to_string motion_safe); 37 - 38 - (* Advanced Effects *) 39 - let backdrop_blur = Tailwind.Effects.(to_class (backdrop_blur `Lg)) in 40 - Printf.printf "Backdrop Blur: %s\n" (Tailwind.to_string backdrop_blur); 41 - 42 - let transform_origin = Tailwind.Effects.(to_class (transform_origin `Top_right)) in 43 - Printf.printf "Transform Origin: %s\n" (Tailwind.to_string transform_origin); 44 - 45 - let scale_transform = Tailwind.Effects.(to_class (scale `X 125)) in 46 - Printf.printf "Scale Transform: %s\n" (Tailwind.to_string scale_transform); 47 - 48 - let rotate_transform = Tailwind.Effects.(to_class (rotate 45)) in 49 - Printf.printf "Rotate Transform: %s\n" (Tailwind.to_string rotate_transform); 50 - 51 - let translate_transform = Tailwind.Effects.(to_class (translate `Y (Tailwind.Size.rem 2.0))) in 52 - Printf.printf "Translate Transform: %s\n" (Tailwind.to_string translate_transform); 53 - 54 - (* Complex Combination *) 55 - let complex_card = Tailwind.tw [ 56 - Tailwind.Color.bg (Tailwind.Color.make `White ()); 57 - Tailwind.Effects.rounded_lg; 58 - Tailwind.Effects.shadow_md; 59 - backdrop_blur; 60 - Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5))); 61 - Tailwind.Effects.(to_class (transform `Gpu)); 62 - Tailwind.Effects.transition `All; 63 - hover_effect; 64 - ] in 65 - Printf.printf "Complex Card: %s\n" (Tailwind.to_string complex_card)

-45

examples/basic_usage.ml

··· 1 - (* Basic usage examples for the Tailwind OCaml library *) 2 - 3 - (* This example shows how to use the library in its current form *) 4 - 5 - let () = 6 - (* The current implementation provides these utilities *) 7 - let flex_center_classes = Tailwind.Patterns.flex_center in 8 - let focus_ring_classes = Tailwind.focus_ring () in 9 - let container_classes = Tailwind.Patterns.container ~center:true () in 10 - 11 - (* Reset utilities *) 12 - let button_reset = Tailwind.Reset.button in 13 - let input_reset = Tailwind.Reset.input in 14 - let sr_only = Tailwind.sr_only in 15 - 16 - (* Transitions *) 17 - let transition_all = Tailwind.Effects.transition `All in 18 - let duration_300 = Tailwind.Effects.duration 300 in 19 - let ease_in_out = Tailwind.Effects.ease `In_out in 20 - 21 - (* Conditional classes *) 22 - let conditional_classes = Tailwind.class_list [ 23 - (Tailwind.Patterns.flex_center, true); 24 - (Tailwind.Reset.button, false); 25 - ] in 26 - 27 - Printf.printf "=== Tailwind OCaml Library Usage Examples ===\n"; 28 - Printf.printf "Flex center: %s\n" (Tailwind.to_string flex_center_classes); 29 - Printf.printf "Focus ring: %s\n" (Tailwind.to_string focus_ring_classes); 30 - Printf.printf "Container: %s\n" (Tailwind.to_string container_classes); 31 - Printf.printf "Button reset: %s\n" (Tailwind.to_string button_reset); 32 - Printf.printf "Input reset: %s\n" (Tailwind.to_string input_reset); 33 - Printf.printf "Screen reader only: %s\n" (Tailwind.to_string sr_only); 34 - Printf.printf "Transition all: %s\n" (Tailwind.to_string transition_all); 35 - Printf.printf "Duration 300ms: %s\n" (Tailwind.to_string duration_300); 36 - Printf.printf "Ease in-out: %s\n" (Tailwind.to_string ease_in_out); 37 - Printf.printf "Conditional classes: %s\n" (Tailwind.to_string conditional_classes); 38 - 39 - (* Combining classes *) 40 - let combined_classes = Tailwind.tw [ 41 - flex_center_classes; 42 - container_classes; 43 - transition_all; 44 - ] in 45 - Printf.printf "Combined classes: %s\n" (Tailwind.to_string combined_classes)

-287

examples/complete_demo.ml

··· 1 - (* Complete demonstration of Tailwind OCaml library with HTML generation *) 2 - 3 - open Htmlit 4 - 5 - let classes_attr tailwind_classes = 6 - At.class' (Tailwind.to_string tailwind_classes) 7 - 8 - let create_navbar () = 9 - let nav_classes = Tailwind.tw [ 10 - Tailwind.Color.bg Tailwind.Color.white; 11 - Tailwind.Effects.shadow_sm; 12 - Tailwind.Effects.border; 13 - Tailwind.Color.border (Tailwind.Color.make `Gray ~variant:`V200 ()); 14 - ] in 15 - 16 - El.nav ~at:[classes_attr nav_classes] [ 17 - El.div ~at:[classes_attr (Tailwind.tw [ 18 - Tailwind.Css.make "max-w-7xl"; 19 - Tailwind.Css.make "mx-auto"; 20 - Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 1.0))); 21 - ])] [ 22 - El.div ~at:[classes_attr (Tailwind.tw [ 23 - Tailwind.Display.flex; 24 - Tailwind.Flexbox.(to_class (justify `Between)); 25 - Tailwind.Flexbox.(to_class (align_items `Center)); 26 - Tailwind.Layout.(to_class (height (Tailwind.Size.rem 4.0))); 27 - ])] [ 28 - (* Brand *) 29 - El.div ~at:[classes_attr (Tailwind.tw [ 30 - Tailwind.Typography.(to_class (font_size `Xl)); 31 - Tailwind.Typography.(to_class (font_weight `Bold)); 32 - Tailwind.Color.text (Tailwind.Color.make `Blue ~variant:`V600 ()); 33 - ])] [El.txt "Tailwind OCaml"]; 34 - 35 - (* Navigation items *) 36 - El.div ~at:[classes_attr (Tailwind.tw [ 37 - Tailwind.Display.hidden; 38 - Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Display.flex))); 39 - Tailwind.Spacing.(to_class (gap `All (Tailwind.Size.rem 2.0))); 40 - ])] [ 41 - El.a ~at:[ 42 - At.href "#"; 43 - classes_attr (Tailwind.tw [ 44 - Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ()); 45 - Tailwind.Variants.hover (Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V900 ())); 46 - ]); 47 - ] [El.txt "Features"]; 48 - El.a ~at:[ 49 - At.href "#"; 50 - classes_attr (Tailwind.tw [ 51 - Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ()); 52 - Tailwind.Variants.hover (Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V900 ())); 53 - ]); 54 - ] [El.txt "Docs"]; 55 - El.a ~at:[ 56 - At.href "#"; 57 - classes_attr (Tailwind.tw [ 58 - Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ()); 59 - Tailwind.Variants.hover (Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V900 ())); 60 - ]); 61 - ] [El.txt "About"]; 62 - ]; 63 - 64 - (* CTA Button *) 65 - El.button ~at:[classes_attr (Tailwind.tw [ 66 - Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ()); 67 - Tailwind.Color.text Tailwind.Color.white; 68 - Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 1.0))); 69 - Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 0.5))); 70 - Tailwind.Effects.rounded_md; 71 - Tailwind.Typography.(to_class (font_size `Sm)); 72 - Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V700 ())); 73 - ])] [El.txt "Get Started"]; 74 - ]; 75 - ]; 76 - ] 77 - 78 - let create_hero () = 79 - El.section ~at:[classes_attr (Tailwind.tw [ 80 - Tailwind.Position.(to_class (position `Relative)); 81 - Tailwind.Display.flex; 82 - Tailwind.Flexbox.(to_class (align_items `Center)); 83 - Tailwind.Flexbox.(to_class (justify `Center)); 84 - Tailwind.Layout.(to_class (min_height (Tailwind.Size.screen))); 85 - Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V900 ()); 86 - Tailwind.Color.text Tailwind.Color.white; 87 - ])] [ 88 - El.div ~at:[classes_attr (Tailwind.tw [ 89 - Tailwind.Css.make "text-center"; 90 - Tailwind.Css.make "max-w-4xl"; 91 - Tailwind.Css.make "mx-auto"; 92 - Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 1.0))); 93 - ])] [ 94 - El.h1 ~at:[classes_attr (Tailwind.tw [ 95 - Tailwind.Typography.(to_class (font_size `Xl4)); 96 - Tailwind.Typography.(to_class (font_weight `Bold)); 97 - Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 1.5))); 98 - ])] [El.txt "Type-Safe Tailwind CSS for OCaml"]; 99 - 100 - El.p ~at:[classes_attr (Tailwind.tw [ 101 - Tailwind.Typography.(to_class (font_size `Xl)); 102 - Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V300 ()); 103 - Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 2.0))); 104 - ])] [El.txt "Build beautiful, responsive web interfaces with the power of OCaml's type system and Tailwind's utility classes."]; 105 - 106 - El.div ~at:[classes_attr (Tailwind.tw [ 107 - Tailwind.Display.flex; 108 - Tailwind.Flexbox.(to_class (justify `Center)); 109 - Tailwind.Spacing.(to_class (gap `All (Tailwind.Size.rem 1.0))); 110 - ])] [ 111 - El.button ~at:[classes_attr (Tailwind.tw [ 112 - Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ()); 113 - Tailwind.Color.text Tailwind.Color.white; 114 - Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 2.0))); 115 - Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 0.75))); 116 - Tailwind.Effects.rounded_lg; 117 - Tailwind.Typography.(to_class (font_size `Lg)); 118 - Tailwind.Typography.(to_class (font_weight `Medium)); 119 - Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V700 ())); 120 - ])] [El.txt "Get Started"]; 121 - 122 - El.button ~at:[classes_attr (Tailwind.tw [ 123 - Tailwind.Effects.border; 124 - Tailwind.Color.border (Tailwind.Color.make `Gray ~variant:`V300 ()); 125 - Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V300 ()); 126 - Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 2.0))); 127 - Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 0.75))); 128 - Tailwind.Effects.rounded_lg; 129 - Tailwind.Typography.(to_class (font_size `Lg)); 130 - Tailwind.Typography.(to_class (font_weight `Medium)); 131 - Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V800 ())); 132 - ])] [El.txt "View Docs"]; 133 - ]; 134 - ]; 135 - ] 136 - 137 - let create_feature_card ~icon ~title ~description = 138 - El.div ~at:[classes_attr (Tailwind.tw [ 139 - Tailwind.Effects.rounded_lg; 140 - Tailwind.Effects.border; 141 - Tailwind.Color.border (Tailwind.Color.make `Gray ~variant:`V200 ()); 142 - Tailwind.Color.bg Tailwind.Color.white; 143 - Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5))); 144 - Tailwind.Effects.shadow_sm; 145 - ])] [ 146 - El.div ~at:[classes_attr (Tailwind.tw [ 147 - Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 1.0))); 148 - ])] [El.txt icon]; 149 - 150 - El.h3 ~at:[classes_attr (Tailwind.tw [ 151 - Tailwind.Typography.(to_class (font_size `Lg)); 152 - Tailwind.Typography.(to_class (font_weight `Semibold)); 153 - Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 0.5))); 154 - ])] [El.txt title]; 155 - 156 - El.p ~at:[classes_attr (Tailwind.tw [ 157 - Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ()); 158 - ])] [El.txt description]; 159 - ] 160 - 161 - let create_features () = 162 - El.section ~at:[classes_attr (Tailwind.tw [ 163 - Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 5.0))); 164 - ])] [ 165 - El.div ~at:[classes_attr (Tailwind.tw [ 166 - Tailwind.Css.make "max-w-7xl"; 167 - Tailwind.Css.make "mx-auto"; 168 - Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 1.0))); 169 - ])] [ 170 - El.div ~at:[classes_attr (Tailwind.tw [ 171 - Tailwind.Css.make "text-center"; 172 - Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 3.0))); 173 - ])] [ 174 - El.h2 ~at:[classes_attr (Tailwind.tw [ 175 - Tailwind.Typography.(to_class (font_size `Xl3)); 176 - Tailwind.Typography.(to_class (font_weight `Bold)); 177 - Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 1.0))); 178 - ])] [El.txt "Why Choose Tailwind OCaml?"]; 179 - 180 - El.p ~at:[classes_attr (Tailwind.tw [ 181 - Tailwind.Typography.(to_class (font_size `Lg)); 182 - Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ()); 183 - ])] [El.txt "Everything you need to build modern web applications with OCaml"]; 184 - ]; 185 - 186 - El.div ~at:[classes_attr (Tailwind.tw [ 187 - Tailwind.Display.grid; 188 - Tailwind.Grid.(to_class (template_cols (`Cols 1))); 189 - Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Grid.(to_class (template_cols (`Cols 2)))))); 190 - Tailwind.Responsive.(to_class (at_breakpoint `Lg (Tailwind.Grid.(to_class (template_cols (`Cols 3)))))); 191 - Tailwind.Spacing.(to_class (gap `All (Tailwind.Size.rem 2.0))); 192 - ])] [ 193 - create_feature_card ~icon:"🔒" ~title:"Type Safety" 194 - ~description:"Catch CSS errors at compile time with OCaml's powerful type system"; 195 - create_feature_card ~icon:"⚡" ~title:"Performance" 196 - ~description:"Zero runtime overhead - all CSS classes are generated at compile time"; 197 - create_feature_card ~icon:"🎨" ~title:"Full Tailwind" 198 - ~description:"Complete coverage of Tailwind CSS v4 including the latest features"; 199 - create_feature_card ~icon:"🔧" ~title:"Composable" 200 - ~description:"Build complex layouts by composing simple, reusable utility functions"; 201 - create_feature_card ~icon:"📱" ~title:"Responsive" 202 - ~description:"First-class support for responsive design and media queries"; 203 - create_feature_card ~icon:"🚀" ~title:"Modern" 204 - ~description:"Support for CSS Grid, Flexbox, and modern web standards"; 205 - ]; 206 - ]; 207 - ] 208 - 209 - let () = 210 - Printf.printf "=== Complete Tailwind OCaml Demo ===\n"; 211 - 212 - let html_doc = El.html [ 213 - El.head [ 214 - El.meta ~at:[At.charset "utf-8"] (); 215 - El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] (); 216 - El.title [El.txt "Tailwind OCaml - Type-Safe CSS Utilities"]; 217 - El.script ~at:[At.src "https://cdn.tailwindcss.com"] []; 218 - ]; 219 - 220 - El.body [ 221 - create_navbar (); 222 - create_hero (); 223 - create_features (); 224 - ]; 225 - ] in 226 - 227 - let html_string = El.to_string ~doctype:true html_doc in 228 - 229 - Printf.printf "Generated complete website (%d characters)\n" (String.length html_string); 230 - 231 - (* Show a snippet of the generated HTML *) 232 - let preview_length = 800 in 233 - let preview = if String.length html_string > preview_length then 234 - (String.sub html_string 0 preview_length) ^ "..." 235 - else html_string in 236 - 237 - Printf.printf "\nHTML Preview:\n%s\n" preview; 238 - 239 - (* Demonstrate advanced class combinations *) 240 - Printf.printf "\n=== Advanced Class Combinations ===\n"; 241 - 242 - let responsive_card = Tailwind.tw [ 243 - (* Base styles *) 244 - Tailwind.Effects.rounded_lg; 245 - Tailwind.Color.bg Tailwind.Color.white; 246 - Tailwind.Effects.shadow_sm; 247 - 248 - (* Responsive padding *) 249 - Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.0))); 250 - Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5)))))); 251 - Tailwind.Responsive.(to_class (at_breakpoint `Lg (Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 2.0)))))); 252 - 253 - (* Hover effects *) 254 - Tailwind.Effects.transition `All; 255 - Tailwind.Variants.hover (Tailwind.Effects.shadow_md); 256 - 257 - (* Dark mode support *) 258 - Tailwind.Responsive.(to_class (media `Dark (Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V800 ())))); 259 - ] in 260 - Printf.printf "Responsive Card: %s\n" (Tailwind.to_string responsive_card); 261 - 262 - let complex_button = Tailwind.tw [ 263 - (* Button base *) 264 - Tailwind.Display.inline_flex; 265 - Tailwind.Flexbox.(to_class (align_items `Center)); 266 - Tailwind.Flexbox.(to_class (justify `Center)); 267 - Tailwind.Effects.rounded_md; 268 - 269 - (* Typography *) 270 - Tailwind.Typography.(to_class (font_size `Sm)); 271 - Tailwind.Typography.(to_class (font_weight `Medium)); 272 - 273 - (* Colors with variants *) 274 - Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ()); 275 - Tailwind.Color.text Tailwind.Color.white; 276 - Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V700 ())); 277 - Tailwind.Variants.focus (Tailwind.Css.make "focus:ring-2"); 278 - Tailwind.Variants.disabled (Tailwind.Effects.(to_class (opacity 50))); 279 - 280 - (* V4 features *) 281 - Tailwind.V4.starting_style (Tailwind.Effects.(to_class (opacity 0))); 282 - ] in 283 - Printf.printf "Complex Button: %s\n" (Tailwind.to_string complex_button); 284 - 285 - Printf.printf "\n✅ Complete demo generated successfully!\n"; 286 - Printf.printf "📄 Ready to serve as a static HTML file\n"; 287 - Printf.printf "🎨 Demonstrates full Tailwind OCaml capabilities\n"

-6

examples/dune

··· 21 21 (package tailwind) 22 22 (libraries tailwind tailwind-html htmlit unix)) 23 23 24 - ;; Legacy examples (maintained for compatibility) 25 - (executables 26 - (public_names basic_usage module_usage advanced_features simple_html_example complete_demo tailwind_html_example improved_api_demo) 27 - (names basic_usage module_usage advanced_features simple_html_example complete_demo tailwind_html_example improved_api_demo) 28 - (package tailwind) 29 - (libraries tailwind htmlit unix)) 30 24 31 25 ;; Generate HTML files from examples 32 26 (rule

-77

examples/improved_api_demo.ml

··· 1 - open Tailwind 2 - 3 - let () = 4 - Printf.printf "=== Improved Tailwind OCaml API Demo ===\n\n"; 5 - 6 - (* 1. Using the new organizational structure *) 7 - let button_classes = tw [ 8 - C.bg (Color.make `Blue ~variant:`V500 ()); 9 - C.text (Color.make `White ()); 10 - S.(to_class (px (Size.rem 1.0))); 11 - S.(to_class (py (Size.rem 0.5))); 12 - E.rounded_md; 13 - E.shadow_sm; 14 - E.transition `Colors; 15 - ] in 16 - Printf.printf "Button with short aliases: %s\n" (to_string button_classes); 17 - 18 - (* 2. Using patterns for common layouts *) 19 - let centered_card = tw [ 20 - P.card; 21 - P.flex_center; 22 - ] in 23 - Printf.printf "Centered card: %s\n" (to_string centered_card); 24 - 25 - (* 3. Reset utilities in their own module *) 26 - let form_input = tw [ 27 - R.input; 28 - C.border (Color.make `Gray ~variant:`V300 ()); 29 - E.rounded_sm; 30 - S.(to_class (p (Size.rem 0.75))); 31 - ] in 32 - Printf.printf "Form input with reset: %s\n" (to_string form_input); 33 - 34 - (* 4. Animation utilities properly organized *) 35 - let animated_button = tw [ 36 - C.bg (Color.make `Green ~variant:`V500 ()); 37 - C.text (Color.make `White ()); 38 - S.(to_class (px (Size.rem 1.5))); 39 - S.(to_class (py (Size.rem 0.75))); 40 - E.rounded_lg; 41 - E.transition `All; 42 - E.duration 200; 43 - E.ease `In_out; 44 - Variants.hover (C.bg (Color.make `Green ~variant:`V600 ())); 45 - ] in 46 - Printf.printf "Animated button: %s\n" (to_string animated_button); 47 - 48 - (* 5. Stack layout pattern *) 49 - let vertical_stack = P.stack ~gap:(Size.rem 1.0) () in 50 - Printf.printf "Vertical stack: %s\n" (to_string vertical_stack); 51 - 52 - (* 6. Conditional classes *) 53 - let responsive_classes = class_list [ 54 - (P.flex_center, true); 55 - (R.button, false); 56 - (E.shadow_lg, true); 57 - ] in 58 - Printf.printf "Conditional classes: %s\n" (to_string responsive_classes); 59 - 60 - (* 7. Focus ring utility *) 61 - let accessible_button = tw [ 62 - C.bg (Color.make `Purple ~variant:`V500 ()); 63 - C.text (Color.make `White ()); 64 - S.(to_class (px (Size.rem 1.0))); 65 - S.(to_class (py (Size.rem 0.5))); 66 - E.rounded_md; 67 - focus_ring (); 68 - ] in 69 - Printf.printf "Accessible button: %s\n" (to_string accessible_button); 70 - 71 - Printf.printf "\n=== API Improvements Summary ===\n"; 72 - Printf.printf "✅ Animation utilities moved to Effects module\n"; 73 - Printf.printf "✅ Reset utilities organized in Reset module\n"; 74 - Printf.printf "✅ Layout patterns in Patterns module\n"; 75 - Printf.printf "✅ Convenience aliases (C, S, E, T, F, G, P, R)\n"; 76 - Printf.printf "✅ Consistent return types across modules\n"; 77 - Printf.printf "✅ Comprehensive test coverage setup\n";

-58

examples/module_usage.ml

··· 1 - (* Example showing how to use module aliases to access individual utilities *) 2 - 3 - let () = 4 - (* Using individual modules through Tailwind module aliases *) 5 - let blue_bg = Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V500 ()) in 6 - let white_text = Tailwind.Color.text Tailwind.Color.white in 7 - let padding = Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.0))) in 8 - let rounded = Tailwind.Effects.rounded_md in 9 - let flex_display = Tailwind.Display.flex in 10 - let center_items = Tailwind.Flexbox.(to_class (align_items `Center)) in 11 - 12 - (* Combine all classes *) 13 - let button_classes = Tailwind.tw [ 14 - blue_bg; 15 - white_text; 16 - padding; 17 - rounded; 18 - flex_display; 19 - center_items; 20 - ] in 21 - 22 - (* Typography example *) 23 - let heading = Tailwind.Typography.(to_class (font_size `Xl2)) in 24 - let bold_text = Tailwind.Typography.(to_class (font_weight `Bold)) in 25 - let center_align = Tailwind.Typography.(to_class (text_align `Center)) in 26 - 27 - let heading_classes = Tailwind.tw [ 28 - heading; 29 - bold_text; 30 - center_align; 31 - ] in 32 - 33 - (* Layout example *) 34 - let full_width = Tailwind.Layout.w_full in 35 - let fixed_height = Tailwind.Layout.(to_class (height (Tailwind.Size.rem 10.0))) in 36 - let overflow_hidden = Tailwind.Layout.(to_class (overflow `All `Hidden)) in 37 - 38 - let container_classes = Tailwind.tw [ 39 - full_width; 40 - fixed_height; 41 - overflow_hidden; 42 - Tailwind.Patterns.flex_center; (* Utility function *) 43 - ] in 44 - 45 - Printf.printf "=== Module Alias Usage Examples ===\n"; 46 - Printf.printf "Button: %s\n" (Tailwind.to_string button_classes); 47 - Printf.printf "Heading: %s\n" (Tailwind.to_string heading_classes); 48 - Printf.printf "Container: %s\n" (Tailwind.to_string container_classes); 49 - 50 - (* Show conditional classes *) 51 - let is_primary = true in 52 - let conditional_button = Tailwind.class_list [ 53 - (Tailwind.tw [padding; rounded], true); 54 - (blue_bg, is_primary); 55 - (Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V300 ()), not is_primary); 56 - ] in 57 - 58 - Printf.printf "Conditional button: %s\n" (Tailwind.to_string conditional_button)

-95

examples/simple_html_example.ml

··· 1 - (* Simple HTML generation example using Tailwind classes *) 2 - 3 - open Htmlit 4 - 5 - let classes_attr tailwind_classes = 6 - At.class' (Tailwind.to_string tailwind_classes) 7 - 8 - let () = 9 - Printf.printf "=== Simple Tailwind HTML Example ===\n"; 10 - 11 - (* Create a simple card *) 12 - let card_classes = Tailwind.tw [ 13 - Tailwind.Effects.rounded_lg; 14 - Tailwind.Effects.shadow_md; 15 - Tailwind.Color.bg Tailwind.Color.white; 16 - Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5))); 17 - Tailwind.Layout.(to_class (max_width (Tailwind.Size.rem 20.0))); 18 - ] in 19 - 20 - let card = El.div ~at:[classes_attr card_classes] [ 21 - El.h2 ~at:[classes_attr (Tailwind.tw [ 22 - Tailwind.Typography.(to_class (font_size `Xl)); 23 - Tailwind.Typography.(to_class (font_weight `Bold)); 24 - Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 1.0))); 25 - ])] [El.txt "Welcome Card"]; 26 - 27 - El.p ~at:[classes_attr (Tailwind.tw [ 28 - Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ()); 29 - Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 1.5))); 30 - ])] [El.txt "This is a simple card component built with Tailwind CSS classes."]; 31 - 32 - El.button ~at:[ 33 - classes_attr (Tailwind.tw [ 34 - Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ()); 35 - Tailwind.Color.text Tailwind.Color.white; 36 - Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 1.0))); 37 - Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 0.5))); 38 - Tailwind.Effects.rounded_md; 39 - Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V700 ())); 40 - ]); 41 - ] [El.txt "Click Me"]; 42 - ] in 43 - 44 - (* Create a simple layout *) 45 - let page = El.div ~at:[classes_attr (Tailwind.tw [ 46 - Tailwind.Layout.(to_class (min_height (Tailwind.Size.screen))); 47 - Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V50 ()); 48 - Tailwind.Display.flex; 49 - Tailwind.Flexbox.(to_class (align_items `Center)); 50 - Tailwind.Flexbox.(to_class (justify `Center)); 51 - Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.0))); 52 - ])] [card] in 53 - 54 - (* Generate HTML *) 55 - let html_doc = El.html [ 56 - El.head [ 57 - El.title [El.txt "Tailwind HTML Example"]; 58 - El.script ~at:[At.src "https://cdn.tailwindcss.com"] []; 59 - ]; 60 - El.body [page]; 61 - ] in 62 - 63 - let html_string = El.to_string ~doctype:true html_doc in 64 - 65 - Printf.printf "Generated HTML document (%d characters)\n" (String.length html_string); 66 - Printf.printf "HTML preview:\n%s\n" (String.sub html_string 0 (min 500 (String.length html_string))); 67 - 68 - (* Show individual class generation *) 69 - Printf.printf "\n=== Individual Class Examples ===\n"; 70 - Printf.printf "Primary button: %s\n" (Tailwind.to_string (Tailwind.tw [ 71 - Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ()); 72 - Tailwind.Color.text Tailwind.Color.white; 73 - Tailwind.Effects.rounded_md; 74 - ])); 75 - 76 - Printf.printf "Card container: %s\n" (Tailwind.to_string (Tailwind.tw [ 77 - Tailwind.Effects.rounded_lg; 78 - Tailwind.Effects.shadow_md; 79 - Tailwind.Color.bg Tailwind.Color.white; 80 - ])); 81 - 82 - Printf.printf "Flex center: %s\n" (Tailwind.to_string (Tailwind.tw [ 83 - Tailwind.Display.flex; 84 - Tailwind.Flexbox.(to_class (align_items `Center)); 85 - Tailwind.Flexbox.(to_class (justify `Center)); 86 - ])); 87 - 88 - Printf.printf "Responsive grid: %s\n" (Tailwind.to_string (Tailwind.tw [ 89 - Tailwind.Display.grid; 90 - Tailwind.Grid.(to_class (template_cols (`Cols 1))); 91 - Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Grid.(to_class (template_cols (`Cols 2)))))); 92 - Tailwind.Responsive.(to_class (at_breakpoint `Lg (Tailwind.Grid.(to_class (template_cols (`Cols 3)))))); 93 - ])); 94 - 95 - Printf.printf "\nTailwind HTML library working successfully!\n"

-18

examples/tailwind_html_example.ml

··· 1 - (* Tailwind HTML Components Example - Placeholder *) 2 - 3 - let () = 4 - Printf.printf "Tailwind HTML Components Example\n"; 5 - Printf.printf "=================================\n\n"; 6 - Printf.printf "This example demonstrates how HTML components will work\n"; 7 - Printf.printf "once the tailwind-html library is fully implemented.\n\n"; 8 - 9 - Printf.printf "The tailwind-html library will provide:\n"; 10 - Printf.printf " - Pre-built button components\n"; 11 - Printf.printf " - Card layouts\n"; 12 - Printf.printf " - Form components\n"; 13 - Printf.printf " - Navigation patterns\n"; 14 - Printf.printf " - Modal dialogs\n"; 15 - Printf.printf " - And more!\n\n"; 16 - 17 - Printf.printf "For now, you can build these components manually using\n"; 18 - Printf.printf "the core Tailwind library as shown in the other examples.\n"