commit 4cb2087822f34bc86edbf7902527db0f0c15bfa8 · anil.recoil.org/ocaml-tailwind

-65

examples/advanced_features.ml

···

       1
       1
       -
       let () =

     

       2
       2
       -
         Printf.printf "=== Advanced Tailwind Features ===\n";

     

       3
       3
       -
         

     

       4
       4
       -
         (* V4 Container Queries *)

     

       5
       5
       -
         let container_responsive = Tailwind.V4.container_query `Lg 

     

       6
       6
       -
           (Tailwind.Css.make "text-2xl") in

     

       7
       7
       -
         Printf.printf "Container Query (V4): %s\n" (Tailwind.to_string container_responsive);

     

       8
       8
       -
         

     

       9
       9
       -
         (* V4 Starting Style *)

     

       10
       10
       -
         let starting_animation = Tailwind.V4.starting_style

     

       11
       11
       -
           (Tailwind.Css.make "opacity-0") in

     

       12
       12
       -
         Printf.printf "Starting Style (V4): %s\n" (Tailwind.to_string starting_animation);

     

       13
       13
       -
         

     

       14
       14
       -
         (* V4 Text Shadow *)

     

       15
       15
       -
         let text_shadow = Tailwind.V4.text_shadow `Lg in

     

       16
       16
       -
         Printf.printf "Text Shadow (V4): %s\n" (Tailwind.to_string text_shadow);

     

       17
       17
       -
         

     

       18
       18
       -
         (* Advanced Variants - Pseudo-classes *)

     

       19
       19
       -
         let hover_effect = Tailwind.Variants.hover (Tailwind.Css.make "bg-blue-600") in

     

       20
       20
       -
         Printf.printf "Hover Effect: %s\n" (Tailwind.to_string hover_effect);

     

       21
       21
       -
         

     

       22
       22
       -
         let focus_visible = Tailwind.Variants.apply 

     

       23
       23
       -
           (Tailwind.Variants.pseudo `Focus_visible (Tailwind.Css.make "ring-2")) 

     

       24
       24
       -
           (Tailwind.Css.make "input") in

     

       25
       25
       -
         Printf.printf "Focus Visible: %s\n" (Tailwind.to_string focus_visible);

     

       26
       26
       -
         

     

       27
       27
       -
         (* Responsive with Media Features *)

     

       28
       28
       -
         let dark_mode = Tailwind.Responsive.(apply 

     

       29
       29
       -
           (media `Dark (Tailwind.Css.make "bg-gray-900")) 

     

       30
       30
       -
           (Tailwind.Css.make "bg-white")) in

     

       31
       31
       -
         Printf.printf "Dark Mode: %s\n" (Tailwind.to_string dark_mode);

     

       32
       32
       -
         

     

       33
       33
       -
         let motion_safe = Tailwind.Responsive.(apply

     

       34
       34
       -
           (media `Motion_safe (Tailwind.Css.make "transition-all"))

     

       35
       35
       -
           (Tailwind.Css.make "transform")) in

     

       36
       36
       -
         Printf.printf "Motion Safe: %s\n" (Tailwind.to_string motion_safe);

     

       37
       37
       -
         

     

       38
       38
       -
         (* Advanced Effects *)

     

       39
       39
       -
         let backdrop_blur = Tailwind.Effects.(to_class (backdrop_blur `Lg)) in

     

       40
       40
       -
         Printf.printf "Backdrop Blur: %s\n" (Tailwind.to_string backdrop_blur);

     

       41
       41
       -
         

     

       42
       42
       -
         let transform_origin = Tailwind.Effects.(to_class (transform_origin `Top_right)) in

     

       43
       43
       -
         Printf.printf "Transform Origin: %s\n" (Tailwind.to_string transform_origin);

     

       44
       44
       -
         

     

       45
       45
       -
         let scale_transform = Tailwind.Effects.(to_class (scale `X 125)) in

     

       46
       46
       -
         Printf.printf "Scale Transform: %s\n" (Tailwind.to_string scale_transform);

     

       47
       47
       -
         

     

       48
       48
       -
         let rotate_transform = Tailwind.Effects.(to_class (rotate 45)) in

     

       49
       49
       -
         Printf.printf "Rotate Transform: %s\n" (Tailwind.to_string rotate_transform);

     

       50
       50
       -
         

     

       51
       51
       -
         let translate_transform = Tailwind.Effects.(to_class (translate `Y (Tailwind.Size.rem 2.0))) in

     

       52
       52
       -
         Printf.printf "Translate Transform: %s\n" (Tailwind.to_string translate_transform);

     

       53
       53
       -
         

     

       54
       54
       -
         (* Complex Combination *)

     

       55
       55
       -
         let complex_card = Tailwind.tw [

     

       56
       56
       -
           Tailwind.Color.bg (Tailwind.Color.make `White ());

     

       57
       57
       -
           Tailwind.Effects.rounded_lg;

     

       58
       58
       -
           Tailwind.Effects.shadow_md;

     

       59
       59
       -
           backdrop_blur;

     

       60
       60
       -
           Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5)));

     

       61
       61
       -
           Tailwind.Effects.(to_class (transform `Gpu));

     

       62
       62
       -
           Tailwind.Effects.transition `All;

     

       63
       63
       -
           hover_effect;

     

       64
       64
       -
         ] in

     

       65
       65
       -
         Printf.printf "Complex Card: %s\n" (Tailwind.to_string complex_card)

-45

examples/basic_usage.ml

···

       1
       1
       -
       (* Basic usage examples for the Tailwind OCaml library *)

     

       2
       2
       -
       

     

       3
       3
       -
       (* This example shows how to use the library in its current form *)

     

       4
       4
       -
       

     

       5
       5
       -
       let () =

     

       6
       6
       -
         (* The current implementation provides these utilities *)

     

       7
       7
       -
         let flex_center_classes = Tailwind.Patterns.flex_center in

     

       8
       8
       -
         let focus_ring_classes = Tailwind.focus_ring () in

     

       9
       9
       -
         let container_classes = Tailwind.Patterns.container ~center:true () in

     

       10
       10
       -
         

     

       11
       11
       -
         (* Reset utilities *)

     

       12
       12
       -
         let button_reset = Tailwind.Reset.button in

     

       13
       13
       -
         let input_reset = Tailwind.Reset.input in

     

       14
       14
       -
         let sr_only = Tailwind.sr_only in

     

       15
       15
       -
         

     

       16
       16
       -
         (* Transitions *)

     

       17
       17
       -
         let transition_all = Tailwind.Effects.transition `All in

     

       18
       18
       -
         let duration_300 = Tailwind.Effects.duration 300 in

     

       19
       19
       -
         let ease_in_out = Tailwind.Effects.ease `In_out in

     

       20
       20
       -
         

     

       21
       21
       -
         (* Conditional classes *)

     

       22
       22
       -
         let conditional_classes = Tailwind.class_list [

     

       23
       23
       -
           (Tailwind.Patterns.flex_center, true);

     

       24
       24
       -
           (Tailwind.Reset.button, false);

     

       25
       25
       -
         ] in

     

       26
       26
       -
         

     

       27
       27
       -
         Printf.printf "=== Tailwind OCaml Library Usage Examples ===\n";

     

       28
       28
       -
         Printf.printf "Flex center: %s\n" (Tailwind.to_string flex_center_classes);

     

       29
       29
       -
         Printf.printf "Focus ring: %s\n" (Tailwind.to_string focus_ring_classes);

     

       30
       30
       -
         Printf.printf "Container: %s\n" (Tailwind.to_string container_classes);

     

       31
       31
       -
         Printf.printf "Button reset: %s\n" (Tailwind.to_string button_reset);

     

       32
       32
       -
         Printf.printf "Input reset: %s\n" (Tailwind.to_string input_reset);

     

       33
       33
       -
         Printf.printf "Screen reader only: %s\n" (Tailwind.to_string sr_only);

     

       34
       34
       -
         Printf.printf "Transition all: %s\n" (Tailwind.to_string transition_all);

     

       35
       35
       -
         Printf.printf "Duration 300ms: %s\n" (Tailwind.to_string duration_300);

     

       36
       36
       -
         Printf.printf "Ease in-out: %s\n" (Tailwind.to_string ease_in_out);

     

       37
       37
       -
         Printf.printf "Conditional classes: %s\n" (Tailwind.to_string conditional_classes);

     

       38
       38
       -
         

     

       39
       39
       -
         (* Combining classes *)

     

       40
       40
       -
         let combined_classes = Tailwind.tw [

     

       41
       41
       -
           flex_center_classes;

     

       42
       42
       -
           container_classes;

     

       43
       43
       -
           transition_all;

     

       44
       44
       -
         ] in

     

       45
       45
       -
         Printf.printf "Combined classes: %s\n" (Tailwind.to_string combined_classes)

-287

examples/complete_demo.ml

···

       1
       1
       -
       (* Complete demonstration of Tailwind OCaml library with HTML generation *)

     

       2
       2
       -
       

     

       3
       3
       -
       open Htmlit

     

       4
       4
       -
       

     

       5
       5
       -
       let classes_attr tailwind_classes = 

     

       6
       6
       -
         At.class' (Tailwind.to_string tailwind_classes)

     

       7
       7
       -
       

     

       8
       8
       -
       let create_navbar () =

     

       9
       9
       -
         let nav_classes = Tailwind.tw [

     

       10
       10
       -
           Tailwind.Color.bg Tailwind.Color.white;

     

       11
       11
       -
           Tailwind.Effects.shadow_sm;

     

       12
       12
       -
           Tailwind.Effects.border;

     

       13
       13
       -
           Tailwind.Color.border (Tailwind.Color.make `Gray ~variant:`V200 ());

     

       14
       14
       -
         ] in

     

       15
       15
       -
         

     

       16
       16
       -
         El.nav ~at:[classes_attr nav_classes] [

     

       17
       17
       -
           El.div ~at:[classes_attr (Tailwind.tw [

     

       18
       18
       -
             Tailwind.Css.make "max-w-7xl";

     

       19
       19
       -
             Tailwind.Css.make "mx-auto";

     

       20
       20
       -
             Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 1.0)));

     

       21
       21
       -
           ])] [

     

       22
       22
       -
             El.div ~at:[classes_attr (Tailwind.tw [

     

       23
       23
       -
               Tailwind.Display.flex;

     

       24
       24
       -
               Tailwind.Flexbox.(to_class (justify `Between));

     

       25
       25
       -
               Tailwind.Flexbox.(to_class (align_items `Center));

     

       26
       26
       -
               Tailwind.Layout.(to_class (height (Tailwind.Size.rem 4.0)));

     

       27
       27
       -
             ])] [

     

       28
       28
       -
               (* Brand *)

     

       29
       29
       -
               El.div ~at:[classes_attr (Tailwind.tw [

     

       30
       30
       -
                 Tailwind.Typography.(to_class (font_size `Xl));

     

       31
       31
       -
                 Tailwind.Typography.(to_class (font_weight `Bold));

     

       32
       32
       -
                 Tailwind.Color.text (Tailwind.Color.make `Blue ~variant:`V600 ());

     

       33
       33
       -
               ])] [El.txt "Tailwind OCaml"];

     

       34
       34
       -
               

     

       35
       35
       -
               (* Navigation items *)

     

       36
       36
       -
               El.div ~at:[classes_attr (Tailwind.tw [

     

       37
       37
       -
                 Tailwind.Display.hidden;

     

       38
       38
       -
                 Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Display.flex)));

     

       39
       39
       -
                 Tailwind.Spacing.(to_class (gap `All (Tailwind.Size.rem 2.0)));

     

       40
       40
       -
               ])] [

     

       41
       41
       -
                 El.a ~at:[

     

       42
       42
       -
                   At.href "#";

     

       43
       43
       -
                   classes_attr (Tailwind.tw [

     

       44
       44
       -
                     Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ());

     

       45
       45
       -
                     Tailwind.Variants.hover (Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V900 ()));

     

       46
       46
       -
                   ]);

     

       47
       47
       -
                 ] [El.txt "Features"];

     

       48
       48
       -
                 El.a ~at:[

     

       49
       49
       -
                   At.href "#";

     

       50
       50
       -
                   classes_attr (Tailwind.tw [

     

       51
       51
       -
                     Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ());

     

       52
       52
       -
                     Tailwind.Variants.hover (Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V900 ()));

     

       53
       53
       -
                   ]);

     

       54
       54
       -
                 ] [El.txt "Docs"];

     

       55
       55
       -
                 El.a ~at:[

     

       56
       56
       -
                   At.href "#";

     

       57
       57
       -
                   classes_attr (Tailwind.tw [

     

       58
       58
       -
                     Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ());

     

       59
       59
       -
                     Tailwind.Variants.hover (Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V900 ()));

     

       60
       60
       -
                   ]);

     

       61
       61
       -
                 ] [El.txt "About"];

     

       62
       62
       -
               ];

     

       63
       63
       -
               

     

       64
       64
       -
               (* CTA Button *)

     

       65
       65
       -
               El.button ~at:[classes_attr (Tailwind.tw [

     

       66
       66
       -
                 Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ());

     

       67
       67
       -
                 Tailwind.Color.text Tailwind.Color.white;

     

       68
       68
       -
                 Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 1.0)));

     

       69
       69
       -
                 Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 0.5)));

     

       70
       70
       -
                 Tailwind.Effects.rounded_md;

     

       71
       71
       -
                 Tailwind.Typography.(to_class (font_size `Sm));

     

       72
       72
       -
                 Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V700 ()));

     

       73
       73
       -
               ])] [El.txt "Get Started"];

     

       74
       74
       -
             ];

     

       75
       75
       -
           ];

     

       76
       76
       -
         ]

     

       77
       77
       -
       

     

       78
       78
       -
       let create_hero () =

     

       79
       79
       -
         El.section ~at:[classes_attr (Tailwind.tw [

     

       80
       80
       -
           Tailwind.Position.(to_class (position `Relative));

     

       81
       81
       -
           Tailwind.Display.flex;

     

       82
       82
       -
           Tailwind.Flexbox.(to_class (align_items `Center));

     

       83
       83
       -
           Tailwind.Flexbox.(to_class (justify `Center));

     

       84
       84
       -
           Tailwind.Layout.(to_class (min_height (Tailwind.Size.screen)));

     

       85
       85
       -
           Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V900 ());

     

       86
       86
       -
           Tailwind.Color.text Tailwind.Color.white;

     

       87
       87
       -
         ])] [

     

       88
       88
       -
           El.div ~at:[classes_attr (Tailwind.tw [

     

       89
       89
       -
             Tailwind.Css.make "text-center";

     

       90
       90
       -
             Tailwind.Css.make "max-w-4xl";

     

       91
       91
       -
             Tailwind.Css.make "mx-auto";

     

       92
       92
       -
             Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 1.0)));

     

       93
       93
       -
           ])] [

     

       94
       94
       -
             El.h1 ~at:[classes_attr (Tailwind.tw [

     

       95
       95
       -
               Tailwind.Typography.(to_class (font_size `Xl4));

     

       96
       96
       -
               Tailwind.Typography.(to_class (font_weight `Bold));

     

       97
       97
       -
               Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 1.5)));

     

       98
       98
       -
             ])] [El.txt "Type-Safe Tailwind CSS for OCaml"];

     

       99
       99
       -
             

     

       100
       100
       -
             El.p ~at:[classes_attr (Tailwind.tw [

     

       101
       101
       -
               Tailwind.Typography.(to_class (font_size `Xl));

     

       102
       102
       -
               Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V300 ());

     

       103
       103
       -
               Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 2.0)));

     

       104
       104
       -
             ])] [El.txt "Build beautiful, responsive web interfaces with the power of OCaml's type system and Tailwind's utility classes."];

     

       105
       105
       -
             

     

       106
       106
       -
             El.div ~at:[classes_attr (Tailwind.tw [

     

       107
       107
       -
               Tailwind.Display.flex;

     

       108
       108
       -
               Tailwind.Flexbox.(to_class (justify `Center));

     

       109
       109
       -
               Tailwind.Spacing.(to_class (gap `All (Tailwind.Size.rem 1.0)));

     

       110
       110
       -
             ])] [

     

       111
       111
       -
               El.button ~at:[classes_attr (Tailwind.tw [

     

       112
       112
       -
                 Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ());

     

       113
       113
       -
                 Tailwind.Color.text Tailwind.Color.white;

     

       114
       114
       -
                 Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 2.0)));

     

       115
       115
       -
                 Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 0.75)));

     

       116
       116
       -
                 Tailwind.Effects.rounded_lg;

     

       117
       117
       -
                 Tailwind.Typography.(to_class (font_size `Lg));

     

       118
       118
       -
                 Tailwind.Typography.(to_class (font_weight `Medium));

     

       119
       119
       -
                 Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V700 ()));

     

       120
       120
       -
               ])] [El.txt "Get Started"];

     

       121
       121
       -
               

     

       122
       122
       -
               El.button ~at:[classes_attr (Tailwind.tw [

     

       123
       123
       -
                 Tailwind.Effects.border;

     

       124
       124
       -
                 Tailwind.Color.border (Tailwind.Color.make `Gray ~variant:`V300 ());

     

       125
       125
       -
                 Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V300 ());

     

       126
       126
       -
                 Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 2.0)));

     

       127
       127
       -
                 Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 0.75)));

     

       128
       128
       -
                 Tailwind.Effects.rounded_lg;

     

       129
       129
       -
                 Tailwind.Typography.(to_class (font_size `Lg));

     

       130
       130
       -
                 Tailwind.Typography.(to_class (font_weight `Medium));

     

       131
       131
       -
                 Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V800 ()));

     

       132
       132
       -
               ])] [El.txt "View Docs"];

     

       133
       133
       -
             ];

     

       134
       134
       -
           ];

     

       135
       135
       -
         ]

     

       136
       136
       -
       

     

       137
       137
       -
       let create_feature_card ~icon ~title ~description =

     

       138
       138
       -
         El.div ~at:[classes_attr (Tailwind.tw [

     

       139
       139
       -
           Tailwind.Effects.rounded_lg;

     

       140
       140
       -
           Tailwind.Effects.border;

     

       141
       141
       -
           Tailwind.Color.border (Tailwind.Color.make `Gray ~variant:`V200 ());

     

       142
       142
       -
           Tailwind.Color.bg Tailwind.Color.white;

     

       143
       143
       -
           Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5)));

     

       144
       144
       -
           Tailwind.Effects.shadow_sm;

     

       145
       145
       -
         ])] [

     

       146
       146
       -
           El.div ~at:[classes_attr (Tailwind.tw [

     

       147
       147
       -
             Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 1.0)));

     

       148
       148
       -
           ])] [El.txt icon];

     

       149
       149
       -
           

     

       150
       150
       -
           El.h3 ~at:[classes_attr (Tailwind.tw [

     

       151
       151
       -
             Tailwind.Typography.(to_class (font_size `Lg));

     

       152
       152
       -
             Tailwind.Typography.(to_class (font_weight `Semibold));

     

       153
       153
       -
             Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 0.5)));

     

       154
       154
       -
           ])] [El.txt title];

     

       155
       155
       -
           

     

       156
       156
       -
           El.p ~at:[classes_attr (Tailwind.tw [

     

       157
       157
       -
             Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ());

     

       158
       158
       -
           ])] [El.txt description];

     

       159
       159
       -
         ]

     

       160
       160
       -
       

     

       161
       161
       -
       let create_features () =

     

       162
       162
       -
         El.section ~at:[classes_attr (Tailwind.tw [

     

       163
       163
       -
           Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 5.0)));

     

       164
       164
       -
         ])] [

     

       165
       165
       -
           El.div ~at:[classes_attr (Tailwind.tw [

     

       166
       166
       -
             Tailwind.Css.make "max-w-7xl";

     

       167
       167
       -
             Tailwind.Css.make "mx-auto";

     

       168
       168
       -
             Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 1.0)));

     

       169
       169
       -
           ])] [

     

       170
       170
       -
             El.div ~at:[classes_attr (Tailwind.tw [

     

       171
       171
       -
               Tailwind.Css.make "text-center";

     

       172
       172
       -
               Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 3.0)));

     

       173
       173
       -
             ])] [

     

       174
       174
       -
               El.h2 ~at:[classes_attr (Tailwind.tw [

     

       175
       175
       -
                 Tailwind.Typography.(to_class (font_size `Xl3));

     

       176
       176
       -
                 Tailwind.Typography.(to_class (font_weight `Bold));

     

       177
       177
       -
                 Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 1.0)));

     

       178
       178
       -
               ])] [El.txt "Why Choose Tailwind OCaml?"];

     

       179
       179
       -
               

     

       180
       180
       -
               El.p ~at:[classes_attr (Tailwind.tw [

     

       181
       181
       -
                 Tailwind.Typography.(to_class (font_size `Lg));

     

       182
       182
       -
                 Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ());

     

       183
       183
       -
               ])] [El.txt "Everything you need to build modern web applications with OCaml"];

     

       184
       184
       -
             ];

     

       185
       185
       -
             

     

       186
       186
       -
             El.div ~at:[classes_attr (Tailwind.tw [

     

       187
       187
       -
               Tailwind.Display.grid;

     

       188
       188
       -
               Tailwind.Grid.(to_class (template_cols (`Cols 1)));

     

       189
       189
       -
               Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Grid.(to_class (template_cols (`Cols 2))))));

     

       190
       190
       -
               Tailwind.Responsive.(to_class (at_breakpoint `Lg (Tailwind.Grid.(to_class (template_cols (`Cols 3))))));

     

       191
       191
       -
               Tailwind.Spacing.(to_class (gap `All (Tailwind.Size.rem 2.0)));

     

       192
       192
       -
             ])] [

     

       193
       193
       -
               create_feature_card ~icon:"🔒" ~title:"Type Safety" 

     

       194
       194
       -
                 ~description:"Catch CSS errors at compile time with OCaml's powerful type system";

     

       195
       195
       -
               create_feature_card ~icon:"⚡" ~title:"Performance"

     

       196
       196
       -
                 ~description:"Zero runtime overhead - all CSS classes are generated at compile time";

     

       197
       197
       -
               create_feature_card ~icon:"🎨" ~title:"Full Tailwind"

     

       198
       198
       -
                 ~description:"Complete coverage of Tailwind CSS v4 including the latest features";

     

       199
       199
       -
               create_feature_card ~icon:"🔧" ~title:"Composable"

     

       200
       200
       -
                 ~description:"Build complex layouts by composing simple, reusable utility functions";

     

       201
       201
       -
               create_feature_card ~icon:"📱" ~title:"Responsive"

     

       202
       202
       -
                 ~description:"First-class support for responsive design and media queries";

     

       203
       203
       -
               create_feature_card ~icon:"🚀" ~title:"Modern"

     

       204
       204
       -
                 ~description:"Support for CSS Grid, Flexbox, and modern web standards";

     

       205
       205
       -
             ];

     

       206
       206
       -
           ];

     

       207
       207
       -
         ]

     

       208
       208
       -
       

     

       209
       209
       -
       let () =

     

       210
       210
       -
         Printf.printf "=== Complete Tailwind OCaml Demo ===\n";

     

       211
       211
       -
         

     

       212
       212
       -
         let html_doc = El.html [

     

       213
       213
       -
           El.head [

     

       214
       214
       -
             El.meta ~at:[At.charset "utf-8"] ();

     

       215
       215
       -
             El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();

     

       216
       216
       -
             El.title [El.txt "Tailwind OCaml - Type-Safe CSS Utilities"];

     

       217
       217
       -
             El.script ~at:[At.src "https://cdn.tailwindcss.com"] [];

     

       218
       218
       -
           ];

     

       219
       219
       -
           

     

       220
       220
       -
           El.body [

     

       221
       221
       -
             create_navbar ();

     

       222
       222
       -
             create_hero ();

     

       223
       223
       -
             create_features ();

     

       224
       224
       -
           ];

     

       225
       225
       -
         ] in

     

       226
       226
       -
         

     

       227
       227
       -
         let html_string = El.to_string ~doctype:true html_doc in

     

       228
       228
       -
         

     

       229
       229
       -
         Printf.printf "Generated complete website (%d characters)\n" (String.length html_string);

     

       230
       230
       -
         

     

       231
       231
       -
         (* Show a snippet of the generated HTML *)

     

       232
       232
       -
         let preview_length = 800 in

     

       233
       233
       -
         let preview = if String.length html_string > preview_length then

     

       234
       234
       -
           (String.sub html_string 0 preview_length) ^ "..."

     

       235
       235
       -
         else html_string in

     

       236
       236
       -
         

     

       237
       237
       -
         Printf.printf "\nHTML Preview:\n%s\n" preview;

     

       238
       238
       -
         

     

       239
       239
       -
         (* Demonstrate advanced class combinations *)

     

       240
       240
       -
         Printf.printf "\n=== Advanced Class Combinations ===\n";

     

       241
       241
       -
         

     

       242
       242
       -
         let responsive_card = Tailwind.tw [

     

       243
       243
       -
           (* Base styles *)

     

       244
       244
       -
           Tailwind.Effects.rounded_lg;

     

       245
       245
       -
           Tailwind.Color.bg Tailwind.Color.white;

     

       246
       246
       -
           Tailwind.Effects.shadow_sm;

     

       247
       247
       -
           

     

       248
       248
       -
           (* Responsive padding *)

     

       249
       249
       -
           Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.0)));

     

       250
       250
       -
           Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5))))));

     

       251
       251
       -
           Tailwind.Responsive.(to_class (at_breakpoint `Lg (Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 2.0))))));

     

       252
       252
       -
           

     

       253
       253
       -
           (* Hover effects *)

     

       254
       254
       -
           Tailwind.Effects.transition `All;

     

       255
       255
       -
           Tailwind.Variants.hover (Tailwind.Effects.shadow_md);

     

       256
       256
       -
           

     

       257
       257
       -
           (* Dark mode support *)

     

       258
       258
       -
           Tailwind.Responsive.(to_class (media `Dark (Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V800 ()))));

     

       259
       259
       -
         ] in

     

       260
       260
       -
         Printf.printf "Responsive Card: %s\n" (Tailwind.to_string responsive_card);

     

       261
       261
       -
         

     

       262
       262
       -
         let complex_button = Tailwind.tw [

     

       263
       263
       -
           (* Button base *)

     

       264
       264
       -
           Tailwind.Display.inline_flex;

     

       265
       265
       -
           Tailwind.Flexbox.(to_class (align_items `Center));

     

       266
       266
       -
           Tailwind.Flexbox.(to_class (justify `Center));

     

       267
       267
       -
           Tailwind.Effects.rounded_md;

     

       268
       268
       -
           

     

       269
       269
       -
           (* Typography *)

     

       270
       270
       -
           Tailwind.Typography.(to_class (font_size `Sm));

     

       271
       271
       -
           Tailwind.Typography.(to_class (font_weight `Medium));

     

       272
       272
       -
           

     

       273
       273
       -
           (* Colors with variants *)

     

       274
       274
       -
           Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ());

     

       275
       275
       -
           Tailwind.Color.text Tailwind.Color.white;

     

       276
       276
       -
           Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V700 ()));

     

       277
       277
       -
           Tailwind.Variants.focus (Tailwind.Css.make "focus:ring-2");

     

       278
       278
       -
           Tailwind.Variants.disabled (Tailwind.Effects.(to_class (opacity 50)));

     

       279
       279
       -
           

     

       280
       280
       -
           (* V4 features *)

     

       281
       281
       -
           Tailwind.V4.starting_style (Tailwind.Effects.(to_class (opacity 0)));

     

       282
       282
       -
         ] in

     

       283
       283
       -
         Printf.printf "Complex Button: %s\n" (Tailwind.to_string complex_button);

     

       284
       284
       -
         

     

       285
       285
       -
         Printf.printf "\n✅ Complete demo generated successfully!\n";

     

       286
       286
       -
         Printf.printf "📄 Ready to serve as a static HTML file\n";

     

       287
       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
       24
       -
       ;; Legacy examples (maintained for compatibility)

     

       25
       25
       -
       (executables

     

       26
       26
       -
        (public_names basic_usage module_usage advanced_features simple_html_example complete_demo tailwind_html_example improved_api_demo)

     

       27
       27
       -
        (names basic_usage module_usage advanced_features simple_html_example complete_demo tailwind_html_example improved_api_demo)

     

       28
       28
       -
        (package tailwind)

     

       29
       29
       -
        (libraries tailwind htmlit unix))

     

       30
       24
        
       

     

       31
       25
        
       ;; Generate HTML files from examples

     

       32
       26
        
       (rule

-77

examples/improved_api_demo.ml

···

       1
       1
       -
       open Tailwind

     

       2
       2
       -
       

     

       3
       3
       -
       let () =

     

       4
       4
       -
         Printf.printf "=== Improved Tailwind OCaml API Demo ===\n\n";

     

       5
       5
       -
       

     

       6
       6
       -
         (* 1. Using the new organizational structure *)

     

       7
       7
       -
         let button_classes = tw [

     

       8
       8
       -
           C.bg (Color.make `Blue ~variant:`V500 ());

     

       9
       9
       -
           C.text (Color.make `White ());

     

       10
       10
       -
           S.(to_class (px (Size.rem 1.0)));

     

       11
       11
       -
           S.(to_class (py (Size.rem 0.5)));

     

       12
       12
       -
           E.rounded_md;

     

       13
       13
       -
           E.shadow_sm;

     

       14
       14
       -
           E.transition `Colors;

     

       15
       15
       -
         ] in

     

       16
       16
       -
         Printf.printf "Button with short aliases: %s\n" (to_string button_classes);

     

       17
       17
       -
       

     

       18
       18
       -
         (* 2. Using patterns for common layouts *)

     

       19
       19
       -
         let centered_card = tw [

     

       20
       20
       -
           P.card;

     

       21
       21
       -
           P.flex_center;

     

       22
       22
       -
         ] in

     

       23
       23
       -
         Printf.printf "Centered card: %s\n" (to_string centered_card);

     

       24
       24
       -
       

     

       25
       25
       -
         (* 3. Reset utilities in their own module *)

     

       26
       26
       -
         let form_input = tw [

     

       27
       27
       -
           R.input;

     

       28
       28
       -
           C.border (Color.make `Gray ~variant:`V300 ());

     

       29
       29
       -
           E.rounded_sm;

     

       30
       30
       -
           S.(to_class (p (Size.rem 0.75)));

     

       31
       31
       -
         ] in

     

       32
       32
       -
         Printf.printf "Form input with reset: %s\n" (to_string form_input);

     

       33
       33
       -
       

     

       34
       34
       -
         (* 4. Animation utilities properly organized *)

     

       35
       35
       -
         let animated_button = tw [

     

       36
       36
       -
           C.bg (Color.make `Green ~variant:`V500 ());

     

       37
       37
       -
           C.text (Color.make `White ());

     

       38
       38
       -
           S.(to_class (px (Size.rem 1.5)));

     

       39
       39
       -
           S.(to_class (py (Size.rem 0.75)));

     

       40
       40
       -
           E.rounded_lg;

     

       41
       41
       -
           E.transition `All;

     

       42
       42
       -
           E.duration 200;

     

       43
       43
       -
           E.ease `In_out;

     

       44
       44
       -
           Variants.hover (C.bg (Color.make `Green ~variant:`V600 ()));

     

       45
       45
       -
         ] in

     

       46
       46
       -
         Printf.printf "Animated button: %s\n" (to_string animated_button);

     

       47
       47
       -
       

     

       48
       48
       -
         (* 5. Stack layout pattern *)

     

       49
       49
       -
         let vertical_stack = P.stack ~gap:(Size.rem 1.0) () in

     

       50
       50
       -
         Printf.printf "Vertical stack: %s\n" (to_string vertical_stack);

     

       51
       51
       -
       

     

       52
       52
       -
         (* 6. Conditional classes *)

     

       53
       53
       -
         let responsive_classes = class_list [

     

       54
       54
       -
           (P.flex_center, true);

     

       55
       55
       -
           (R.button, false);

     

       56
       56
       -
           (E.shadow_lg, true);

     

       57
       57
       -
         ] in

     

       58
       58
       -
         Printf.printf "Conditional classes: %s\n" (to_string responsive_classes);

     

       59
       59
       -
       

     

       60
       60
       -
         (* 7. Focus ring utility *)

     

       61
       61
       -
         let accessible_button = tw [

     

       62
       62
       -
           C.bg (Color.make `Purple ~variant:`V500 ());

     

       63
       63
       -
           C.text (Color.make `White ());

     

       64
       64
       -
           S.(to_class (px (Size.rem 1.0)));

     

       65
       65
       -
           S.(to_class (py (Size.rem 0.5)));

     

       66
       66
       -
           E.rounded_md;

     

       67
       67
       -
           focus_ring ();

     

       68
       68
       -
         ] in

     

       69
       69
       -
         Printf.printf "Accessible button: %s\n" (to_string accessible_button);

     

       70
       70
       -
       

     

       71
       71
       -
         Printf.printf "\n=== API Improvements Summary ===\n";

     

       72
       72
       -
         Printf.printf "✅ Animation utilities moved to Effects module\n";

     

       73
       73
       -
         Printf.printf "✅ Reset utilities organized in Reset module\n";

     

       74
       74
       -
         Printf.printf "✅ Layout patterns in Patterns module\n";

     

       75
       75
       -
         Printf.printf "✅ Convenience aliases (C, S, E, T, F, G, P, R)\n";

     

       76
       76
       -
         Printf.printf "✅ Consistent return types across modules\n";

     

       77
       77
       -
         Printf.printf "✅ Comprehensive test coverage setup\n";

-58

examples/module_usage.ml

···

       1
       1
       -
       (* Example showing how to use module aliases to access individual utilities *)

     

       2
       2
       -
       

     

       3
       3
       -
       let () =

     

       4
       4
       -
         (* Using individual modules through Tailwind module aliases *)

     

       5
       5
       -
         let blue_bg = Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V500 ()) in

     

       6
       6
       -
         let white_text = Tailwind.Color.text Tailwind.Color.white in

     

       7
       7
       -
         let padding = Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.0))) in

     

       8
       8
       -
         let rounded = Tailwind.Effects.rounded_md in

     

       9
       9
       -
         let flex_display = Tailwind.Display.flex in

     

       10
       10
       -
         let center_items = Tailwind.Flexbox.(to_class (align_items `Center)) in

     

       11
       11
       -
         

     

       12
       12
       -
         (* Combine all classes *)

     

       13
       13
       -
         let button_classes = Tailwind.tw [

     

       14
       14
       -
           blue_bg;

     

       15
       15
       -
           white_text;

     

       16
       16
       -
           padding;

     

       17
       17
       -
           rounded;

     

       18
       18
       -
           flex_display;

     

       19
       19
       -
           center_items;

     

       20
       20
       -
         ] in

     

       21
       21
       -
         

     

       22
       22
       -
         (* Typography example *)

     

       23
       23
       -
         let heading = Tailwind.Typography.(to_class (font_size `Xl2)) in

     

       24
       24
       -
         let bold_text = Tailwind.Typography.(to_class (font_weight `Bold)) in

     

       25
       25
       -
         let center_align = Tailwind.Typography.(to_class (text_align `Center)) in

     

       26
       26
       -
         

     

       27
       27
       -
         let heading_classes = Tailwind.tw [

     

       28
       28
       -
           heading;

     

       29
       29
       -
           bold_text;

     

       30
       30
       -
           center_align;

     

       31
       31
       -
         ] in

     

       32
       32
       -
         

     

       33
       33
       -
         (* Layout example *)

     

       34
       34
       -
         let full_width = Tailwind.Layout.w_full in

     

       35
       35
       -
         let fixed_height = Tailwind.Layout.(to_class (height (Tailwind.Size.rem 10.0))) in

     

       36
       36
       -
         let overflow_hidden = Tailwind.Layout.(to_class (overflow `All `Hidden)) in

     

       37
       37
       -
         

     

       38
       38
       -
         let container_classes = Tailwind.tw [

     

       39
       39
       -
           full_width;

     

       40
       40
       -
           fixed_height;

     

       41
       41
       -
           overflow_hidden;

     

       42
       42
       -
           Tailwind.Patterns.flex_center; (* Utility function *)

     

       43
       43
       -
         ] in

     

       44
       44
       -
         

     

       45
       45
       -
         Printf.printf "=== Module Alias Usage Examples ===\n";

     

       46
       46
       -
         Printf.printf "Button: %s\n" (Tailwind.to_string button_classes);

     

       47
       47
       -
         Printf.printf "Heading: %s\n" (Tailwind.to_string heading_classes);

     

       48
       48
       -
         Printf.printf "Container: %s\n" (Tailwind.to_string container_classes);

     

       49
       49
       -
         

     

       50
       50
       -
         (* Show conditional classes *)

     

       51
       51
       -
         let is_primary = true in

     

       52
       52
       -
         let conditional_button = Tailwind.class_list [

     

       53
       53
       -
           (Tailwind.tw [padding; rounded], true);

     

       54
       54
       -
           (blue_bg, is_primary);

     

       55
       55
       -
           (Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V300 ()), not is_primary);

     

       56
       56
       -
         ] in

     

       57
       57
       -
         

     

       58
       58
       -
         Printf.printf "Conditional button: %s\n" (Tailwind.to_string conditional_button)

-95

examples/simple_html_example.ml

···

       1
       1
       -
       (* Simple HTML generation example using Tailwind classes *)

     

       2
       2
       -
       

     

       3
       3
       -
       open Htmlit

     

       4
       4
       -
       

     

       5
       5
       -
       let classes_attr tailwind_classes = 

     

       6
       6
       -
         At.class' (Tailwind.to_string tailwind_classes)

     

       7
       7
       -
       

     

       8
       8
       -
       let () =

     

       9
       9
       -
         Printf.printf "=== Simple Tailwind HTML Example ===\n";

     

       10
       10
       -
         

     

       11
       11
       -
         (* Create a simple card *)

     

       12
       12
       -
         let card_classes = Tailwind.tw [

     

       13
       13
       -
           Tailwind.Effects.rounded_lg;

     

       14
       14
       -
           Tailwind.Effects.shadow_md;

     

       15
       15
       -
           Tailwind.Color.bg Tailwind.Color.white;

     

       16
       16
       -
           Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5)));

     

       17
       17
       -
           Tailwind.Layout.(to_class (max_width (Tailwind.Size.rem 20.0)));

     

       18
       18
       -
         ] in

     

       19
       19
       -
         

     

       20
       20
       -
         let card = El.div ~at:[classes_attr card_classes] [

     

       21
       21
       -
           El.h2 ~at:[classes_attr (Tailwind.tw [

     

       22
       22
       -
             Tailwind.Typography.(to_class (font_size `Xl));

     

       23
       23
       -
             Tailwind.Typography.(to_class (font_weight `Bold));

     

       24
       24
       -
             Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 1.0)));

     

       25
       25
       -
           ])] [El.txt "Welcome Card"];

     

       26
       26
       -
           

     

       27
       27
       -
           El.p ~at:[classes_attr (Tailwind.tw [

     

       28
       28
       -
             Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ());

     

       29
       29
       -
             Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 1.5)));

     

       30
       30
       -
           ])] [El.txt "This is a simple card component built with Tailwind CSS classes."];

     

       31
       31
       -
           

     

       32
       32
       -
           El.button ~at:[

     

       33
       33
       -
             classes_attr (Tailwind.tw [

     

       34
       34
       -
               Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ());

     

       35
       35
       -
               Tailwind.Color.text Tailwind.Color.white;

     

       36
       36
       -
               Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 1.0)));

     

       37
       37
       -
               Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 0.5)));

     

       38
       38
       -
               Tailwind.Effects.rounded_md;

     

       39
       39
       -
               Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V700 ()));

     

       40
       40
       -
             ]);

     

       41
       41
       -
           ] [El.txt "Click Me"];

     

       42
       42
       -
         ] in

     

       43
       43
       -
         

     

       44
       44
       -
         (* Create a simple layout *)

     

       45
       45
       -
         let page = El.div ~at:[classes_attr (Tailwind.tw [

     

       46
       46
       -
           Tailwind.Layout.(to_class (min_height (Tailwind.Size.screen)));

     

       47
       47
       -
           Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V50 ());

     

       48
       48
       -
           Tailwind.Display.flex;

     

       49
       49
       -
           Tailwind.Flexbox.(to_class (align_items `Center));

     

       50
       50
       -
           Tailwind.Flexbox.(to_class (justify `Center));

     

       51
       51
       -
           Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.0)));

     

       52
       52
       -
         ])] [card] in

     

       53
       53
       -
         

     

       54
       54
       -
         (* Generate HTML *)

     

       55
       55
       -
         let html_doc = El.html [

     

       56
       56
       -
           El.head [

     

       57
       57
       -
             El.title [El.txt "Tailwind HTML Example"];

     

       58
       58
       -
             El.script ~at:[At.src "https://cdn.tailwindcss.com"] [];

     

       59
       59
       -
           ];

     

       60
       60
       -
           El.body [page];

     

       61
       61
       -
         ] in

     

       62
       62
       -
         

     

       63
       63
       -
         let html_string = El.to_string ~doctype:true html_doc in

     

       64
       64
       -
         

     

       65
       65
       -
         Printf.printf "Generated HTML document (%d characters)\n" (String.length html_string);

     

       66
       66
       -
         Printf.printf "HTML preview:\n%s\n" (String.sub html_string 0 (min 500 (String.length html_string)));

     

       67
       67
       -
         

     

       68
       68
       -
         (* Show individual class generation *)

     

       69
       69
       -
         Printf.printf "\n=== Individual Class Examples ===\n";

     

       70
       70
       -
         Printf.printf "Primary button: %s\n" (Tailwind.to_string (Tailwind.tw [

     

       71
       71
       -
           Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ());

     

       72
       72
       -
           Tailwind.Color.text Tailwind.Color.white;

     

       73
       73
       -
           Tailwind.Effects.rounded_md;

     

       74
       74
       -
         ]));

     

       75
       75
       -
         

     

       76
       76
       -
         Printf.printf "Card container: %s\n" (Tailwind.to_string (Tailwind.tw [

     

       77
       77
       -
           Tailwind.Effects.rounded_lg;

     

       78
       78
       -
           Tailwind.Effects.shadow_md;

     

       79
       79
       -
           Tailwind.Color.bg Tailwind.Color.white;

     

       80
       80
       -
         ]));

     

       81
       81
       -
         

     

       82
       82
       -
         Printf.printf "Flex center: %s\n" (Tailwind.to_string (Tailwind.tw [

     

       83
       83
       -
           Tailwind.Display.flex;

     

       84
       84
       -
           Tailwind.Flexbox.(to_class (align_items `Center));

     

       85
       85
       -
           Tailwind.Flexbox.(to_class (justify `Center));

     

       86
       86
       -
         ]));

     

       87
       87
       -
         

     

       88
       88
       -
         Printf.printf "Responsive grid: %s\n" (Tailwind.to_string (Tailwind.tw [

     

       89
       89
       -
           Tailwind.Display.grid;

     

       90
       90
       -
           Tailwind.Grid.(to_class (template_cols (`Cols 1)));

     

       91
       91
       -
           Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Grid.(to_class (template_cols (`Cols 2))))));

     

       92
       92
       -
           Tailwind.Responsive.(to_class (at_breakpoint `Lg (Tailwind.Grid.(to_class (template_cols (`Cols 3))))));

     

       93
       93
       -
         ]));

     

       94
       94
       -
         

     

       95
       95
       -
         Printf.printf "\nTailwind HTML library working successfully!\n"

-18

examples/tailwind_html_example.ml

···

       1
       1
       -
       (* Tailwind HTML Components Example - Placeholder *)

     

       2
       2
       -
       

     

       3
       3
       -
       let () =

     

       4
       4
       -
         Printf.printf "Tailwind HTML Components Example\n";

     

       5
       5
       -
         Printf.printf "=================================\n\n";

     

       6
       6
       -
         Printf.printf "This example demonstrates how HTML components will work\n";

     

       7
       7
       -
         Printf.printf "once the tailwind-html library is fully implemented.\n\n";

     

       8
       8
       -
         

     

       9
       9
       -
         Printf.printf "The tailwind-html library will provide:\n";

     

       10
       10
       -
         Printf.printf "  - Pre-built button components\n";

     

       11
       11
       -
         Printf.printf "  - Card layouts\n";

     

       12
       12
       -
         Printf.printf "  - Form components\n";

     

       13
       13
       -
         Printf.printf "  - Navigation patterns\n";

     

       14
       14
       -
         Printf.printf "  - Modal dialogs\n";

     

       15
       15
       -
         Printf.printf "  - And more!\n\n";

     

       16
       16
       -
         

     

       17
       17
       -
         Printf.printf "For now, you can build these components manually using\n";

     

       18
       18
       -
         Printf.printf "the core Tailwind library as shown in the other examples.\n"