commit fa7c7cabc292c56a4831c955b158a3518345afe5 · anil.recoil.org/ocaml-tailwind

+275

README.md

···

       1
       1
       +
       # Tailwind OCaml

     

       2
       2
       +
       

     

       3
       3
       +
       An OCaml library for generating Tailwind CSS classes with compile-time

     

       4
       4
       +
       validation and a companion HTML generation library using Htmlit.

     

       5
       5
       +
       

     

       6
       6
       +
       This project provides two main libraries:

     

       7
       7
       +
       

     

       8
       8
       +
       - **`tailwind`**: Core library for type-safe Tailwind CSS class generation

     

       9
       9
       +
       - **`tailwind-html`**: HTML component library built on top of [Htmlit](https://github.com/dbuenzli/htmlit)

     

       10
       10
       +
       

     

       11
       11
       +
       ## Features

     

       12
       12
       +
       

     

       13
       13
       +
       - Compile-time validation of Tailwind classes

     

       14
       14
       +
       - Type-safe color variants and sizes

     

       15
       15
       +
       - Exhaustive pattern matching for all utility classes

     

       16
       16
       +
       

     

       17
       17
       +
       ### Comprehensive Coverage

     

       18
       18
       +
       - **Typography**: Font sizes, weights, line heights, text alignment, decorations

     

       19
       19
       +
       - **Layout**: Display, position, flexbox, grid, spacing

     

       20
       20
       +
       - **Colors**: Full color palette with variants

     

       21
       21
       +
       - **Effects**: Shadows, borders, rounded corners, transitions

     

       22
       22
       +
       - **Responsive**: Breakpoint-based responsive utilities

     

       23
       23
       +
       - **Variants**: Hover, focus, and other state variants

     

       24
       24
       +
       

     

       25
       25
       +
       ### Using Dune

     

       26
       26
       +
       

     

       27
       27
       +
       Add to your `dune-project`:

     

       28
       28
       +
       

     

       29
       29
       +
       ```dune

     

       30
       30
       +
       (package

     

       31
       31
       +
        (name myproject)

     

       32
       32
       +
        (depends

     

       33
       33
       +
         ocaml

     

       34
       34
       +
         dune

     

       35
       35
       +
         tailwind

     

       36
       36
       +
         tailwind-html

     

       37
       37
       +
         htmlit))

     

       38
       38
       +
       ```

     

       39
       39
       +
       

     

       40
       40
       +
       ## Quick Start

     

       41
       41
       +
       

     

       42
       42
       +
       ### Basic Usage

     

       43
       43
       +
       

     

       44
       44
       +
       ```ocaml

     

       45
       45
       +
       open Tailwind

     

       46
       46
       +
       

     

       47
       47
       +
       (* Create a styled div *)

     

       48
       48
       +
       let styled_div = 

     

       49
       49
       +
         let classes = tw [

     

       50
       50
       +
           Display.flex;

     

       51
       51
       +
           Flexbox.(to_class (justify `Center));

     

       52
       52
       +
           Flexbox.(to_class (align_items `Center));

     

       53
       53
       +
           Color.bg (Color.make `Gray ~variant:`V100 ());

     

       54
       54
       +
           Spacing.(to_class (p (Size.rem 2.0)));

     

       55
       55
       +
         ] in

     

       56
       56
       +
         Printf.sprintf "<div class=\"%s\">Content</div>" (to_string classes)

     

       57
       57
       +
       ```

     

       58
       58
       +
       

     

       59
       59
       +
       ### With Htmlit Integration

     

       60
       60
       +
       

     

       61
       61
       +
       ```ocaml

     

       62
       62
       +
       open Htmlit

     

       63
       63
       +
       open Tailwind

     

       64
       64
       +
       

     

       65
       65
       +
       let classes_attr tailwind_classes = 

     

       66
       66
       +
         At.class' (Tailwind.to_string tailwind_classes)

     

       67
       67
       +
       

     

       68
       68
       +
       let create_card title content =

     

       69
       69
       +
         El.div ~at:[classes_attr (tw [

     

       70
       70
       +
           Patterns.card;

     

       71
       71
       +
           Spacing.(to_class (p (Size.rem 1.5)));

     

       72
       72
       +
           Effects.shadow_md;

     

       73
       73
       +
         ])] [

     

       74
       74
       +
           El.h2 ~at:[classes_attr (tw [

     

       75
       75
       +
             Typography.(to_class (font_size `Xl));

     

       76
       76
       +
             Typography.(to_class (font_weight `Bold));

     

       77
       77
       +
             Spacing.(to_class (mb (Size.rem 1.0)));

     

       78
       78
       +
           ])] [El.txt title];

     

       79
       79
       +
           El.p [El.txt content];

     

       80
       80
       +
         ]

     

       81
       81
       +
       ```

     

       82
       82
       +
       

     

       83
       83
       +
       ## Examples

     

       84
       84
       +
       

     

       85
       85
       +
       The `examples/` directory contains several demonstration files:

     

       86
       86
       +
       

     

       87
       87
       +
       ### Running Examples

     

       88
       88
       +
       

     

       89
       89
       +
       ```bash

     

       90
       90
       +
       # Build all examples

     

       91
       91
       +
       dune build examples/

     

       92
       92
       +
       

     

       93
       93
       +
       # Run comprehensive showcase (generates HTML + CSS)

     

       94
       94
       +
       dune exec examples/comprehensive_showcase.exe

     

       95
       95
       +
       

     

       96
       96
       +
       # Run basic usage example

     

       97
       97
       +
       dune exec examples/basic_usage.exe

     

       98
       98
       +
       

     

       99
       99
       +
       # Run HTML integration example  

     

       100
       100
       +
       dune exec examples/tailwind_html_example.exe

     

       101
       101
       +
       ```

     

       102
       102
       +
       

     

       103
       103
       +
       ### Comprehensive Showcase

     

       104
       104
       +
       

     

       105
       105
       +
       The comprehensive showcase demonstrates all library features and generates:

     

       106
       106
       +
       - `showcase.html` - Complete HTML page with all Tailwind classes

     

       107
       107
       +
       - `input.css` - Tailwind v4 CSS with custom theme extensions

     

       108
       108
       +
       

     

       109
       109
       +
       ```bash

     

       110
       110
       +
       dune exec examples/comprehensive_showcase.exe

     

       111
       111
       +
       # Then open showcase.html in your browser

     

       112
       112
       +
       ```

     

       113
       113
       +
       

     

       114
       114
       +
       ## Tailwind v4 Support

     

       115
       115
       +
       

     

       116
       116
       +
       This library supports Tailwind v4's CSS-first approach:

     

       117
       117
       +
       

     

       118
       118
       +
       ```css

     

       119
       119
       +
       /* Generated input.css - no config file needed! */

     

       120
       120
       +
       @import "tailwindcss";

     

       121
       121
       +
       

     

       122
       122
       +
       @theme {

     

       123
       123
       +
         --font-sans: 'Inter', system-ui, sans-serif;

     

       124
       124
       +
         --color-brand-600: #2563eb;

     

       125
       125
       +
         /* Custom theme extensions */

     

       126
       126
       +
       }

     

       127
       127
       +
       ```

     

       128
       128
       +
       

     

       129
       129
       +
       To process the CSS:

     

       130
       130
       +
       ```bash

     

       131
       131
       +
       npx tailwindcss@next -i input.css -o output.css

     

       132
       132
       +
       ```

     

       133
       133
       +
       

     

       134
       134
       +
       ## Module Documentation

     

       135
       135
       +
       

     

       136
       136
       +
       ### Core Modules

     

       137
       137
       +
       

     

       138
       138
       +
       #### `Tailwind`

     

       139
       139
       +
       Main module that exports all utilities and provides the `tw` function for composing classes.

     

       140
       140
       +
       

     

       141
       141
       +
       #### `Color`

     

       142
       142
       +
       Type-safe color system with variants:

     

       143
       143
       +
       ```ocaml

     

       144
       144
       +
       Color.bg (Color.make `Blue ~variant:`V600 ())

     

       145
       145
       +
       Color.text Color.white

     

       146
       146
       +
       Color.border (Color.make `Gray ~variant:`V200 ())

     

       147
       147
       +
       ```

     

       148
       148
       +
       

     

       149
       149
       +
       #### `Typography`

     

       150
       150
       +
       Font utilities:

     

       151
       151
       +
       ```ocaml

     

       152
       152
       +
       Typography.(to_class (font_size `Xl2))

     

       153
       153
       +
       Typography.(to_class (font_weight `Bold))

     

       154
       154
       +
       Typography.(to_class (line_height `Relaxed))

     

       155
       155
       +
       ```

     

       156
       156
       +
       

     

       157
       157
       +
       #### `Spacing`

     

       158
       158
       +
       Margin and padding utilities:

     

       159
       159
       +
       ```ocaml

     

       160
       160
       +
       Spacing.(to_class (p (Size.rem 1.0)))    (* padding *)

     

       161
       161
       +
       Spacing.(to_class (mx Size.auto))        (* margin-x auto *)

     

       162
       162
       +
       Spacing.(to_class (gap `All (Size.px 16.0))) (* gap *)

     

       163
       163
       +
       ```

     

       164
       164
       +
       

     

       165
       165
       +
       #### `Layout`

     

       166
       166
       +
       Layout utilities:

     

       167
       167
       +
       ```ocaml

     

       168
       168
       +
       Layout.(to_class (width (Size.percent 100.0)))

     

       169
       169
       +
       Layout.(to_class (height Size.screen))

     

       170
       170
       +
       Layout.(to_class (max_width (Size.rem 64.0)))

     

       171
       171
       +
       ```

     

       172
       172
       +
       

     

       173
       173
       +
       #### `Flexbox`

     

       174
       174
       +
       Flexbox utilities:

     

       175
       175
       +
       ```ocaml

     

       176
       176
       +
       Display.flex

     

       177
       177
       +
       Flexbox.(to_class (justify `Between))

     

       178
       178
       +
       Flexbox.(to_class (align_items `Center))

     

       179
       179
       +
       Flexbox.(to_class (direction `Col))

     

       180
       180
       +
       ```

     

       181
       181
       +
       

     

       182
       182
       +
       #### `Grid`

     

       183
       183
       +
       CSS Grid utilities:

     

       184
       184
       +
       ```ocaml

     

       185
       185
       +
       Display.grid

     

       186
       186
       +
       Grid.(to_class (template_cols (`Cols 3)))

     

       187
       187
       +
       Grid.(to_class (gap (Size.rem 1.0)))

     

       188
       188
       +
       ```

     

       189
       189
       +
       

     

       190
       190
       +
       #### `Effects`

     

       191
       191
       +
       Visual effects:

     

       192
       192
       +
       ```ocaml

     

       193
       193
       +
       Effects.shadow_lg

     

       194
       194
       +
       Effects.rounded_md

     

       195
       195
       +
       Effects.border

     

       196
       196
       +
       Effects.transition `All

     

       197
       197
       +
       ```

     

       198
       198
       +
       

     

       199
       199
       +
       #### `Responsive`

     

       200
       200
       +
       Responsive utilities:

     

       201
       201
       +
       ```ocaml

     

       202
       202
       +
       Responsive.(to_class (at_breakpoint `Md Display.flex))

     

       203
       203
       +
       Responsive.(to_class (at_breakpoint `Lg (Grid.(to_class (template_cols (`Cols 4))))))

     

       204
       204
       +
       ```

     

       205
       205
       +
       

     

       206
       206
       +
       #### `Variants`

     

       207
       207
       +
       State variants:

     

       208
       208
       +
       ```ocaml

     

       209
       209
       +
       Variants.hover (Color.bg (Color.make `Blue ~variant:`V700 ()))

     

       210
       210
       +
       Variants.focus Effects.ring

     

       211
       211
       +
       ```

     

       212
       212
       +
       

     

       213
       213
       +
       #### `Patterns`

     

       214
       214
       +
       Common layout patterns:

     

       215
       215
       +
       ```ocaml

     

       216
       216
       +
       Patterns.container ()

     

       217
       217
       +
       Patterns.card

     

       218
       218
       +
       Patterns.flex_center

     

       219
       219
       +
       Patterns.stack ~gap:(Size.rem 1.0) ()

     

       220
       220
       +
       Patterns.sticky_header

     

       221
       221
       +
       ```

     

       222
       222
       +
       

     

       223
       223
       +
       ### HTML Components (`tailwind-html`)

     

       224
       224
       +
       

     

       225
       225
       +
       Pre-built components using Htmlit:

     

       226
       226
       +
       

     

       227
       227
       +
       ```ocaml

     

       228
       228
       +
       open Tailwind_html

     

       229
       229
       +
       

     

       230
       230
       +
       (* Button component *)

     

       231
       231
       +
       Button.primary ~text:"Click me" ~onclick:"handleClick()"

     

       232
       232
       +
       

     

       233
       233
       +
       (* Card component *)

     

       234
       234
       +
       Card.simple ~title:"Card Title" ~content:"Card content here"

     

       235
       235
       +
       

     

       236
       236
       +
       (* Layout components *)

     

       237
       237
       +
       Layout.container [

     

       238
       238
       +
         Layout.row [

     

       239
       239
       +
           Layout.col ~span:6 [content];

     

       240
       240
       +
           Layout.col ~span:6 [content];

     

       241
       241
       +
         ]

     

       242
       242
       +
       ]

     

       243
       243
       +
       ```

     

       244
       244
       +
       

     

       245
       245
       +
       ## Testing

     

       246
       246
       +
       

     

       247
       247
       +
       Run the test suite:

     

       248
       248
       +
       

     

       249
       249
       +
       ```bash

     

       250
       250
       +
       dune test

     

       251
       251
       +
       ```

     

       252
       252
       +
       

     

       253
       253
       +
       ## Contributing

     

       254
       254
       +
       

     

       255
       255
       +
       Contributions are welcome! Please:

     

       256
       256
       +
       

     

       257
       257
       +
       1. Fork the repository

     

       258
       258
       +
       2. Create a feature branch

     

       259
       259
       +
       3. Make your changes with tests

     

       260
       260
       +
       4. Submit a pull request

     

       261
       261
       +
       

     

       262
       262
       +
       ## License

     

       263
       263
       +
       

     

       264
       264
       +
       MIT License - see LICENSE file for details

     

       265
       265
       +
       

     

       266
       266
       +
       ## Acknowledgments

     

       267
       267
       +
       

     

       268
       268
       +
       - Built on top of [Htmlit](https://github.com/dbuenzli/htmlit) by Daniel Bünzli

     

       269
       269
       +
       - Inspired by [Tailwind CSS](https://tailwindcss.com/)

     

       270
       270
       +
       

     

       271
       271
       +
       ## Resources

     

       272
       272
       +
       

     

       273
       273
       +
       - [Tailwind CSS Documentation](https://tailwindcss.com/docs)

     

       274
       274
       +
       - [Tailwind v4 Alpha](https://tailwindcss.com/blog/tailwindcss-v4-alpha)

     

       275
       275
       +
       - [Htmlit Documentation](https://erratique.ch/software/htmlit/doc/)

dune-project

···

       22
       22
        
        (depends

     

       23
       23
        
         ocaml

     

       24
       24
        
         (dune (>= 3.0))

     

       25
       25
       +
         (alcotest :with-test)

     

       26
       26
       +
         (qcheck :with-test)

     

       25
       27
        
         (odoc :with-doc)))

     

       26
       28
        
       

     

       27
       29
        
       (package

     

       28
       30
        
        (name tailwind-html)

     

       29
       31
        
        (synopsis "Tailwind CSS integration with Htmlit")

     

       30
       32
        
        (description "High-level component library using Tailwind CSS with Htmlit")

     

       33
       33
       +
        (allow_empty)

     

       31
       34
        
        (depends

     

       32
       35
        
         ocaml

     

       33
       36
        
         (dune (>= 3.0))

     

       34
       37
        
         tailwind

     

       35
       38
        
         (htmlit (>= 0.1.0))

     

       39
       39
       +
         (alcotest :with-test)

     

       40
       40
       +
         (qcheck :with-test)

     

       36
       41
        
         (odoc :with-doc)))

+8 -10

examples/advanced_features.ml

···

       1
       1
       -
       (* Example showcasing the advanced features that were implemented from placeholders *)

     

       2
       2
       -
       

     

       3
       1
        
       let () =

     

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

     

       5
       3
        
         

     

       6
       4
        
         (* V4 Container Queries *)

     

       7
       7
       -
         let container_responsive = Tailwind.V4.container_query Tailwind.Responsive.Lg 

     

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

     

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

     

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

     

       10
       8
        
         

     
···

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

     

       23
       21
        
         

     

       24
       22
        
         let focus_visible = Tailwind.Variants.apply 

     

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

     

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

     

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

     

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

     

       28
       26
        
         

     

       29
       27
        
         (* Responsive with Media Features *)

     

       30
       28
        
         let dark_mode = Tailwind.Responsive.(apply 

     

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

     

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

     

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

     

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

     

       34
       32
        
         

     

       35
       33
        
         let motion_safe = Tailwind.Responsive.(apply

     

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

     

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

     

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

     

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

     

       39
       37
        
         

     
···

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

     

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

     

       43
       41
        
         

     

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

     

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

     

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

     

       46
       44
        
         

     

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

     
···

       55
       53
        
         

     

       56
       54
        
         (* Complex Combination *)

     

       57
       55
        
         let complex_card = Tailwind.tw [

     

       58
       58
       -
           Tailwind.Color.bg (Tailwind.Color.make White ());

     

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

     

       59
       57
        
           Tailwind.Effects.rounded_lg;

     

       60
       58
        
           Tailwind.Effects.shadow_md;

     

       61
       59
        
           backdrop_blur;

     

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

     

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

     

       64
       64
       -
           Tailwind.transition `All;

     

       62
       62
       +
           Tailwind.Effects.transition `All;

     

       65
       63
        
           hover_effect;

     

       66
       64
        
         ] in

     

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

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

+10 -10

examples/basic_usage.ml

···

       4
       4
        
       

     

       5
       5
        
       let () =

     

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

     

       7
       7
       -
         let flex_center_classes = Tailwind.flex_center in

     

       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.container ~center:true () in

     

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

     

       10
       10
        
         

     

       11
       11
       -
         (* Utility patterns *)

     

       12
       12
       -
         let button_reset = Tailwind.button_reset in

     

       13
       13
       -
         let input_reset = Tailwind.input_reset in

     

       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.transition `All in

     

       18
       18
       -
         let duration_300 = Tailwind.duration 300 in

     

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

     

       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.flex_center, true);

     

       24
       24
       -
           (Tailwind.button_reset, false);

     

       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";

+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"

+252

examples/comprehensive_showcase_07.ml

···

       1
       1
       +
       (* Example 07: Comprehensive Showcase - Full Application Demo *)

     

       2
       2
       +
       

     

       3
       3
       +
       open Htmlit

     

       4
       4
       +
       open Tailwind

     

       5
       5
       +
       

     

       6
       6
       +
       let classes_attr tailwind_classes = 

     

       7
       7
       +
         At.class' (Tailwind.to_string tailwind_classes)

     

       8
       8
       +
       

     

       9
       9
       +
       let create_comprehensive_html_page () =

     

       10
       10
       +
         (* Document structure with all features demonstrated *)

     

       11
       11
       +
         let html_doc = El.html [

     

       12
       12
       +
           El.head [

     

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

     

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

     

       15
       15
       +
             El.title [El.txt "Tailwind OCaml - Complete Feature Showcase"];

     

       16
       16
       +
             El.link ~at:[At.rel "stylesheet"; At.href "comprehensive_showcase_07.css"] ();

     

       17
       17
       +
           ];

     

       18
       18
       +
           

     

       19
       19
       +
           El.body ~at:[classes_attr (Tailwind.tw [

     

       20
       20
       +
             Color.bg (Color.make `Gray ~variant:`V50 ());

     

       21
       21
       +
             Typography.(to_class (font_size `Base));

     

       22
       22
       +
             Typography.(to_class (line_height `Normal));

     

       23
       23
       +
           ])] [

     

       24
       24
       +
             (* Header with navigation *)

     

       25
       25
       +
             El.header ~at:[classes_attr (Tailwind.tw [

     

       26
       26
       +
               Color.bg Color.white;

     

       27
       27
       +
               Effects.shadow_lg;

     

       28
       28
       +
               Effects.border;

     

       29
       29
       +
               Color.border (Color.make `Gray ~variant:`V200 ());

     

       30
       30
       +
               Patterns.sticky_header;

     

       31
       31
       +
             ])] [

     

       32
       32
       +
               El.div ~at:[classes_attr (Tailwind.tw [

     

       33
       33
       +
                 Patterns.container ();

     

       34
       34
       +
                 Spacing.(to_class (px (Size.rem 1.0)));

     

       35
       35
       +
               ])] [

     

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

     

       37
       37
       +
                   Display.flex;

     

       38
       38
       +
                   Flexbox.(to_class (justify `Between));

     

       39
       39
       +
                   Flexbox.(to_class (align_items `Center));

     

       40
       40
       +
                   Layout.(to_class (height (Size.rem 4.0)));

     

       41
       41
       +
                 ])] [

     

       42
       42
       +
                   (* Brand with gradient text *)

     

       43
       43
       +
                   El.h1 ~at:[classes_attr (Tailwind.tw [

     

       44
       44
       +
                     Typography.(to_class (font_size `Xl2));

     

       45
       45
       +
                     Typography.(to_class (font_weight `Bold));

     

       46
       46
       +
                     Color.text (Color.make `Blue ~variant:`V600 ());

     

       47
       47
       +
                   ])] [El.txt "Tailwind OCaml"];

     

       48
       48
       +
                   

     

       49
       49
       +
                   (* Navigation items with hover effects *)

     

       50
       50
       +
                   El.nav ~at:[classes_attr (Tailwind.tw [

     

       51
       51
       +
                     Display.flex;

     

       52
       52
       +
                     Spacing.(to_class (gap `All (Size.rem 2.0)));

     

       53
       53
       +
                     Flexbox.(to_class (align_items `Center));

     

       54
       54
       +
                   ])] [

     

       55
       55
       +
                     El.a ~at:[At.href "#typography"; classes_attr (Tailwind.tw [

     

       56
       56
       +
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       57
       57
       +
                       Variants.hover (Color.text (Color.make `Gray ~variant:`V900 ()));

     

       58
       58
       +
                       Effects.transition `All;

     

       59
       59
       +
                     ])] [El.txt "Typography"];

     

       60
       60
       +
                     El.a ~at:[At.href "#layout"; classes_attr (Tailwind.tw [

     

       61
       61
       +
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       62
       62
       +
                       Variants.hover (Color.text (Color.make `Gray ~variant:`V900 ()));

     

       63
       63
       +
                       Effects.transition `All;

     

       64
       64
       +
                     ])] [El.txt "Layout"];

     

       65
       65
       +
                     El.a ~at:[At.href "#components"; classes_attr (Tailwind.tw [

     

       66
       66
       +
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       67
       67
       +
                       Variants.hover (Color.text (Color.make `Gray ~variant:`V900 ()));

     

       68
       68
       +
                       Effects.transition `All;

     

       69
       69
       +
                     ])] [El.txt "Components"];

     

       70
       70
       +
                     

     

       71
       71
       +
                     (* CTA Button *)

     

       72
       72
       +
                     El.button ~at:[classes_attr (Tailwind.tw [

     

       73
       73
       +
                       Color.bg (Color.make `Blue ~variant:`V600 ());

     

       74
       74
       +
                       Color.text Color.white;

     

       75
       75
       +
                       Spacing.(to_class (px (Size.rem 1.0)));

     

       76
       76
       +
                       Spacing.(to_class (py (Size.rem 0.5)));

     

       77
       77
       +
                       Effects.rounded_md;

     

       78
       78
       +
                       Typography.(to_class (font_size `Sm));

     

       79
       79
       +
                       Typography.(to_class (font_weight `Medium));

     

       80
       80
       +
                       Variants.hover (Color.bg (Color.make `Blue ~variant:`V700 ()));

     

       81
       81
       +
                       Effects.transition `All;

     

       82
       82
       +
                     ])] [El.txt "Get Started"];

     

       83
       83
       +
                   ];

     

       84
       84
       +
                 ];

     

       85
       85
       +
               ];

     

       86
       86
       +
             ];

     

       87
       87
       +
             

     

       88
       88
       +
             (* Main Content *)

     

       89
       89
       +
             El.main [

     

       90
       90
       +
               (* Hero Section *)

     

       91
       91
       +
               El.section ~at:[At.id "hero"; classes_attr (Tailwind.tw [

     

       92
       92
       +
                 Layout.(to_class (min_height Size.screen));

     

       93
       93
       +
                 Display.flex;

     

       94
       94
       +
                 Flexbox.(to_class (align_items `Center));

     

       95
       95
       +
                 Flexbox.(to_class (justify `Center));

     

       96
       96
       +
                 Color.bg (Color.make `Gray ~variant:`V900 ());

     

       97
       97
       +
                 Color.text Color.white;

     

       98
       98
       +
               ])] [

     

       99
       99
       +
                 El.div ~at:[At.class' "text-center container px-8"] [

     

       100
       100
       +
                   El.h1 ~at:[classes_attr (Tailwind.tw [

     

       101
       101
       +
                     Typography.(to_class (font_size `Xl5));

     

       102
       102
       +
                     Typography.(to_class (font_weight `Extrabold));

     

       103
       103
       +
                     Spacing.(to_class (mb (Size.rem 1.5)));

     

       104
       104
       +
                   ])] [El.txt "Type-Safe Tailwind CSS"];

     

       105
       105
       +
                   

     

       106
       106
       +
                   El.p ~at:[classes_attr (Tailwind.tw [

     

       107
       107
       +
                     Typography.(to_class (font_size `Xl));

     

       108
       108
       +
                     Color.text (Color.make `Gray ~variant:`V100 ());

     

       109
       109
       +
                     Spacing.(to_class (mb (Size.rem 2.0)));

     

       110
       110
       +
                     Typography.(to_class (line_height `Relaxed));

     

       111
       111
       +
                   ])] [El.txt "Build beautiful, responsive web interfaces with OCaml's type system and Tailwind's utility classes."];

     

       112
       112
       +
                   

     

       113
       113
       +
                   El.div ~at:[At.class' "flex flex-wrap gap-4 justify-center"] [

     

       114
       114
       +
                     El.button ~at:[At.class' "btn-primary"] [El.txt "🚀 Get Started"];

     

       115
       115
       +
                     El.button ~at:[At.class' "btn-ghost text-white hover:bg-white hover:text-gray-900"] [El.txt "📖 View Docs"];

     

       116
       116
       +
                   ];

     

       117
       117
       +
                 ];

     

       118
       118
       +
               ];

     

       119
       119
       +
               

     

       120
       120
       +
               (* Features Grid *)

     

       121
       121
       +
               El.section ~at:[At.class' "section bg-white"] [

     

       122
       122
       +
                 El.div ~at:[At.class' "container"] [

     

       123
       123
       +
                   El.h2 ~at:[At.class' "text-3xl font-bold text-center mb-12"] [El.txt "Features"];

     

       124
       124
       +
                   

     

       125
       125
       +
                   El.div ~at:[At.class' "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"] [

     

       126
       126
       +
                     (* Feature cards *)

     

       127
       127
       +
                     El.div ~at:[At.class' "card p-6"] [

     

       128
       128
       +
                       El.div ~at:[At.class' "w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"] [

     

       129
       129
       +
                         El.span ~at:[At.class' "text-2xl"] [El.txt "🎨"];

     

       130
       130
       +
                       ];

     

       131
       131
       +
                       El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Type-Safe Classes"];

     

       132
       132
       +
                       El.p ~at:[At.class' "text-gray-600"] [

     

       133
       133
       +
                         El.txt "Compile-time validation ensures your Tailwind classes are always correct."

     

       134
       134
       +
                       ];

     

       135
       135
       +
                     ];

     

       136
       136
       +
                     

     

       137
       137
       +
                     El.div ~at:[At.class' "card p-6"] [

     

       138
       138
       +
                       El.div ~at:[At.class' "w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"] [

     

       139
       139
       +
                         El.span ~at:[At.class' "text-2xl"] [El.txt "⚡"];

     

       140
       140
       +
                       ];

     

       141
       141
       +
                       El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Fast Development"];

     

       142
       142
       +
                       El.p ~at:[At.class' "text-gray-600"] [

     

       143
       143
       +
                         El.txt "Autocomplete and type hints speed up your development workflow."

     

       144
       144
       +
                       ];

     

       145
       145
       +
                     ];

     

       146
       146
       +
                     

     

       147
       147
       +
                     El.div ~at:[At.class' "card p-6"] [

     

       148
       148
       +
                       El.div ~at:[At.class' "w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"] [

     

       149
       149
       +
                         El.span ~at:[At.class' "text-2xl"] [El.txt "🔧"];

     

       150
       150
       +
                       ];

     

       151
       151
       +
                       El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Modular Design"];

     

       152
       152
       +
                       El.p ~at:[At.class' "text-gray-600"] [

     

       153
       153
       +
                         El.txt "Organized modules for colors, typography, layout, and more."

     

       154
       154
       +
                       ];

     

       155
       155
       +
                     ];

     

       156
       156
       +
                     

     

       157
       157
       +
                     El.div ~at:[At.class' "card p-6"] [

     

       158
       158
       +
                       El.div ~at:[At.class' "w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4"] [

     

       159
       159
       +
                         El.span ~at:[At.class' "text-2xl"] [El.txt "📱"];

     

       160
       160
       +
                       ];

     

       161
       161
       +
                       El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Responsive Design"];

     

       162
       162
       +
                       El.p ~at:[At.class' "text-gray-600"] [

     

       163
       163
       +
                         El.txt "Built-in responsive utilities for all screen sizes."

     

       164
       164
       +
                       ];

     

       165
       165
       +
                     ];

     

       166
       166
       +
                     

     

       167
       167
       +
                     El.div ~at:[At.class' "card p-6"] [

     

       168
       168
       +
                       El.div ~at:[At.class' "w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4"] [

     

       169
       169
       +
                         El.span ~at:[At.class' "text-2xl"] [El.txt "🎯"];

     

       170
       170
       +
                       ];

     

       171
       171
       +
                       El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Production Ready"];

     

       172
       172
       +
                       El.p ~at:[At.class' "text-gray-600"] [

     

       173
       173
       +
                         El.txt "Generate optimized CSS with Tailwind v4 CLI integration."

     

       174
       174
       +
                       ];

     

       175
       175
       +
                     ];

     

       176
       176
       +
                     

     

       177
       177
       +
                     El.div ~at:[At.class' "card p-6"] [

     

       178
       178
       +
                       El.div ~at:[At.class' "w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"] [

     

       179
       179
       +
                         El.span ~at:[At.class' "text-2xl"] [El.txt "🚀"];

     

       180
       180
       +
                       ];

     

       181
       181
       +
                       El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Modern Workflow"];

     

       182
       182
       +
                       El.p ~at:[At.class' "text-gray-600"] [

     

       183
       183
       +
                         El.txt "Integrates seamlessly with dune and modern OCaml tooling."

     

       184
       184
       +
                       ];

     

       185
       185
       +
                     ];

     

       186
       186
       +
                   ];

     

       187
       187
       +
                 ];

     

       188
       188
       +
               ];

     

       189
       189
       +
               

     

       190
       190
       +
               (* Code Example Section *)

     

       191
       191
       +
               El.section ~at:[At.class' "section bg-gray-50"] [

     

       192
       192
       +
                 El.div ~at:[At.class' "container"] [

     

       193
       193
       +
                   El.h2 ~at:[At.class' "text-3xl font-bold text-center mb-12"] [El.txt "Simple & Intuitive"];

     

       194
       194
       +
                   

     

       195
       195
       +
                   El.div ~at:[At.class' "max-w-4xl mx-auto"] [

     

       196
       196
       +
                     El.div ~at:[At.class' "bg-gray-900 rounded-lg p-6 text-white"] [

     

       197
       197
       +
                       El.pre ~at:[At.class' "text-sm overflow-x-auto"] [

     

       198
       198
       +
                         El.code [El.txt {|open Tailwind

     

       199
       199
       +
       

     

       200
       200
       +
       let button_classes = tw [

     

       201
       201
       +
         Color.bg (Color.make `Blue ~variant:`V600 ());

     

       202
       202
       +
         Color.text Color.white;

     

       203
       203
       +
         Spacing.(to_class (px (Size.rem 1.0)));

     

       204
       204
       +
         Spacing.(to_class (py (Size.rem 0.5)));

     

       205
       205
       +
         Effects.rounded_md;

     

       206
       206
       +
         Typography.(to_class (font_weight `Semibold));

     

       207
       207
       +
         Variants.hover (Color.bg (Color.make `Blue ~variant:`V700 ()));

     

       208
       208
       +
       ]

     

       209
       209
       +
       

     

       210
       210
       +
       let button = 

     

       211
       211
       +
         El.button ~at:[At.class' (to_string button_classes)] [

     

       212
       212
       +
           El.txt "Click me!"

     

       213
       213
       +
         ]|}];

     

       214
       214
       +
                       ];

     

       215
       215
       +
                     ];

     

       216
       216
       +
                   ];

     

       217
       217
       +
                 ];

     

       218
       218
       +
               ];

     

       219
       219
       +
             ];

     

       220
       220
       +
             

     

       221
       221
       +
             (* Footer *)

     

       222
       222
       +
             El.footer ~at:[At.class' "bg-gray-800 text-white py-12"] [

     

       223
       223
       +
               El.div ~at:[At.class' "container text-center"] [

     

       224
       224
       +
                 El.p ~at:[At.class' "text-lg font-semibold mb-4"] [El.txt "Tailwind OCaml"];

     

       225
       225
       +
                 El.p ~at:[At.class' "text-gray-300 mb-6"] [

     

       226
       226
       +
                   El.txt "Type-safe Tailwind CSS for OCaml applications"

     

       227
       227
       +
                 ];

     

       228
       228
       +
                 El.div ~at:[At.class' "flex flex-wrap gap-8 justify-center"] [

     

       229
       229
       +
                   El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [

     

       230
       230
       +
                     El.txt "Documentation"

     

       231
       231
       +
                   ];

     

       232
       232
       +
                   El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [

     

       233
       233
       +
                     El.txt "GitHub"

     

       234
       234
       +
                   ];

     

       235
       235
       +
                   El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [

     

       236
       236
       +
                     El.txt "Examples"

     

       237
       237
       +
                   ];

     

       238
       238
       +
                   El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [

     

       239
       239
       +
                     El.txt "Support"

     

       240
       240
       +
                   ];

     

       241
       241
       +
                 ];

     

       242
       242
       +
               ];

     

       243
       243
       +
             ];

     

       244
       244
       +
           ];

     

       245
       245
       +
         ] in

     

       246
       246
       +
         html_doc

     

       247
       247
       +
       

     

       248
       248
       +
       let () =

     

       249
       249
       +
         (* Output HTML to stdout *)

     

       250
       250
       +
         let html_doc = create_comprehensive_html_page () in

     

       251
       251
       +
         let html_string = El.to_string ~doctype:true html_doc in

     

       252
       252
       +
         print_string html_string

+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";

+80

examples/index_00.ml

···

       1
       1
       +
       (* Index: Tailwind OCaml Examples - Your Learning Journey *)

     

       2
       2
       +
       

     

       3
       3
       +
       let print_example_info num title description features =

     

       4
       4
       +
         Printf.printf "📚 %02d. %s\n" num title;

     

       5
       5
       +
         Printf.printf "   %s\n" description;

     

       6
       6
       +
         Printf.printf "   Features: %s\n\n" (String.concat ", " features)

     

       7
       7
       +
       

     

       8
       8
       +
       let () =

     

       9
       9
       +
         Printf.printf "🎨 Tailwind OCaml Examples - Learning Journey\n";

     

       10
       10
       +
         Printf.printf "===========================================\n\n";

     

       11
       11
       +
         

     

       12
       12
       +
         Printf.printf "Welcome to the Tailwind OCaml examples! These examples are designed as a\n";

     

       13
       13
       +
         Printf.printf "progressive tutorial, starting with basic concepts and building up to\n";

     

       14
       14
       +
         Printf.printf "complex, real-world applications.\n\n";

     

       15
       15
       +
         

     

       16
       16
       +
         Printf.printf "📋 Recommended Learning Path:\n";

     

       17
       17
       +
         Printf.printf "-----------------------------\n\n";

     

       18
       18
       +
         

     

       19
       19
       +
         print_example_info 1 "Hello Tailwind" 

     

       20
       20
       +
           "Your first Tailwind OCaml program. Learn the basics of creating and using classes."

     

       21
       21
       +
           ["tw function"; "Color system"; "Typography basics"; "HTML integration"];

     

       22
       22
       +
         

     

       23
       23
       +
         print_example_info 2 "Colors and Typography"

     

       24
       24
       +
           "Deep dive into the type-safe color system and typography utilities."

     

       25
       25
       +
           ["Color variants"; "Font sizes"; "Font weights"; "Text decorations"];

     

       26
       26
       +
         

     

       27
       27
       +
         print_example_info 3 "Layout and Spacing"

     

       28
       28
       +
           "Master the box model, flexbox, and CSS grid with type-safe utilities."

     

       29
       29
       +
           ["Flexbox"; "CSS Grid"; "Spacing system"; "Display utilities"];

     

       30
       30
       +
         

     

       31
       31
       +
         print_example_info 4 "Responsive Design"

     

       32
       32
       +
           "Build adaptive layouts that work across all device sizes."

     

       33
       33
       +
           ["Breakpoints"; "Mobile-first"; "Responsive utilities"; "Screen adaptation"];

     

       34
       34
       +
         

     

       35
       35
       +
         print_example_info 5 "Effects and Variants"

     

       36
       36
       +
           "Add visual polish with shadows, transitions, and interactive states."

     

       37
       37
       +
           ["Shadows"; "Borders"; "Hover states"; "Transitions"; "Focus states"];

     

       38
       38
       +
         

     

       39
       39
       +
         print_example_info 6 "Patterns and Components"

     

       40
       40
       +
           "Learn reusable layout patterns and component composition techniques."

     

       41
       41
       +
           ["Built-in patterns"; "Layout composition"; "Component design"; "Reusability"];

     

       42
       42
       +
         

     

       43
       43
       +
         print_example_info 7 "Comprehensive Showcase"

     

       44
       44
       +
           "A complete application demonstrating all features working together."

     

       45
       45
       +
           ["Full-page layout"; "Tailwind v4"; "CSS generation"; "Production-ready"];

     

       46
       46
       +
         

     

       47
       47
       +
         Printf.printf "🚀 Getting Started:\n";

     

       48
       48
       +
         Printf.printf "-------------------\n\n";

     

       49
       49
       +
         

     

       50
       50
       +
         Printf.printf "1. Build all examples:\n";

     

       51
       51
       +
         Printf.printf "   dune build examples/\n\n";

     

       52
       52
       +
         

     

       53
       53
       +
         Printf.printf "2. Run individual examples:\n";

     

       54
       54
       +
         Printf.printf "   dune exec examples/01_hello_tailwind.exe\n";

     

       55
       55
       +
         Printf.printf "   dune exec examples/02_colors_and_typography.exe\n";

     

       56
       56
       +
         Printf.printf "   # ... and so on\n\n";

     

       57
       57
       +
         

     

       58
       58
       +
         Printf.printf "3. Each example generates HTML files you can open in your browser:\n";

     

       59
       59
       +
         Printf.printf "   01_hello_tailwind.html\n";

     

       60
       60
       +
         Printf.printf "   02_colors_and_typography.html\n";

     

       61
       61
       +
         Printf.printf "   # ... etc\n\n";

     

       62
       62
       +
         

     

       63
       63
       +
         Printf.printf "💡 Pro Tips:\n";

     

       64
       64
       +
         Printf.printf "------------\n\n";

     

       65
       65
       +
         

     

       66
       66
       +
         Printf.printf "• Run examples in order for the best learning experience\n";

     

       67
       67
       +
         Printf.printf "• Open the generated HTML files to see visual results\n";

     

       68
       68
       +
         Printf.printf "• Read the source code to understand the patterns\n";

     

       69
       69
       +
         Printf.printf "• Experiment by modifying the examples\n";

     

       70
       70
       +
         Printf.printf "• The comprehensive showcase generates Tailwind v4 CSS\n\n";

     

       71
       71
       +
         

     

       72
       72
       +
         Printf.printf "📚 Additional Resources:\n";

     

       73
       73
       +
         Printf.printf "------------------------\n\n";

     

       74
       74
       +
         

     

       75
       75
       +
         Printf.printf "• README.md - Complete library documentation\n";

     

       76
       76
       +
         Printf.printf "• lib/tailwind/ - Core library source code\n";

     

       77
       77
       +
         Printf.printf "• lib/tailwind-html/ - HTML component library\n";

     

       78
       78
       +
         Printf.printf "• Tailwind CSS docs: https://tailwindcss.com/docs\n\n";

     

       79
       79
       +
         

     

       80
       80
       +
         Printf.printf "Happy coding! 🎉\n"

+260

examples/layout_and_spacing_03.ml

···

       1
       1
       +
       (* Example 03: Layout and Spacing - Mastering Box Model and Flexbox *)

     

       2
       2
       +
       

     

       3
       3
       +
       open Htmlit

     

       4
       4
       +
       open Tailwind

     

       5
       5
       +
       

     

       6
       6
       +
       let classes_attr tailwind_classes = 

     

       7
       7
       +
         At.class' (Tailwind.to_string tailwind_classes)

     

       8
       8
       +
       

     

       9
       9
       +
       let create_layout_demo () =

     

       10
       10
       +
         (* Create comprehensive layout demonstration *)

     

       11
       11
       +
         let html_doc = El.html [

     

       12
       12
       +
           El.head [

     

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

     

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

     

       15
       15
       +
             El.title [El.txt "Layout and Spacing"];

     

       16
       16
       +
             El.link ~at:[At.rel "stylesheet"; At.href "layout_and_spacing_03.css"] ();

     

       17
       17
       +
           ];

     

       18
       18
       +
           El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [

     

       19
       19
       +
             El.div ~at:[At.class' "max-w-6xl mx-auto"] [

     

       20
       20
       +
               El.h1 ~at:[classes_attr (tw [

     

       21
       21
       +
                 Typography.(to_class (font_size `Xl2));

     

       22
       22
       +
                 Typography.(to_class (font_weight `Bold));

     

       23
       23
       +
                 Color.text (Color.make `Gray ~variant:`V800 ());

     

       24
       24
       +
               ]); At.class' "mb-8 text-center"] [El.txt "Layout and Spacing Demo"];

     

       25
       25
       +
               

     

       26
       26
       +
               El.p ~at:[classes_attr (tw [

     

       27
       27
       +
                 Typography.(to_class (font_size `Lg));

     

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

     

       29
       29
       +
               ]); At.class' "text-center mb-12"] [

     

       30
       30
       +
                 El.txt "Master the box model, flexbox, and CSS grid with type-safe utilities."

     

       31
       31
       +
               ];

     

       32
       32
       +
               

     

       33
       33
       +
               (* Flexbox Examples *)

     

       34
       34
       +
               El.section ~at:[At.class' "mb-12"] [

     

       35
       35
       +
                 El.h2 ~at:[classes_attr (tw [

     

       36
       36
       +
                   Typography.(to_class (font_size `Xl));

     

       37
       37
       +
                   Typography.(to_class (font_weight `Semibold));

     

       38
       38
       +
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       39
       39
       +
                 ]); At.class' "mb-8"] [El.txt "Flexbox Layouts"];

     

       40
       40
       +
                 

     

       41
       41
       +
                 (* Centered content *)

     

       42
       42
       +
                 El.div ~at:[At.class' "mb-8"] [

     

       43
       43
       +
                   El.h3 ~at:[classes_attr (tw [

     

       44
       44
       +
                     Typography.(to_class (font_size `Lg));

     

       45
       45
       +
                     Typography.(to_class (font_weight `Semibold));

     

       46
       46
       +
                     Color.text (Color.make `Gray ~variant:`V700 ());

     

       47
       47
       +
                   ]); At.class' "mb-4"] [El.txt "Centered Content"];

     

       48
       48
       +
                   

     

       49
       49
       +
                   El.div ~at:[classes_attr (tw [

     

       50
       50
       +
                     Display.flex;

     

       51
       51
       +
                     Flexbox.(to_class (justify `Center));

     

       52
       52
       +
                     Flexbox.(to_class (align_items `Center));

     

       53
       53
       +
                     Color.bg (Color.make `Blue ~variant:`V100 ());

     

       54
       54
       +
                     Layout.(to_class (height (Size.rem 8.0)));

     

       55
       55
       +
                     Effects.rounded_lg;

     

       56
       56
       +
                   ])] [

     

       57
       57
       +
                     El.div ~at:[classes_attr (tw [

     

       58
       58
       +
                       Color.bg Color.white;

     

       59
       59
       +
                       Spacing.(to_class (p (Size.rem 1.5)));

     

       60
       60
       +
                       Effects.rounded_md;

     

       61
       61
       +
                       Effects.shadow_sm;

     

       62
       62
       +
                     ])] [

     

       63
       63
       +
                       El.txt "Perfectly Centered Content"

     

       64
       64
       +
                     ];

     

       65
       65
       +
                   ];

     

       66
       66
       +
                 ];

     

       67
       67
       +
                 

     

       68
       68
       +
                 (* Space between items *)

     

       69
       69
       +
                 El.div ~at:[At.class' "mb-8"] [

     

       70
       70
       +
                   El.h3 ~at:[classes_attr (tw [

     

       71
       71
       +
                     Typography.(to_class (font_size `Lg));

     

       72
       72
       +
                     Typography.(to_class (font_weight `Semibold));

     

       73
       73
       +
                     Color.text (Color.make `Gray ~variant:`V700 ());

     

       74
       74
       +
                   ]); At.class' "mb-4"] [El.txt "Space Between"];

     

       75
       75
       +
                   

     

       76
       76
       +
                   El.div ~at:[classes_attr (tw [

     

       77
       77
       +
                     Display.flex;

     

       78
       78
       +
                     Flexbox.(to_class (justify `Between));

     

       79
       79
       +
                     Flexbox.(to_class (align_items `Center));

     

       80
       80
       +
                     Color.bg (Color.make `Green ~variant:`V100 ());

     

       81
       81
       +
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       82
       82
       +
                     Effects.rounded_lg;

     

       83
       83
       +
                   ])] [

     

       84
       84
       +
                     El.div ~at:[classes_attr (tw [

     

       85
       85
       +
                       Color.bg Color.white;

     

       86
       86
       +
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       87
       87
       +
                       Effects.rounded_md;

     

       88
       88
       +
                     ])] [El.txt "Left"];

     

       89
       89
       +
                     El.div ~at:[classes_attr (tw [

     

       90
       90
       +
                       Color.bg Color.white;

     

       91
       91
       +
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       92
       92
       +
                       Effects.rounded_md;

     

       93
       93
       +
                     ])] [El.txt "Center"];

     

       94
       94
       +
                     El.div ~at:[classes_attr (tw [

     

       95
       95
       +
                       Color.bg Color.white;

     

       96
       96
       +
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       97
       97
       +
                       Effects.rounded_md;

     

       98
       98
       +
                     ])] [El.txt "Right"];

     

       99
       99
       +
                   ];

     

       100
       100
       +
                 ];

     

       101
       101
       +
                 

     

       102
       102
       +
                 (* Flex direction example *)

     

       103
       103
       +
                 El.div [

     

       104
       104
       +
                   El.h3 ~at:[classes_attr (tw [

     

       105
       105
       +
                     Typography.(to_class (font_size `Lg));

     

       106
       106
       +
                     Typography.(to_class (font_weight `Semibold));

     

       107
       107
       +
                     Color.text (Color.make `Gray ~variant:`V700 ());

     

       108
       108
       +
                   ]); At.class' "mb-4"] [El.txt "Flex Direction Column"];

     

       109
       109
       +
                   

     

       110
       110
       +
                   El.div ~at:[classes_attr (tw [

     

       111
       111
       +
                     Display.flex;

     

       112
       112
       +
                     Flexbox.(to_class (direction `Col));

     

       113
       113
       +
                     Spacing.(to_class (gap `All (Size.rem 1.0)));

     

       114
       114
       +
                     Color.bg (Color.make `Purple ~variant:`V100 ());

     

       115
       115
       +
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       116
       116
       +
                     Effects.rounded_lg;

     

       117
       117
       +
                   ])] [

     

       118
       118
       +
                     El.div ~at:[classes_attr (tw [

     

       119
       119
       +
                       Color.bg Color.white;

     

       120
       120
       +
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       121
       121
       +
                       Effects.rounded_md;

     

       122
       122
       +
                     ]); At.class' "text-center"] [El.txt "Item 1"];

     

       123
       123
       +
                     El.div ~at:[classes_attr (tw [

     

       124
       124
       +
                       Color.bg Color.white;

     

       125
       125
       +
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       126
       126
       +
                       Effects.rounded_md;

     

       127
       127
       +
                     ]); At.class' "text-center"] [El.txt "Item 2"];

     

       128
       128
       +
                     El.div ~at:[classes_attr (tw [

     

       129
       129
       +
                       Color.bg Color.white;

     

       130
       130
       +
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       131
       131
       +
                       Effects.rounded_md;

     

       132
       132
       +
                     ]); At.class' "text-center"] [El.txt "Item 3"];

     

       133
       133
       +
                   ];

     

       134
       134
       +
                 ];

     

       135
       135
       +
               ];

     

       136
       136
       +
               

     

       137
       137
       +
               (* Grid Examples *)

     

       138
       138
       +
               El.section ~at:[At.class' "mb-12"] [

     

       139
       139
       +
                 El.h2 ~at:[classes_attr (tw [

     

       140
       140
       +
                   Typography.(to_class (font_size `Xl));

     

       141
       141
       +
                   Typography.(to_class (font_weight `Semibold));

     

       142
       142
       +
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       143
       143
       +
                 ]); At.class' "mb-8"] [El.txt "CSS Grid Layouts"];

     

       144
       144
       +
                 

     

       145
       145
       +
                 (* 2-column grid *)

     

       146
       146
       +
                 El.div ~at:[At.class' "mb-8"] [

     

       147
       147
       +
                   El.h3 ~at:[classes_attr (tw [

     

       148
       148
       +
                     Typography.(to_class (font_size `Lg));

     

       149
       149
       +
                     Typography.(to_class (font_weight `Semibold));

     

       150
       150
       +
                     Color.text (Color.make `Gray ~variant:`V700 ());

     

       151
       151
       +
                   ]); At.class' "mb-4"] [El.txt "Two Column Grid"];

     

       152
       152
       +
                   

     

       153
       153
       +
                   El.div ~at:[classes_attr (tw [

     

       154
       154
       +
                     Display.grid;

     

       155
       155
       +
                     Grid.(to_class (template_cols (`Cols 2)));

     

       156
       156
       +
                     Spacing.(to_class (gap `All (Size.rem 1.5)));

     

       157
       157
       +
                   ])] (List.init 4 (fun i ->

     

       158
       158
       +
                     El.div ~at:[classes_attr (tw [

     

       159
       159
       +
                       Color.bg (Color.make `Red ~variant:`V100 ());

     

       160
       160
       +
                       Spacing.(to_class (p (Size.rem 1.5)));

     

       161
       161
       +
                       Effects.rounded_lg;

     

       162
       162
       +
                     ]); At.class' "text-center"] [

     

       163
       163
       +
                       El.txt (Printf.sprintf "Grid Item %d" (i + 1))

     

       164
       164
       +
                     ]

     

       165
       165
       +
                   ));

     

       166
       166
       +
                 ];

     

       167
       167
       +
                 

     

       168
       168
       +
                 (* 3-column grid *)

     

       169
       169
       +
                 El.div ~at:[At.class' "mb-8"] [

     

       170
       170
       +
                   El.h3 ~at:[classes_attr (tw [

     

       171
       171
       +
                     Typography.(to_class (font_size `Lg));

     

       172
       172
       +
                     Typography.(to_class (font_weight `Semibold));

     

       173
       173
       +
                     Color.text (Color.make `Gray ~variant:`V700 ());

     

       174
       174
       +
                   ]); At.class' "mb-4"] [El.txt "Three Column Grid"];

     

       175
       175
       +
                   

     

       176
       176
       +
                   El.div ~at:[classes_attr (tw [

     

       177
       177
       +
                     Display.grid;

     

       178
       178
       +
                     Grid.(to_class (template_cols (`Cols 3)));

     

       179
       179
       +
                     Spacing.(to_class (gap `All (Size.rem 1.5)));

     

       180
       180
       +
                   ])] (List.init 6 (fun i ->

     

       181
       181
       +
                     El.div ~at:[classes_attr (tw [

     

       182
       182
       +
                       Color.bg (Color.make `Yellow ~variant:`V100 ());

     

       183
       183
       +
                       Spacing.(to_class (p (Size.rem 1.5)));

     

       184
       184
       +
                       Effects.rounded_lg;

     

       185
       185
       +
                     ]); At.class' "text-center"] [

     

       186
       186
       +
                       El.txt (Printf.sprintf "Item %d" (i + 1))

     

       187
       187
       +
                     ]

     

       188
       188
       +
                   ));

     

       189
       189
       +
                 ];

     

       190
       190
       +
               ];

     

       191
       191
       +
               

     

       192
       192
       +
               (* Spacing Examples *)

     

       193
       193
       +
               El.section [

     

       194
       194
       +
                 El.h2 ~at:[classes_attr (tw [

     

       195
       195
       +
                   Typography.(to_class (font_size `Xl));

     

       196
       196
       +
                   Typography.(to_class (font_weight `Semibold));

     

       197
       197
       +
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       198
       198
       +
                 ]); At.class' "mb-8"] [El.txt "Spacing System"];

     

       199
       199
       +
                 

     

       200
       200
       +
                 El.div ~at:[classes_attr (tw [

     

       201
       201
       +
                   Display.grid;

     

       202
       202
       +
                   Grid.(to_class (template_cols (`Cols 1)));

     

       203
       203
       +
                   Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2))))));

     

       204
       204
       +
                   Spacing.(to_class (gap `All (Size.rem 2.0)));

     

       205
       205
       +
                 ])] [

     

       206
       206
       +
                   (* Padding example *)

     

       207
       207
       +
                   El.div ~at:[classes_attr (tw [

     

       208
       208
       +
                     Color.bg (Color.make `Indigo ~variant:`V100 ());

     

       209
       209
       +
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       210
       210
       +
                     Effects.rounded_lg;

     

       211
       211
       +
                   ])] [

     

       212
       212
       +
                     El.h4 ~at:[classes_attr (tw [

     

       213
       213
       +
                       Typography.(to_class (font_size `Base));

     

       214
       214
       +
                       Typography.(to_class (font_weight `Semibold));

     

       215
       215
       +
                       Color.text (Color.make `Gray ~variant:`V700 ());

     

       216
       216
       +
                     ]); At.class' "mb-3"] [El.txt "Padding Example"];

     

       217
       217
       +
                     El.div ~at:[classes_attr (tw [

     

       218
       218
       +
                       Color.bg Color.white;

     

       219
       219
       +
                       Spacing.(to_class (p (Size.rem 2.0)));

     

       220
       220
       +
                       Effects.rounded_md;

     

       221
       221
       +
                       Effects.border;

     

       222
       222
       +
                       Color.border (Color.make `Gray ~variant:`V200 ());

     

       223
       223
       +
                     ])] [

     

       224
       224
       +
                       El.txt "This content has p-8 (2rem padding)"

     

       225
       225
       +
                     ];

     

       226
       226
       +
                   ];

     

       227
       227
       +
                   

     

       228
       228
       +
                   (* Margin example *)

     

       229
       229
       +
                   El.div ~at:[classes_attr (tw [

     

       230
       230
       +
                     Color.bg (Color.make `Cyan ~variant:`V100 ());

     

       231
       231
       +
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       232
       232
       +
                     Effects.rounded_lg;

     

       233
       233
       +
                   ])] [

     

       234
       234
       +
                     El.h4 ~at:[classes_attr (tw [

     

       235
       235
       +
                       Typography.(to_class (font_size `Base));

     

       236
       236
       +
                       Typography.(to_class (font_weight `Semibold));

     

       237
       237
       +
                       Color.text (Color.make `Gray ~variant:`V700 ());

     

       238
       238
       +
                     ]); At.class' "mb-3"] [El.txt "Margin Example"];

     

       239
       239
       +
                     El.div ~at:[classes_attr (tw [

     

       240
       240
       +
                       Color.bg Color.white;

     

       241
       241
       +
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       242
       242
       +
                       Spacing.(to_class (m (Size.rem 1.5)));

     

       243
       243
       +
                       Effects.rounded_md;

     

       244
       244
       +
                       Effects.border;

     

       245
       245
       +
                       Color.border (Color.make `Gray ~variant:`V200 ());

     

       246
       246
       +
                     ])] [

     

       247
       247
       +
                       El.txt "This box has m-6 (1.5rem margin) from its container"

     

       248
       248
       +
                     ];

     

       249
       249
       +
                   ];

     

       250
       250
       +
                 ];

     

       251
       251
       +
               ];

     

       252
       252
       +
             ];

     

       253
       253
       +
           ];

     

       254
       254
       +
         ] in

     

       255
       255
       +
         html_doc

     

       256
       256
       +
       

     

       257
       257
       +
       let () =

     

       258
       258
       +
         (* Output HTML to stdout *)

     

       259
       259
       +
         let html_doc = create_layout_demo () in

     

       260
       260
       +
         print_string (El.to_string ~doctype:true html_doc)

+8 -8

examples/module_usage.ml

···

       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

     

       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

     

       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 [

     
···

       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

     

       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;

     
···

       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

     

       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.flex_center; (* Utility function *)

     

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

     

       43
       43
        
         ] in

     

       44
       44
        
         

     

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

     
···

       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);

     

       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)

+188

examples/responsive_design_04.ml

···

       1
       1
       +
       (* Example 04: Responsive Design - Building Adaptive Layouts *)

     

       2
       2
       +
       

     

       3
       3
       +
       open Htmlit

     

       4
       4
       +
       open Tailwind

     

       5
       5
       +
       

     

       6
       6
       +
       let classes_attr tailwind_classes = 

     

       7
       7
       +
         At.class' (Tailwind.to_string tailwind_classes)

     

       8
       8
       +
       

     

       9
       9
       +
       let create_responsive_demo () =

     

       10
       10
       +
         (* Create comprehensive responsive demonstration *)

     

       11
       11
       +
         let html_doc = El.html [

     

       12
       12
       +
           El.head [

     

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

     

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

     

       15
       15
       +
             El.title [El.txt "Responsive Design"];

     

       16
       16
       +
             El.link ~at:[At.rel "stylesheet"; At.href "responsive_design_04.css"] ();

     

       17
       17
       +
           ];

     

       18
       18
       +
           El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [

     

       19
       19
       +
             El.div ~at:[At.class' "max-w-6xl mx-auto"] [

     

       20
       20
       +
               El.h1 ~at:[classes_attr (tw [

     

       21
       21
       +
                 Typography.(to_class (font_size `Xl2));

     

       22
       22
       +
                 Responsive.(to_class (at_breakpoint `Md (Typography.(to_class (font_size `Xl3)))));

     

       23
       23
       +
                 Typography.(to_class (font_weight `Bold));

     

       24
       24
       +
                 Color.text (Color.make `Gray ~variant:`V700 ());

     

       25
       25
       +
               ]); At.class' "mb-8 text-center"] [El.txt "Responsive Design Demo"];

     

       26
       26
       +
               

     

       27
       27
       +
               El.p ~at:[classes_attr (tw [

     

       28
       28
       +
                 Typography.(to_class (font_size `Lg));

     

       29
       29
       +
                 Color.text (Color.make `Gray ~variant:`V600 ());

     

       30
       30
       +
               ]); At.class' "text-center mb-8"] [

     

       31
       31
       +
                 El.txt "Resize your browser window to see responsive changes. The indicator in the top-right shows the current breakpoint."

     

       32
       32
       +
               ];

     

       33
       33
       +
               

     

       34
       34
       +
               (* Responsive Grid *)

     

       35
       35
       +
               El.section ~at:[At.class' "mb-8"] [

     

       36
       36
       +
                 El.h2 ~at:[classes_attr (tw [

     

       37
       37
       +
                   Typography.(to_class (font_size `Xl));

     

       38
       38
       +
                   Typography.(to_class (font_weight `Semibold));

     

       39
       39
       +
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       40
       40
       +
                 ]); At.class' "mb-6"] [El.txt "Responsive Grid"];

     

       41
       41
       +
                 

     

       42
       42
       +
                 El.p ~at:[classes_attr (tw [

     

       43
       43
       +
                   Color.text (Color.make `Gray ~variant:`V600 ());

     

       44
       44
       +
                 ]); At.class' "mb-4"] [

     

       45
       45
       +
                   El.txt "1 column → 2 columns (md) → 3 columns (lg) → 4 columns (xl)"

     

       46
       46
       +
                 ];

     

       47
       47
       +
                 

     

       48
       48
       +
                 El.div ~at:[classes_attr (tw [

     

       49
       49
       +
                   Display.grid;

     

       50
       50
       +
                   Grid.(to_class (template_cols (`Cols 1)));

     

       51
       51
       +
                   Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2))))));

     

       52
       52
       +
                   Responsive.(to_class (at_breakpoint `Lg (Grid.(to_class (template_cols (`Cols 3))))));

     

       53
       53
       +
                   Responsive.(to_class (at_breakpoint `Xl (Grid.(to_class (template_cols (`Cols 4))))));

     

       54
       54
       +
                   Spacing.(to_class (gap `All (Size.rem 1.0)));

     

       55
       55
       +
                 ])] (List.init 8 (fun i ->

     

       56
       56
       +
                   let colors = [|

     

       57
       57
       +
                     Color.make `Blue ~variant:`V100 ();

     

       58
       58
       +
                     Color.make `Green ~variant:`V100 ();

     

       59
       59
       +
                     Color.make `Purple ~variant:`V100 ();

     

       60
       60
       +
                     Color.make `Red ~variant:`V100 ();

     

       61
       61
       +
                     Color.make `Yellow ~variant:`V100 ();

     

       62
       62
       +
                   |] in

     

       63
       63
       +
                   El.div ~at:[classes_attr (tw [

     

       64
       64
       +
                     Color.bg colors.(i mod (Array.length colors));

     

       65
       65
       +
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       66
       66
       +
                   ]); At.class' "rounded-lg text-center"] [

     

       67
       67
       +
                     El.txt (Printf.sprintf "Item %d" (i + 1))

     

       68
       68
       +
                   ]

     

       69
       69
       +
                 ));

     

       70
       70
       +
               ];

     

       71
       71
       +
               

     

       72
       72
       +
               (* Responsive Typography *)

     

       73
       73
       +
               El.section ~at:[At.class' "mb-8"] [

     

       74
       74
       +
                 El.h2 ~at:[classes_attr (tw [

     

       75
       75
       +
                   Typography.(to_class (font_size `Xl));

     

       76
       76
       +
                   Typography.(to_class (font_weight `Semibold));

     

       77
       77
       +
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       78
       78
       +
                 ]); At.class' "mb-6"] [El.txt "Responsive Typography"];

     

       79
       79
       +
                 

     

       80
       80
       +
                 El.div ~at:[classes_attr (tw [

     

       81
       81
       +
                   Color.bg (Color.make `Gray ~variant:`V100 ());

     

       82
       82
       +
                   Spacing.(to_class (p (Size.rem 1.5)));

     

       83
       83
       +
                 ]); At.class' "rounded-lg text-center"] [

     

       84
       84
       +
                   El.h3 ~at:[classes_attr (tw [

     

       85
       85
       +
                     Typography.(to_class (font_size `Base));

     

       86
       86
       +
                     Responsive.(to_class (at_breakpoint `Md (Typography.(to_class (font_size `Lg)))));

     

       87
       87
       +
                     Responsive.(to_class (at_breakpoint `Lg (Typography.(to_class (font_size `Xl2)))));

     

       88
       88
       +
                     Typography.(to_class (font_weight `Semibold));

     

       89
       89
       +
                     Color.text (Color.make `Blue ~variant:`V600 ());

     

       90
       90
       +
                   ]); At.class' "mb-4"] [El.txt "Responsive Heading"];

     

       91
       91
       +
                   

     

       92
       92
       +
                   El.p ~at:[classes_attr (tw [

     

       93
       93
       +
                     Typography.(to_class (font_size `Sm));

     

       94
       94
       +
                     Responsive.(to_class (at_breakpoint `Md (Typography.(to_class (font_size `Base)))));

     

       95
       95
       +
                     Color.text (Color.make `Gray ~variant:`V600 ());

     

       96
       96
       +
                   ])] [

     

       97
       97
       +
                     El.txt "This text scales: small on mobile, base on tablet, and larger on desktop. The heading above also scales responsively."

     

       98
       98
       +
                   ];

     

       99
       99
       +
                 ];

     

       100
       100
       +
               ];

     

       101
       101
       +
               

     

       102
       102
       +
               (* Show/Hide Elements *)

     

       103
       103
       +
               El.section ~at:[At.class' "mb-8"] [

     

       104
       104
       +
                 El.h2 ~at:[classes_attr (tw [

     

       105
       105
       +
                   Typography.(to_class (font_size `Xl));

     

       106
       106
       +
                   Typography.(to_class (font_weight `Semibold));

     

       107
       107
       +
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       108
       108
       +
                 ]); At.class' "mb-6"] [El.txt "Responsive Visibility"];

     

       109
       109
       +
                 

     

       110
       110
       +
                 El.div ~at:[classes_attr (tw [

     

       111
       111
       +
                   Display.flex;

     

       112
       112
       +
                   Flexbox.(to_class (direction `Col));

     

       113
       113
       +
                   Responsive.(to_class (at_breakpoint `Md (Flexbox.(to_class (direction `Row)))));

     

       114
       114
       +
                   Spacing.(to_class (gap `All (Size.rem 1.0)));

     

       115
       115
       +
                 ])] [

     

       116
       116
       +
                   El.div ~at:[classes_attr (tw [

     

       117
       117
       +
                     Color.bg (Color.make `Blue ~variant:`V100 ());

     

       118
       118
       +
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       119
       119
       +
                   ]); At.class' "rounded-lg text-center"] [

     

       120
       120
       +
                     El.txt "Always visible"

     

       121
       121
       +
                   ];

     

       122
       122
       +
                   

     

       123
       123
       +
                   El.div ~at:[classes_attr (tw [

     

       124
       124
       +
                     Color.bg (Color.make `Green ~variant:`V100 ());

     

       125
       125
       +
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       126
       126
       +
                     Display.hidden;

     

       127
       127
       +
                     Responsive.(to_class (at_breakpoint `Md Display.block));

     

       128
       128
       +
                   ]); At.class' "rounded-lg text-center"] [

     

       129
       129
       +
                     El.txt "Hidden on mobile, visible on md+"

     

       130
       130
       +
                   ];

     

       131
       131
       +
                   

     

       132
       132
       +
                   El.div ~at:[classes_attr (tw [

     

       133
       133
       +
                     Color.bg (Color.make `Purple ~variant:`V100 ());

     

       134
       134
       +
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       135
       135
       +
                     Display.hidden;

     

       136
       136
       +
                     Responsive.(to_class (at_breakpoint `Lg Display.block));

     

       137
       137
       +
                   ]); At.class' "rounded-lg text-center"] [

     

       138
       138
       +
                     El.txt "Only visible on lg+"

     

       139
       139
       +
                   ];

     

       140
       140
       +
                 ];

     

       141
       141
       +
               ];

     

       142
       142
       +
               

     

       143
       143
       +
               (* Responsive Spacing *)

     

       144
       144
       +
               El.section [

     

       145
       145
       +
                 El.h2 ~at:[classes_attr (tw [

     

       146
       146
       +
                   Typography.(to_class (font_size `Xl));

     

       147
       147
       +
                   Typography.(to_class (font_weight `Semibold));

     

       148
       148
       +
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       149
       149
       +
                 ]); At.class' "mb-6"] [El.txt "Responsive Spacing"];

     

       150
       150
       +
                 

     

       151
       151
       +
                 El.div ~at:[classes_attr (tw [

     

       152
       152
       +
                   Color.bg (Color.make `Gray ~variant:`V100 ());

     

       153
       153
       +
                   Spacing.(to_class (p (Size.rem 1.0)));

     

       154
       154
       +
                   Responsive.(to_class (at_breakpoint `Md (Spacing.(to_class (p (Size.rem 1.5))))));

     

       155
       155
       +
                   Responsive.(to_class (at_breakpoint `Lg (Spacing.(to_class (p (Size.rem 2.0))))));

     

       156
       156
       +
                 ]); At.class' "rounded-lg"] [

     

       157
       157
       +
                   El.div ~at:[classes_attr (tw [

     

       158
       158
       +
                     Color.bg Color.white;

     

       159
       159
       +
                     Spacing.(to_class (p (Size.rem 1.0)));

     

       160
       160
       +
                   ]); At.class' "rounded"] [

     

       161
       161
       +
                     El.p [El.txt "This container has responsive padding:"];

     

       162
       162
       +
                     El.ul [

     

       163
       163
       +
                       El.li [El.txt "p-4 (1rem) on mobile"];

     

       164
       164
       +
                       El.li [El.txt "md:p-6 (1.5rem) on tablet"];

     

       165
       165
       +
                       El.li [El.txt "lg:p-8 (2rem) on desktop"];

     

       166
       166
       +
                     ];

     

       167
       167
       +
                   ];

     

       168
       168
       +
                 ];

     

       169
       169
       +
               ];

     

       170
       170
       +
             ];

     

       171
       171
       +
           ];

     

       172
       172
       +
         ] in

     

       173
       173
       +
         

     

       174
       174
       +
         let html_string = El.to_string ~doctype:true html_doc in

     

       175
       175
       +
         let oc = open_out "04_responsive_design.html" in

     

       176
       176
       +
         output_string oc html_string;

     

       177
       177
       +
         close_out oc;

     

       178
       178
       +
         

     

       179
       179
       +
         Printf.printf "\n✅ Generated: 04_responsive_design.html (%d bytes)\n" (String.length html_string);

     

       180
       180
       +
         Printf.printf "\n🎯 What you learned:\n";

     

       181
       181
       +
         Printf.printf "   • Mobile-first responsive design approach\n";

     

       182
       182
       +
         Printf.printf "   • Breakpoint system: sm, md, lg, xl\n";

     

       183
       183
       +
         Printf.printf "   • Responsive utilities with at_breakpoint function\n";

     

       184
       184
       +
         Printf.printf "   • Show/hide elements at different screen sizes\n";

     

       185
       185
       +
         Printf.printf "   • Responsive typography and spacing\n";

     

       186
       186
       +
         Printf.printf "   • Grid columns that adapt to screen size\n"

     

       187
       187
       +
       

     

       188
       188
       +
       let () = create_responsive_demo ()

+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"

+162

lib/tailwind-html/button.ml

···

       1
       1
       +
       open Htmlit

     

       2
       2
       +
       

     

       3
       3
       +
       type variant = [ `Primary | `Secondary | `Outline | `Ghost | `Link ]

     

       4
       4
       +
       type size = [ `Sm | `Default | `Lg | `Icon ]

     

       5
       5
       +
       type state = [ `Default | `Loading | `Disabled ]

     

       6
       6
       +
       

     

       7
       7
       +
       type t = {

     

       8
       8
       +
         variant: variant;

     

       9
       9
       +
         size: size;

     

       10
       10
       +
         state: state;

     

       11
       11
       +
         icon: El.html option;

     

       12
       12
       +
         icon_position: [`Left | `Right];

     

       13
       13
       +
         classes: Tailwind.t option;

     

       14
       14
       +
         attributes: (string * string) list;

     

       15
       15
       +
         children: El.html list;

     

       16
       16
       +
       }

     

       17
       17
       +
       

     

       18
       18
       +
       let classes_attr tailwind_classes = 

     

       19
       19
       +
         At.class' (Tailwind.to_string tailwind_classes)

     

       20
       20
       +
       

     

       21
       21
       +
       let base_button_classes = Tailwind.tw [

     

       22
       22
       +
         Tailwind.Display.inline_flex;

     

       23
       23
       +
         Tailwind.Flexbox.(to_class (align_items `Center));

     

       24
       24
       +
         Tailwind.Flexbox.(to_class (justify `Center));

     

       25
       25
       +
         Tailwind.Effects.rounded_md;

     

       26
       26
       +
         Tailwind.Typography.(to_class (font_size `Sm));

     

       27
       27
       +
         Tailwind.Typography.(to_class (font_weight `Medium));

     

       28
       28
       +
         Tailwind.Css.make "ring-offset-background";

     

       29
       29
       +
         Tailwind.Effects.transition `Colors;

     

       30
       30
       +
         Tailwind.Css.make "focus-visible:outline-none";

     

       31
       31
       +
         Tailwind.Css.make "focus-visible:ring-2";

     

       32
       32
       +
         Tailwind.Css.make "focus-visible:ring-ring";

     

       33
       33
       +
         Tailwind.Css.make "focus-visible:ring-offset-2";

     

       34
       34
       +
         Tailwind.Css.make "disabled:pointer-events-none";

     

       35
       35
       +
         Tailwind.Css.make "disabled:opacity-50";

     

       36
       36
       +
       ]

     

       37
       37
       +
       

     

       38
       38
       +
       let variant_classes = function

     

       39
       39
       +
         | `Primary -> Tailwind.tw [

     

       40
       40
       +
             Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ());

     

       41
       41
       +
             Tailwind.Color.text Tailwind.Color.white;

     

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

     

       43
       43
       +
           ]

     

       44
       44
       +
         | `Secondary -> Tailwind.tw [

     

       45
       45
       +
             Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V200 ());

     

       46
       46
       +
             Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V900 ());

     

       47
       47
       +
             Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V300 ()));

     

       48
       48
       +
           ]

     

       49
       49
       +
         | `Outline -> Tailwind.tw [

     

       50
       50
       +
             Tailwind.Effects.border;

     

       51
       51
       +
             Tailwind.Color.border (Tailwind.Color.make `Gray ~variant:`V300 ());

     

       52
       52
       +
             Tailwind.Color.bg Tailwind.Color.transparent;

     

       53
       53
       +
             Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V100 ()));

     

       54
       54
       +
           ]

     

       55
       55
       +
         | `Ghost -> Tailwind.tw [

     

       56
       56
       +
             Tailwind.Color.bg Tailwind.Color.transparent;

     

       57
       57
       +
             Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V100 ()));

     

       58
       58
       +
           ]

     

       59
       59
       +
         | `Link -> Tailwind.tw [

     

       60
       60
       +
             Tailwind.Color.bg Tailwind.Color.transparent;

     

       61
       61
       +
             Tailwind.Color.text (Tailwind.Color.make `Blue ~variant:`V600 ());

     

       62
       62
       +
             Tailwind.Css.make "underline-offset-4";

     

       63
       63
       +
             Tailwind.Variants.hover (Tailwind.Css.make "underline");

     

       64
       64
       +
           ]

     

       65
       65
       +
       

     

       66
       66
       +
       let size_classes = function

     

       67
       67
       +
         | `Default -> Tailwind.tw [

     

       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
       +
           ]

     

       71
       71
       +
         | `Sm -> Tailwind.tw [

     

       72
       72
       +
             Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 0.75)));

     

       73
       73
       +
             Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 0.375)));

     

       74
       74
       +
           ]

     

       75
       75
       +
         | `Lg -> Tailwind.tw [

     

       76
       76
       +
             Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 2.0)));

     

       77
       77
       +
             Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 0.75)));

     

       78
       78
       +
           ]

     

       79
       79
       +
         | `Icon -> Tailwind.tw [

     

       80
       80
       +
             Tailwind.Layout.(to_class (width (Tailwind.Size.rem 2.5)));

     

       81
       81
       +
             Tailwind.Layout.(to_class (height (Tailwind.Size.rem 2.5)));

     

       82
       82
       +
           ]

     

       83
       83
       +
       

     

       84
       84
       +
       let state_classes = function

     

       85
       85
       +
         | `Default -> Tailwind.Css.empty

     

       86
       86
       +
         | `Loading -> Tailwind.tw [

     

       87
       87
       +
             Tailwind.Css.make "cursor-not-allowed";

     

       88
       88
       +
             Tailwind.Effects.(to_class (opacity 75));

     

       89
       89
       +
           ]

     

       90
       90
       +
         | `Disabled -> Tailwind.tw [

     

       91
       91
       +
             Tailwind.Css.make "cursor-not-allowed";

     

       92
       92
       +
             Tailwind.Effects.(to_class (opacity 50));

     

       93
       93
       +
           ]

     

       94
       94
       +
       

     

       95
       95
       +
       let make ?(variant=`Primary) ?(size=`Default) ?(state=`Default) ?icon ?(icon_position=`Left) ?classes ?attributes ~children () = {

     

       96
       96
       +
         variant;

     

       97
       97
       +
         size;

     

       98
       98
       +
         state;

     

       99
       99
       +
         icon;

     

       100
       100
       +
         icon_position;

     

       101
       101
       +
         classes;

     

       102
       102
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       103
       103
       +
         children;

     

       104
       104
       +
       }

     

       105
       105
       +
       

     

       106
       106
       +
       let to_html button =

     

       107
       107
       +
         let button_classes = Tailwind.tw [

     

       108
       108
       +
           base_button_classes;

     

       109
       109
       +
           variant_classes button.variant;

     

       110
       110
       +
           size_classes button.size;

     

       111
       111
       +
           state_classes button.state;

     

       112
       112
       +
           (match button.classes with Some c -> c | None -> Tailwind.Css.empty);

     

       113
       113
       +
         ] in

     

       114
       114
       +
         

     

       115
       115
       +
         let base_attrs = [classes_attr button_classes] in

     

       116
       116
       +
         let state_attrs = match button.state with

     

       117
       117
       +
           | `Disabled -> [At.disabled]

     

       118
       118
       +
           | _ -> []

     

       119
       119
       +
         in

     

       120
       120
       +
         let custom_attrs = List.map (fun (k, v) -> At.v k v) button.attributes in

     

       121
       121
       +
         let all_attrs = base_attrs @ state_attrs @ custom_attrs in

     

       122
       122
       +
         

     

       123
       123
       +
         let loading_spinner = match button.state with

     

       124
       124
       +
           | `Loading -> [El.span ~at:[classes_attr (Tailwind.tw [

     

       125
       125
       +
               Tailwind.Css.make "animate-spin";

     

       126
       126
       +
               Tailwind.Spacing.(to_class (mr (Tailwind.Size.rem 0.5)));

     

       127
       127
       +
             ])] [El.txt "⟳"]]

     

       128
       128
       +
           | _ -> []

     

       129
       129
       +
         in

     

       130
       130
       +
         

     

       131
       131
       +
         let icon_element = match button.icon with

     

       132
       132
       +
           | Some icon -> [icon]

     

       133
       133
       +
           | None -> []

     

       134
       134
       +
         in

     

       135
       135
       +
         

     

       136
       136
       +
         let content = match button.icon_position with

     

       137
       137
       +
           | `Left -> loading_spinner @ icon_element @ button.children

     

       138
       138
       +
           | `Right -> loading_spinner @ button.children @ icon_element

     

       139
       139
       +
         in

     

       140
       140
       +
         

     

       141
       141
       +
         El.button ~at:all_attrs content

     

       142
       142
       +
       

     

       143
       143
       +
       (* Shorthand functions *)

     

       144
       144
       +
       let primary ?size ?state ?icon ?classes ~children () =

     

       145
       145
       +
         let btn = make ~variant:`Primary ?size ?state ?icon ?classes ~children () in

     

       146
       146
       +
         to_html btn

     

       147
       147
       +
       

     

       148
       148
       +
       let secondary ?size ?state ?icon ?classes ~children () =

     

       149
       149
       +
         let btn = make ~variant:`Secondary ?size ?state ?icon ?classes ~children () in

     

       150
       150
       +
         to_html btn

     

       151
       151
       +
       

     

       152
       152
       +
       let outline ?size ?state ?icon ?classes ~children () =

     

       153
       153
       +
         let btn = make ~variant:`Outline ?size ?state ?icon ?classes ~children () in

     

       154
       154
       +
         to_html btn

     

       155
       155
       +
       

     

       156
       156
       +
       let ghost ?size ?state ?icon ?classes ~children () =

     

       157
       157
       +
         let btn = make ~variant:`Ghost ?size ?state ?icon ?classes ~children () in

     

       158
       158
       +
         to_html btn

     

       159
       159
       +
       

     

       160
       160
       +
       let link ?size ?state ?classes ~children () =

     

       161
       161
       +
         let btn = make ~variant:`Link ?size ?state ?classes ~children () in

     

       162
       162
       +
         to_html btn

+39 -35

lib/tailwind-html/button.mli

···

       4
       4
        
       type t

     

       5
       5
        
       

     

       6
       6
        
       (** Button variants *)

     

       7
       7
       -
       type variant =

     

       8
       8
       -
         | Primary

     

       9
       9
       -
         | Secondary

     

       10
       10
       -
         | Outline

     

       11
       11
       -
         | Ghost

     

       12
       12
       -
         | Link

     

       13
       13
       -
         | Danger

     

       14
       14
       -
         | Success

     

       7
       7
       +
       type variant = [ `Primary | `Secondary | `Outline | `Ghost | `Link ]

     

       15
       8
        
       

     

       16
       9
        
       (** Button sizes *)

     

       17
       17
       -
       type size =

     

       18
       18
       -
         | Xs

     

       19
       19
       -
         | Sm

     

       20
       20
       -
         | Md

     

       21
       21
       -
         | Lg

     

       22
       22
       -
         | Xl

     

       10
       10
       +
       type size = [ `Sm | `Default | `Lg | `Icon ]

     

       11
       11
       +
       

     

       12
       12
       +
       (** Button states *)

     

       13
       13
       +
       type state = [ `Default | `Loading | `Disabled ]

     

       23
       14
        
       

     

       24
       15
        
       (** Create a button *)

     

       25
       16
        
       val make :

     

       26
       17
        
         ?variant:variant ->

     

       27
       18
        
         ?size:size ->

     

       28
       28
       -
         ?disabled:bool ->

     

       29
       29
       -
         ?loading:bool ->

     

       30
       30
       -
         ?full_width:bool ->

     

       31
       31
       -
         ?icon_left:Htmlit.El.html ->

     

       32
       32
       -
         ?icon_right:Htmlit.El.html ->

     

       19
       19
       +
         ?state:state ->

     

       20
       20
       +
         ?icon:Htmlit.El.html ->

     

       21
       21
       +
         ?icon_position:[`Left | `Right] ->

     

       33
       22
        
         ?classes:Tailwind.t ->

     

       34
       23
        
         ?attributes:(string * string) list ->

     

       35
       35
       -
         ?onclick:string ->

     

       36
       24
        
         children:Htmlit.El.html list ->

     

       37
       25
        
         unit -> t

     

       38
       26
        
       

     

       39
       27
        
       (** Convert button to Htmlit element *)

     

       40
       28
        
       val to_html : t -> Htmlit.El.html

     

       41
       29
        
       

     

       42
       42
       -
       (** Create button group *)

     

       43
       43
       -
       val group :

     

       30
       30
       +
       (** Create a primary button (shorthand) *)

     

       31
       31
       +
       val primary :

     

       32
       32
       +
         ?size:size ->

     

       33
       33
       +
         ?state:state ->

     

       34
       34
       +
         ?icon:Htmlit.El.html ->

     

       44
       35
        
         ?classes:Tailwind.t ->

     

       45
       45
       -
         ?vertical:bool ->

     

       46
       46
       -
         buttons:t list ->

     

       36
       36
       +
         children:Htmlit.El.html list ->

     

       37
       37
       +
         unit -> Htmlit.El.html

     

       38
       38
       +
       

     

       39
       39
       +
       (** Create a secondary button (shorthand) *)

     

       40
       40
       +
       val secondary :

     

       41
       41
       +
         ?size:size ->

     

       42
       42
       +
         ?state:state ->

     

       43
       43
       +
         ?icon:Htmlit.El.html ->

     

       44
       44
       +
         ?classes:Tailwind.t ->

     

       45
       45
       +
         children:Htmlit.El.html list ->

     

       46
       46
       +
         unit -> Htmlit.El.html

     

       47
       47
       +
       

     

       48
       48
       +
       (** Create an outline button (shorthand) *)

     

       49
       49
       +
       val outline :

     

       50
       50
       +
         ?size:size ->

     

       51
       51
       +
         ?state:state ->

     

       52
       52
       +
         ?icon:Htmlit.El.html ->

     

       53
       53
       +
         ?classes:Tailwind.t ->

     

       54
       54
       +
         children:Htmlit.El.html list ->

     

       47
       55
        
         unit -> Htmlit.El.html

     

       48
       56
        
       

     

       49
       49
       -
       (** Icon button (button with just an icon) *)

     

       50
       50
       -
       val icon :

     

       51
       51
       -
         ?variant:variant ->

     

       57
       57
       +
       (** Create a ghost button (shorthand) *)

     

       58
       58
       +
       val ghost :

     

       52
       59
        
         ?size:size ->

     

       53
       53
       -
         ?disabled:bool ->

     

       60
       60
       +
         ?state:state ->

     

       61
       61
       +
         ?icon:Htmlit.El.html ->

     

       54
       62
        
         ?classes:Tailwind.t ->

     

       55
       55
       -
         ?attributes:(string * string) list ->

     

       56
       56
       -
         ?aria_label:string ->

     

       57
       57
       -
         icon:Htmlit.El.html ->

     

       63
       63
       +
         children:Htmlit.El.html list ->

     

       58
       64
        
         unit -> Htmlit.El.html

     

       59
       65
        
       

     

       60
       60
       -
       (** Link styled as button *)

     

       66
       66
       +
       (** Create a link button (shorthand) *)

     

       61
       67
        
       val link :

     

       62
       62
       -
         ?variant:variant ->

     

       63
       68
        
         ?size:size ->

     

       69
       69
       +
         ?state:state ->

     

       64
       70
        
         ?classes:Tailwind.t ->

     

       65
       65
       -
         ?attributes:(string * string) list ->

     

       66
       66
       -
         href:string ->

     

       67
       71
        
         children:Htmlit.El.html list ->

     

       68
       72
        
         unit -> Htmlit.El.html

+190

lib/tailwind-html/card.ml

···

       1
       1
       +
       open Htmlit

     

       2
       2
       +
       

     

       3
       3
       +
       (** Card variants *)

     

       4
       4
       +
       type variant =

     

       5
       5
       +
         | Default

     

       6
       6
       +
         | Outlined  

     

       7
       7
       +
         | Elevated

     

       8
       8
       +
         | Flat

     

       9
       9
       +
       

     

       10
       10
       +
       (** Card configuration *)

     

       11
       11
       +
       type t = {

     

       12
       12
       +
         variant: variant;

     

       13
       13
       +
         header: El.html option;

     

       14
       14
       +
         footer: El.html option;

     

       15
       15
       +
         image: El.html option;

     

       16
       16
       +
         padding: bool;

     

       17
       17
       +
         hoverable: bool;

     

       18
       18
       +
         clickable: bool;

     

       19
       19
       +
         classes: Tailwind.t option;

     

       20
       20
       +
         attributes: (string * string) list;

     

       21
       21
       +
         children: El.html list;

     

       22
       22
       +
       }

     

       23
       23
       +
       

     

       24
       24
       +
       let classes_attr tailwind_classes = 

     

       25
       25
       +
         At.class' (Tailwind.to_string tailwind_classes)

     

       26
       26
       +
       

     

       27
       27
       +
       let base_card_classes = Tailwind.tw [

     

       28
       28
       +
         Tailwind.Effects.rounded_lg;

     

       29
       29
       +
         Tailwind.Color.bg Tailwind.Color.white;

     

       30
       30
       +
         Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V900 ());

     

       31
       31
       +
       ]

     

       32
       32
       +
       

     

       33
       33
       +
       let variant_classes = function

     

       34
       34
       +
         | Default -> Tailwind.tw [

     

       35
       35
       +
             Tailwind.Effects.border;

     

       36
       36
       +
             Tailwind.Color.border (Tailwind.Color.make `Gray ~variant:`V200 ());

     

       37
       37
       +
             Tailwind.Effects.shadow_sm;

     

       38
       38
       +
           ]

     

       39
       39
       +
         | Outlined -> Tailwind.tw [

     

       40
       40
       +
             Tailwind.Effects.border_2;

     

       41
       41
       +
             Tailwind.Color.border (Tailwind.Color.make `Gray ~variant:`V300 ());

     

       42
       42
       +
           ]

     

       43
       43
       +
         | Elevated -> Tailwind.tw [

     

       44
       44
       +
             Tailwind.Effects.shadow_lg;

     

       45
       45
       +
             Tailwind.Effects.border;

     

       46
       46
       +
             Tailwind.Color.border (Tailwind.Color.make `Gray ~variant:`V200 ());

     

       47
       47
       +
           ]

     

       48
       48
       +
         | Flat -> Tailwind.tw [

     

       49
       49
       +
             Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V50 ());

     

       50
       50
       +
           ]

     

       51
       51
       +
       

     

       52
       52
       +
       let make ?variant ?header ?footer ?image ?(padding=true) ?(hoverable=false) ?(clickable=false) ?classes ?attributes ~children () = {

     

       53
       53
       +
         variant = (match variant with Some v -> v | None -> Default);

     

       54
       54
       +
         header;

     

       55
       55
       +
         footer;  

     

       56
       56
       +
         image;

     

       57
       57
       +
         padding;

     

       58
       58
       +
         hoverable;

     

       59
       59
       +
         clickable;

     

       60
       60
       +
         classes;

     

       61
       61
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       62
       62
       +
         children;

     

       63
       63
       +
       }

     

       64
       64
       +
       

     

       65
       65
       +
       let to_html card =

     

       66
       66
       +
         let card_classes = Tailwind.tw [

     

       67
       67
       +
           base_card_classes;

     

       68
       68
       +
           variant_classes card.variant;

     

       69
       69
       +
           (if card.padding then Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5))) else Tailwind.Css.empty);

     

       70
       70
       +
           (if card.hoverable then Tailwind.Variants.hover (Tailwind.Effects.shadow_md) else Tailwind.Css.empty);

     

       71
       71
       +
           (if card.clickable then Tailwind.tw [

     

       72
       72
       +
              Tailwind.Css.make "cursor-pointer";

     

       73
       73
       +
              Tailwind.Variants.hover (Tailwind.Effects.shadow_md);

     

       74
       74
       +
            ] else Tailwind.Css.empty);

     

       75
       75
       +
           (match card.classes with Some c -> c | None -> Tailwind.Css.empty);

     

       76
       76
       +
         ] in

     

       77
       77
       +
         

     

       78
       78
       +
         let base_attrs = [classes_attr card_classes] in

     

       79
       79
       +
         let custom_attrs = List.map (fun (k, v) -> At.v k v) card.attributes in

     

       80
       80
       +
         let all_attrs = base_attrs @ custom_attrs in

     

       81
       81
       +
         

     

       82
       82
       +
         let content = List.filter_map (fun x -> x) [

     

       83
       83
       +
           card.image;

     

       84
       84
       +
           card.header;

     

       85
       85
       +
           Some (El.div card.children);

     

       86
       86
       +
           card.footer;

     

       87
       87
       +
         ] in

     

       88
       88
       +
         

     

       89
       89
       +
         El.div ~at:all_attrs content

     

       90
       90
       +
       

     

       91
       91
       +
       (** Card header section *)

     

       92
       92
       +
       let header ?classes ?title ?subtitle ?actions ~children () =

     

       93
       93
       +
         let header_classes = Tailwind.tw [

     

       94
       94
       +
           Tailwind.Display.flex;

     

       95
       95
       +
           Tailwind.Flexbox.(to_class (direction `Col));

     

       96
       96
       +
           Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5)));

     

       97
       97
       +
           (match classes with Some c -> c | None -> Tailwind.Css.empty);

     

       98
       98
       +
         ] in

     

       99
       99
       +
         

     

       100
       100
       +
         let title_element = match title with

     

       101
       101
       +
           | Some t -> Some (El.h3 ~at:[classes_attr (Tailwind.tw [

     

       102
       102
       +
               Tailwind.Typography.(to_class (font_size `Lg));

     

       103
       103
       +
               Tailwind.Typography.(to_class (font_weight `Semibold));

     

       104
       104
       +
               Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 0.5)));

     

       105
       105
       +
             ])] [El.txt t])

     

       106
       106
       +
           | None -> None

     

       107
       107
       +
         in

     

       108
       108
       +
         

     

       109
       109
       +
         let subtitle_element = match subtitle with

     

       110
       110
       +
           | Some s -> Some (El.p ~at:[classes_attr (Tailwind.tw [

     

       111
       111
       +
               Tailwind.Typography.(to_class (font_size `Sm));

     

       112
       112
       +
               Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ());

     

       113
       113
       +
             ])] [El.txt s])

     

       114
       114
       +
           | None -> None

     

       115
       115
       +
         in

     

       116
       116
       +
         

     

       117
       117
       +
         let content = List.filter_map (fun x -> x) [

     

       118
       118
       +
           title_element;

     

       119
       119
       +
           subtitle_element;

     

       120
       120
       +
           (if children = [] then None else Some (El.div children));

     

       121
       121
       +
           actions;

     

       122
       122
       +
         ] in

     

       123
       123
       +
         

     

       124
       124
       +
         El.div ~at:[classes_attr header_classes] content

     

       125
       125
       +
       

     

       126
       126
       +
       (** Card body section *)

     

       127
       127
       +
       let body ?classes ~children () =

     

       128
       128
       +
         let body_classes = Tailwind.tw [

     

       129
       129
       +
           Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5)));

     

       130
       130
       +
           Tailwind.Spacing.(to_class (pt (Tailwind.Size.zero)));

     

       131
       131
       +
           (match classes with Some c -> c | None -> Tailwind.Css.empty);

     

       132
       132
       +
         ] in

     

       133
       133
       +
         

     

       134
       134
       +
         El.div ~at:[classes_attr body_classes] children

     

       135
       135
       +
       

     

       136
       136
       +
       (** Card footer section *)

     

       137
       137
       +
       let footer ?classes ?actions ~children () =

     

       138
       138
       +
         let footer_classes = Tailwind.tw [

     

       139
       139
       +
           Tailwind.Display.flex;

     

       140
       140
       +
           Tailwind.Flexbox.(to_class (align_items `Center));

     

       141
       141
       +
           Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5)));

     

       142
       142
       +
           Tailwind.Spacing.(to_class (pt (Tailwind.Size.zero)));

     

       143
       143
       +
           (match classes with Some c -> c | None -> Tailwind.Css.empty);

     

       144
       144
       +
         ] in

     

       145
       145
       +
         

     

       146
       146
       +
         let content = children @ (match actions with Some a -> a | None -> []) in

     

       147
       147
       +
         El.div ~at:[classes_attr footer_classes] content

     

       148
       148
       +
       

     

       149
       149
       +
       (** Card image section *)

     

       150
       150
       +
       let image ?classes ?alt ?(cover=true) ~src () =

     

       151
       151
       +
         let img_classes = Tailwind.tw [

     

       152
       152
       +
           Tailwind.Layout.w_full;

     

       153
       153
       +
           Tailwind.Layout.(to_class (height (Tailwind.Size.rem 12.0)));

     

       154
       154
       +
           (if cover then Tailwind.Layout.(to_class (object_fit `Cover)) else Tailwind.Css.empty);

     

       155
       155
       +
           Tailwind.Effects.(to_class (rounded `Top `Lg));

     

       156
       156
       +
           (match classes with Some c -> c | None -> Tailwind.Css.empty);

     

       157
       157
       +
         ] in

     

       158
       158
       +
         

     

       159
       159
       +
         El.img ~at:[

     

       160
       160
       +
           classes_attr img_classes;

     

       161
       161
       +
           At.src src;

     

       162
       162
       +
           At.alt (match alt with Some a -> a | None -> "");

     

       163
       163
       +
         ] ()

     

       164
       164
       +
       

     

       165
       165
       +
       (** Create a card grid *)

     

       166
       166
       +
       let grid ?cols ?gap ?classes ~cards () =

     

       167
       167
       +
         let base_classes = [Tailwind.Display.grid] in

     

       168
       168
       +
         

     

       169
       169
       +
         let col_classes = match cols with

     

       170
       170
       +
           | Some col_list -> List.fold_left (fun acc col ->

     

       171
       171
       +
               match col with

     

       172
       172
       +
               | `Xs n -> acc @ [Tailwind.Grid.(to_class (template_cols (`Cols n)))]

     

       173
       173
       +
               | `Sm n -> acc @ [Tailwind.Responsive.(to_class (at_breakpoint `Sm (Tailwind.Grid.(to_class (template_cols (`Cols n))))))]

     

       174
       174
       +
               | `Md n -> acc @ [Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Grid.(to_class (template_cols (`Cols n))))))]

     

       175
       175
       +
               | `Lg n -> acc @ [Tailwind.Responsive.(to_class (at_breakpoint `Lg (Tailwind.Grid.(to_class (template_cols (`Cols n))))))]

     

       176
       176
       +
               | `Xl n -> acc @ [Tailwind.Responsive.(to_class (at_breakpoint `Xl (Tailwind.Grid.(to_class (template_cols (`Cols n))))))]

     

       177
       177
       +
             ) [] col_list

     

       178
       178
       +
           | None -> [Tailwind.Grid.(to_class (template_cols (`Cols 1)))]

     

       179
       179
       +
         in

     

       180
       180
       +
         

     

       181
       181
       +
         let gap_classes = match gap with

     

       182
       182
       +
           | Some g -> [Tailwind.Spacing.(to_class (gap `All g))]

     

       183
       183
       +
           | None -> []

     

       184
       184
       +
         in

     

       185
       185
       +
         

     

       186
       186
       +
         let grid_classes = Tailwind.tw (base_classes @ col_classes @ gap_classes @ 

     

       187
       187
       +
           (match classes with Some c -> [c] | None -> [])) in

     

       188
       188
       +
         

     

       189
       189
       +
         let card_elements = List.map to_html cards in

     

       190
       190
       +
         El.div ~at:[classes_attr grid_classes] card_elements

+227

lib/tailwind-html/component.ml

···

       1
       1
       +
       open Htmlit

     

       2
       2
       +
       

     

       3
       3
       +
       (* Component configuration *)

     

       4
       4
       +
       type t = {

     

       5
       5
       +
         classes: Tailwind.t option;

     

       6
       6
       +
         attributes: (string * string) list;

     

       7
       7
       +
         id: string option;

     

       8
       8
       +
         data: (string * string) list;

     

       9
       9
       +
       }

     

       10
       10
       +
       

     

       11
       11
       +
       (* Helper function to convert Tailwind classes to Htmlit attributes *)

     

       12
       12
       +
       let classes_attr tailwind_classes = 

     

       13
       13
       +
         At.class' (Tailwind.to_string tailwind_classes)

     

       14
       14
       +
       

     

       15
       15
       +
       (* Create a component with classes and attributes *)

     

       16
       16
       +
       let make ?classes ?attributes ?id ?data () = {

     

       17
       17
       +
         classes;

     

       18
       18
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       19
       19
       +
         id;

     

       20
       20
       +
         data = (match data with Some d -> d | None -> []);

     

       21
       21
       +
       }

     

       22
       22
       +
       

     

       23
       23
       +
       (* Add classes to a component *)

     

       24
       24
       +
       let add_classes new_classes comp = {

     

       25
       25
       +
         comp with classes = match comp.classes with

     

       26
       26
       +
           | Some existing -> Some (Tailwind.tw [existing; new_classes])

     

       27
       27
       +
           | None -> Some new_classes

     

       28
       28
       +
       }

     

       29
       29
       +
       

     

       30
       30
       +
       (* Add attributes to a component *)

     

       31
       31
       +
       let add_attributes new_attrs comp = {

     

       32
       32
       +
         comp with attributes = comp.attributes @ new_attrs

     

       33
       33
       +
       }

     

       34
       34
       +
       

     

       35
       35
       +
       (* Convert component to Htmlit attributes *)

     

       36
       36
       +
       let to_htmlit_atts comp =

     

       37
       37
       +
         let class_attrs = match comp.classes with

     

       38
       38
       +
           | Some c -> [classes_attr c]

     

       39
       39
       +
           | None -> []

     

       40
       40
       +
         in

     

       41
       41
       +
         let attr_list = List.map (fun (k, v) -> At.v k v) comp.attributes in

     

       42
       42
       +
         let id_attrs = match comp.id with

     

       43
       43
       +
           | Some i -> [At.id i]

     

       44
       44
       +
           | None -> []

     

       45
       45
       +
         in

     

       46
       46
       +
         let data_attrs = List.map (fun (k, v) -> At.v ("data-" ^ k) v) comp.data in

     

       47
       47
       +
         class_attrs @ attr_list @ id_attrs @ data_attrs

     

       48
       48
       +
       

     

       49
       49
       +
       (* Apply component to an Htmlit element *)

     

       50
       50
       +
       let apply _comp element = 

     

       51
       51
       +
         (* This is a simplified implementation - in reality we'd need to traverse the element *)

     

       52
       52
       +
         element

     

       53
       53
       +
       

     

       54
       54
       +
       (* Create HTML elements with component styling *)

     

       55
       55
       +
       let div comp children =

     

       56
       56
       +
         let attrs = to_htmlit_atts comp in

     

       57
       57
       +
         El.div ~at:attrs children

     

       58
       58
       +
       

     

       59
       59
       +
       let span comp children =

     

       60
       60
       +
         let attrs = to_htmlit_atts comp in

     

       61
       61
       +
         El.span ~at:attrs children

     

       62
       62
       +
       

     

       63
       63
       +
       let section comp children =

     

       64
       64
       +
         let attrs = to_htmlit_atts comp in

     

       65
       65
       +
         El.section ~at:attrs children

     

       66
       66
       +
       

     

       67
       67
       +
       let article comp children =

     

       68
       68
       +
         let attrs = to_htmlit_atts comp in

     

       69
       69
       +
         El.article ~at:attrs children

     

       70
       70
       +
       

     

       71
       71
       +
       (* Utility functions for common HTML elements *)

     

       72
       72
       +
       let p ?classes ?attrs children =

     

       73
       73
       +
         let base_attrs = match classes with

     

       74
       74
       +
           | Some c -> [classes_attr c]

     

       75
       75
       +
           | None -> []

     

       76
       76
       +
         in

     

       77
       77
       +
         let all_attrs = match attrs with

     

       78
       78
       +
           | Some a -> base_attrs @ a

     

       79
       79
       +
           | None -> base_attrs

     

       80
       80
       +
         in

     

       81
       81
       +
         El.p ?at:(if all_attrs = [] then None else Some all_attrs) children

     

       82
       82
       +
       

     

       83
       83
       +
       let h1 ?classes ?attrs children =

     

       84
       84
       +
         let base_attrs = match classes with

     

       85
       85
       +
           | Some c -> [classes_attr c]

     

       86
       86
       +
           | None -> []

     

       87
       87
       +
         in

     

       88
       88
       +
         let all_attrs = match attrs with

     

       89
       89
       +
           | Some a -> base_attrs @ a

     

       90
       90
       +
           | None -> base_attrs

     

       91
       91
       +
         in

     

       92
       92
       +
         El.h1 ?at:(if all_attrs = [] then None else Some all_attrs) children

     

       93
       93
       +
       

     

       94
       94
       +
       let h2 ?classes ?attrs children =

     

       95
       95
       +
         let base_attrs = match classes with

     

       96
       96
       +
           | Some c -> [classes_attr c]

     

       97
       97
       +
           | None -> []

     

       98
       98
       +
         in

     

       99
       99
       +
         let all_attrs = match attrs with

     

       100
       100
       +
           | Some a -> base_attrs @ a

     

       101
       101
       +
           | None -> base_attrs

     

       102
       102
       +
         in

     

       103
       103
       +
         El.h2 ?at:(if all_attrs = [] then None else Some all_attrs) children

     

       104
       104
       +
       

     

       105
       105
       +
       let h3 ?classes ?attrs children =

     

       106
       106
       +
         let base_attrs = match classes with

     

       107
       107
       +
           | Some c -> [classes_attr c]

     

       108
       108
       +
           | None -> []

     

       109
       109
       +
         in

     

       110
       110
       +
         let all_attrs = match attrs with

     

       111
       111
       +
           | Some a -> base_attrs @ a

     

       112
       112
       +
           | None -> base_attrs

     

       113
       113
       +
         in

     

       114
       114
       +
         El.h3 ?at:(if all_attrs = [] then None else Some all_attrs) children

     

       115
       115
       +
       

     

       116
       116
       +
       let img ?classes ?attrs ~src ~alt () =

     

       117
       117
       +
         let base_attrs = match classes with

     

       118
       118
       +
           | Some c -> [classes_attr c]

     

       119
       119
       +
           | None -> []

     

       120
       120
       +
         in

     

       121
       121
       +
         let required_attrs = [At.src src; At.alt alt] in

     

       122
       122
       +
         let all_attrs = match attrs with

     

       123
       123
       +
           | Some a -> base_attrs @ required_attrs @ a

     

       124
       124
       +
           | None -> base_attrs @ required_attrs

     

       125
       125
       +
         in

     

       126
       126
       +
         El.img ~at:all_attrs ()

     

       127
       127
       +
       

     

       128
       128
       +
       let a ?classes ?attrs ~href children =

     

       129
       129
       +
         let base_attrs = match classes with

     

       130
       130
       +
           | Some c -> [classes_attr c]

     

       131
       131
       +
           | None -> []

     

       132
       132
       +
         in

     

       133
       133
       +
         let required_attrs = [At.href href] in

     

       134
       134
       +
         let all_attrs = match attrs with

     

       135
       135
       +
           | Some a -> base_attrs @ required_attrs @ a

     

       136
       136
       +
           | None -> base_attrs @ required_attrs

     

       137
       137
       +
         in

     

       138
       138
       +
         El.a ~at:all_attrs children

     

       139
       139
       +
       

     

       140
       140
       +
       let ul ?classes ?attrs children =

     

       141
       141
       +
         let base_attrs = match classes with

     

       142
       142
       +
           | Some c -> [classes_attr c]

     

       143
       143
       +
           | None -> []

     

       144
       144
       +
         in

     

       145
       145
       +
         let all_attrs = match attrs with

     

       146
       146
       +
           | Some a -> base_attrs @ a

     

       147
       147
       +
           | None -> base_attrs

     

       148
       148
       +
         in

     

       149
       149
       +
         El.ul ?at:(if all_attrs = [] then None else Some all_attrs) children

     

       150
       150
       +
       

     

       151
       151
       +
       let ol ?classes ?attrs children =

     

       152
       152
       +
         let base_attrs = match classes with

     

       153
       153
       +
           | Some c -> [classes_attr c]

     

       154
       154
       +
           | None -> []

     

       155
       155
       +
         in

     

       156
       156
       +
         let all_attrs = match attrs with

     

       157
       157
       +
           | Some a -> base_attrs @ a

     

       158
       158
       +
           | None -> base_attrs

     

       159
       159
       +
         in

     

       160
       160
       +
         El.ol ?at:(if all_attrs = [] then None else Some all_attrs) children

     

       161
       161
       +
       

     

       162
       162
       +
       let li ?classes ?attrs children =

     

       163
       163
       +
         let base_attrs = match classes with

     

       164
       164
       +
           | Some c -> [classes_attr c]

     

       165
       165
       +
           | None -> []

     

       166
       166
       +
         in

     

       167
       167
       +
         let all_attrs = match attrs with

     

       168
       168
       +
           | Some a -> base_attrs @ a

     

       169
       169
       +
           | None -> base_attrs

     

       170
       170
       +
         in

     

       171
       171
       +
         El.li ?at:(if all_attrs = [] then None else Some all_attrs) children

     

       172
       172
       +
       

     

       173
       173
       +
       let header ?classes ?attrs children =

     

       174
       174
       +
         let base_attrs = match classes with

     

       175
       175
       +
           | Some c -> [classes_attr c]

     

       176
       176
       +
           | None -> []

     

       177
       177
       +
         in

     

       178
       178
       +
         let all_attrs = match attrs with

     

       179
       179
       +
           | Some a -> base_attrs @ a

     

       180
       180
       +
           | None -> base_attrs

     

       181
       181
       +
         in

     

       182
       182
       +
         El.header ?at:(if all_attrs = [] then None else Some all_attrs) children

     

       183
       183
       +
       

     

       184
       184
       +
       let footer ?classes ?attrs children =

     

       185
       185
       +
         let base_attrs = match classes with

     

       186
       186
       +
           | Some c -> [classes_attr c]

     

       187
       187
       +
           | None -> []

     

       188
       188
       +
         in

     

       189
       189
       +
         let all_attrs = match attrs with

     

       190
       190
       +
           | Some a -> base_attrs @ a

     

       191
       191
       +
           | None -> base_attrs

     

       192
       192
       +
         in

     

       193
       193
       +
         El.footer ?at:(if all_attrs = [] then None else Some all_attrs) children

     

       194
       194
       +
       

     

       195
       195
       +
       let nav ?classes ?attrs children =

     

       196
       196
       +
         let base_attrs = match classes with

     

       197
       197
       +
           | Some c -> [classes_attr c]

     

       198
       198
       +
           | None -> []

     

       199
       199
       +
         in

     

       200
       200
       +
         let all_attrs = match attrs with

     

       201
       201
       +
           | Some a -> base_attrs @ a

     

       202
       202
       +
           | None -> base_attrs

     

       203
       203
       +
         in

     

       204
       204
       +
         El.nav ?at:(if all_attrs = [] then None else Some all_attrs) children

     

       205
       205
       +
       

     

       206
       206
       +
       let main ?classes ?attrs children =

     

       207
       207
       +
         let base_attrs = match classes with

     

       208
       208
       +
           | Some c -> [classes_attr c]

     

       209
       209
       +
           | None -> []

     

       210
       210
       +
         in

     

       211
       211
       +
         let all_attrs = match attrs with

     

       212
       212
       +
           | Some a -> base_attrs @ a

     

       213
       213
       +
           | None -> base_attrs

     

       214
       214
       +
         in

     

       215
       215
       +
         El.main ?at:(if all_attrs = [] then None else Some all_attrs) children

     

       216
       216
       +
       

     

       217
       217
       +
       (* Simplified div function that matches existing usage *)

     

       218
       218
       +
       let div_simple ?classes ?attrs children =

     

       219
       219
       +
         let base_attrs = match classes with

     

       220
       220
       +
           | Some c -> [classes_attr c]

     

       221
       221
       +
           | None -> []

     

       222
       222
       +
         in

     

       223
       223
       +
         let all_attrs = match attrs with

     

       224
       224
       +
           | Some a -> base_attrs @ a

     

       225
       225
       +
           | None -> base_attrs

     

       226
       226
       +
         in

     

       227
       227
       +
         El.div ?at:(if all_attrs = [] then None else Some all_attrs) children

+17 -1

lib/tailwind-html/component.mli

···

       33
       33
        
       val section : t -> Htmlit.El.html list -> Htmlit.El.html

     

       34
       34
        
       

     

       35
       35
        
       (** Create an article with component styling *)

     

       36
       36
       -
       val article : t -> Htmlit.El.html list -> Htmlit.El.html
     

       36
       36
       +
       val article : t -> Htmlit.El.html list -> Htmlit.El.html

     

       37
       37
       +
       

     

       38
       38
       +
       (** Utility functions for common HTML elements *)

     

       39
       39
       +
       val div_simple : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> Htmlit.El.html list -> Htmlit.El.html

     

       40
       40
       +
       val p : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> Htmlit.El.html list -> Htmlit.El.html

     

       41
       41
       +
       val h1 : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> Htmlit.El.html list -> Htmlit.El.html

     

       42
       42
       +
       val h2 : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> Htmlit.El.html list -> Htmlit.El.html

     

       43
       43
       +
       val h3 : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> Htmlit.El.html list -> Htmlit.El.html

     

       44
       44
       +
       val img : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> src:string -> alt:string -> unit -> Htmlit.El.html

     

       45
       45
       +
       val a : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> href:string -> Htmlit.El.html list -> Htmlit.El.html

     

       46
       46
       +
       val ul : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> Htmlit.El.html list -> Htmlit.El.html

     

       47
       47
       +
       val ol : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> Htmlit.El.html list -> Htmlit.El.html

     

       48
       48
       +
       val li : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> Htmlit.El.html list -> Htmlit.El.html

     

       49
       49
       +
       val header : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> Htmlit.El.html list -> Htmlit.El.html

     

       50
       50
       +
       val footer : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> Htmlit.El.html list -> Htmlit.El.html

     

       51
       51
       +
       val nav : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> Htmlit.El.html list -> Htmlit.El.html

     

       52
       52
       +
       val main : ?classes:Tailwind.t -> ?attrs:Htmlit.At.t list -> Htmlit.El.html list -> Htmlit.El.html

+2 -3

lib/tailwind-html/dune

···

       1
       1
        
       (library

     

       2
       2
        
        (public_name tailwind-html)

     

       3
       3
        
        (name tailwind_html)

     

       4
       4
       -
        (libraries tailwind htmlit)

     

       5
       5
       -
        (modules component button card form layout tailwind_html)

     

       6
       6
       -
        (modules_without_implementation component button card form layout tailwind_html))
     

       4
       4
       +
        (libraries tailwind htmlit unix)

     

       5
       5
       +
        (modules component button card cli form layout tailwind_html))

+296

lib/tailwind-html/form.ml

···

       1
       1
       +
       open Htmlit

     

       2
       2
       +
       

     

       3
       3
       +
       type input_type =

     

       4
       4
       +
         | Text

     

       5
       5
       +
         | Email

     

       6
       6
       +
         | Password

     

       7
       7
       +
         | Number

     

       8
       8
       +
         | Tel

     

       9
       9
       +
         | Url

     

       10
       10
       +
         | Search

     

       11
       11
       +
         | Date

     

       12
       12
       +
         | Time

     

       13
       13
       +
         | Datetime_local

     

       14
       14
       +
       

     

       15
       15
       +
       type validation_state =

     

       16
       16
       +
         | Valid

     

       17
       17
       +
         | Invalid

     

       18
       18
       +
         | Warning

     

       19
       19
       +
       

     

       20
       20
       +
       type field_type =

     

       21
       21
       +
         | Input of input_type

     

       22
       22
       +
         | Textarea

     

       23
       23
       +
         | Select of (string * string) list (* value, label pairs *)

     

       24
       24
       +
         | Checkbox

     

       25
       25
       +
         | Radio of string (* value *)

     

       26
       26
       +
         | Switch

     

       27
       27
       +
       

     

       28
       28
       +
       type t = {

     

       29
       29
       +
         field_type: field_type;

     

       30
       30
       +
         label: string option;

     

       31
       31
       +
         placeholder: string option;

     

       32
       32
       +
         value: string option;

     

       33
       33
       +
         name: string option;

     

       34
       34
       +
         id: string option;

     

       35
       35
       +
         rows: int option; (* for textarea *)

     

       36
       36
       +
         required: bool;

     

       37
       37
       +
         disabled: bool;

     

       38
       38
       +
         readonly: bool;

     

       39
       39
       +
         checked: bool; (* for checkbox/radio/switch *)

     

       40
       40
       +
         validation: validation_state option;

     

       41
       41
       +
         helper_text: string option;

     

       42
       42
       +
         error_text: string option;

     

       43
       43
       +
         classes: Tailwind.t option;

     

       44
       44
       +
         attributes: (string * string) list;

     

       45
       45
       +
       }

     

       46
       46
       +
       

     

       47
       47
       +
       let classes_attr tailwind_classes = 

     

       48
       48
       +
         At.class' (Tailwind.to_string tailwind_classes)

     

       49
       49
       +
       

     

       50
       50
       +
       let base_input_classes = Tailwind.tw [

     

       51
       51
       +
         Tailwind.Display.flex;

     

       52
       52
       +
         Tailwind.Layout.(to_class (height (Tailwind.Size.rem 2.5)));

     

       53
       53
       +
         Tailwind.Layout.w_full;

     

       54
       54
       +
         Tailwind.Effects.rounded_md;

     

       55
       55
       +
         Tailwind.Effects.border;

     

       56
       56
       +
         Tailwind.Color.border (Tailwind.Color.make `Gray ~variant:`V300 ());

     

       57
       57
       +
         Tailwind.Color.bg Tailwind.Color.white;

     

       58
       58
       +
         Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 0.75)));

     

       59
       59
       +
         Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 0.5)));

     

       60
       60
       +
         Tailwind.Typography.(to_class (font_size `Sm));

     

       61
       61
       +
       ]

     

       62
       62
       +
       

     

       63
       63
       +
       let validation_classes = function

     

       64
       64
       +
         | Some Valid -> Tailwind.tw [

     

       65
       65
       +
             Tailwind.Color.border (Tailwind.Color.make `Green ~variant:`V500 ());

     

       66
       66
       +
             Tailwind.Variants.focus (Tailwind.Color.border (Tailwind.Color.make `Green ~variant:`V600 ()));

     

       67
       67
       +
           ]

     

       68
       68
       +
         | Some Invalid -> Tailwind.tw [

     

       69
       69
       +
             Tailwind.Color.border (Tailwind.Color.make `Red ~variant:`V500 ());

     

       70
       70
       +
             Tailwind.Variants.focus (Tailwind.Color.border (Tailwind.Color.make `Red ~variant:`V600 ()));

     

       71
       71
       +
           ]

     

       72
       72
       +
         | Some Warning -> Tailwind.tw [

     

       73
       73
       +
             Tailwind.Color.border (Tailwind.Color.make `Yellow ~variant:`V500 ());

     

       74
       74
       +
             Tailwind.Variants.focus (Tailwind.Color.border (Tailwind.Color.make `Yellow ~variant:`V600 ()));

     

       75
       75
       +
           ]

     

       76
       76
       +
         | None -> Tailwind.Css.empty

     

       77
       77
       +
       

     

       78
       78
       +
       let input ?input_type ?label ?placeholder ?value ?name ?id ?required ?disabled ?readonly ?validation ?helper_text ?error_text ?classes ?attributes () = {

     

       79
       79
       +
         field_type = Input (match input_type with Some t -> t | None -> Text);

     

       80
       80
       +
         label;

     

       81
       81
       +
         placeholder;

     

       82
       82
       +
         value;

     

       83
       83
       +
         name;

     

       84
       84
       +
         id;

     

       85
       85
       +
         rows = None;

     

       86
       86
       +
         required = (match required with Some r -> r | None -> false);

     

       87
       87
       +
         disabled = (match disabled with Some d -> d | None -> false);

     

       88
       88
       +
         readonly = (match readonly with Some r -> r | None -> false);

     

       89
       89
       +
         checked = false;

     

       90
       90
       +
         validation;

     

       91
       91
       +
         helper_text;

     

       92
       92
       +
         error_text;

     

       93
       93
       +
         classes;

     

       94
       94
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       95
       95
       +
       }

     

       96
       96
       +
       

     

       97
       97
       +
       let textarea ?label ?placeholder ?value ?name ?id ?rows ?required ?disabled ?readonly ?validation ?helper_text ?error_text ?classes ?attributes () = {

     

       98
       98
       +
         field_type = Textarea;

     

       99
       99
       +
         label;

     

       100
       100
       +
         placeholder;

     

       101
       101
       +
         value;

     

       102
       102
       +
         name;

     

       103
       103
       +
         id;

     

       104
       104
       +
         rows;

     

       105
       105
       +
         required = (match required with Some r -> r | None -> false);

     

       106
       106
       +
         disabled = (match disabled with Some d -> d | None -> false);

     

       107
       107
       +
         readonly = (match readonly with Some r -> r | None -> false);

     

       108
       108
       +
         checked = false;

     

       109
       109
       +
         validation;

     

       110
       110
       +
         helper_text;

     

       111
       111
       +
         error_text;

     

       112
       112
       +
         classes;

     

       113
       113
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       114
       114
       +
       }

     

       115
       115
       +
       

     

       116
       116
       +
       let select ?label ?name ?id ?required ?disabled ?validation ?helper_text ?error_text ?classes ?attributes ~options () = {

     

       117
       117
       +
         field_type = Select options;

     

       118
       118
       +
         label;

     

       119
       119
       +
         placeholder = None;

     

       120
       120
       +
         value = None;

     

       121
       121
       +
         name;

     

       122
       122
       +
         id;

     

       123
       123
       +
         rows = None;

     

       124
       124
       +
         required = (match required with Some r -> r | None -> false);

     

       125
       125
       +
         disabled = (match disabled with Some d -> d | None -> false);

     

       126
       126
       +
         readonly = false;

     

       127
       127
       +
         checked = false;

     

       128
       128
       +
         validation;

     

       129
       129
       +
         helper_text;

     

       130
       130
       +
         error_text;

     

       131
       131
       +
         classes;

     

       132
       132
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       133
       133
       +
       }

     

       134
       134
       +
       

     

       135
       135
       +
       let checkbox ?label ?name ?id ?checked ?disabled ?classes ?attributes () = {

     

       136
       136
       +
         field_type = Checkbox;

     

       137
       137
       +
         label;

     

       138
       138
       +
         placeholder = None;

     

       139
       139
       +
         value = None;

     

       140
       140
       +
         name;

     

       141
       141
       +
         id;

     

       142
       142
       +
         rows = None;

     

       143
       143
       +
         required = false;

     

       144
       144
       +
         disabled = (match disabled with Some d -> d | None -> false);

     

       145
       145
       +
         readonly = false;

     

       146
       146
       +
         checked = (match checked with Some c -> c | None -> false);

     

       147
       147
       +
         validation = None;

     

       148
       148
       +
         helper_text = None;

     

       149
       149
       +
         error_text = None;

     

       150
       150
       +
         classes;

     

       151
       151
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       152
       152
       +
       }

     

       153
       153
       +
       

     

       154
       154
       +
       let radio ?label ?name ?id ?value ?checked ?disabled ?classes ?attributes () = {

     

       155
       155
       +
         field_type = Radio (match value with Some v -> v | None -> "");

     

       156
       156
       +
         label;

     

       157
       157
       +
         placeholder = None;

     

       158
       158
       +
         value;

     

       159
       159
       +
         name;

     

       160
       160
       +
         id;

     

       161
       161
       +
         rows = None;

     

       162
       162
       +
         required = false;

     

       163
       163
       +
         disabled = (match disabled with Some d -> d | None -> false);

     

       164
       164
       +
         readonly = false;

     

       165
       165
       +
         checked = (match checked with Some c -> c | None -> false);

     

       166
       166
       +
         validation = None;

     

       167
       167
       +
         helper_text = None;

     

       168
       168
       +
         error_text = None;

     

       169
       169
       +
         classes;

     

       170
       170
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       171
       171
       +
       }

     

       172
       172
       +
       

     

       173
       173
       +
       let switch ?label ?name ?id ?checked ?disabled ?classes ?attributes () = {

     

       174
       174
       +
         field_type = Switch;

     

       175
       175
       +
         label;

     

       176
       176
       +
         placeholder = None;

     

       177
       177
       +
         value = None;

     

       178
       178
       +
         name;

     

       179
       179
       +
         id;

     

       180
       180
       +
         rows = None;

     

       181
       181
       +
         required = false;

     

       182
       182
       +
         disabled = (match disabled with Some d -> d | None -> false);

     

       183
       183
       +
         readonly = false;

     

       184
       184
       +
         checked = (match checked with Some c -> c | None -> false);

     

       185
       185
       +
         validation = None;

     

       186
       186
       +
         helper_text = None;

     

       187
       187
       +
         error_text = None;

     

       188
       188
       +
         classes;

     

       189
       189
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       190
       190
       +
       }

     

       191
       191
       +
       

     

       192
       192
       +
       let input_type_to_string = function

     

       193
       193
       +
         | Text -> "text"

     

       194
       194
       +
         | Email -> "email"

     

       195
       195
       +
         | Password -> "password"

     

       196
       196
       +
         | Number -> "number"

     

       197
       197
       +
         | Tel -> "tel"

     

       198
       198
       +
         | Url -> "url"

     

       199
       199
       +
         | Search -> "search"

     

       200
       200
       +
         | Date -> "date"

     

       201
       201
       +
         | Time -> "time"

     

       202
       202
       +
         | Datetime_local -> "datetime-local"

     

       203
       203
       +
       

     

       204
       204
       +
       let to_html field =

     

       205
       205
       +
         let field_classes = Tailwind.tw [

     

       206
       206
       +
           base_input_classes;

     

       207
       207
       +
           validation_classes field.validation;

     

       208
       208
       +
           (match field.classes with Some c -> c | None -> Tailwind.Css.empty);

     

       209
       209
       +
         ] in

     

       210
       210
       +
         

     

       211
       211
       +
         let base_attrs = [classes_attr field_classes] in

     

       212
       212
       +
         let optional_attrs = List.filter_map (fun x -> x) [

     

       213
       213
       +
           Option.map At.placeholder field.placeholder;

     

       214
       214
       +
           Option.map At.value field.value;

     

       215
       215
       +
           Option.map At.name field.name;

     

       216
       216
       +
           Option.map At.id field.id;

     

       217
       217
       +
           (if field.required then Some At.required else None);

     

       218
       218
       +
           (if field.disabled then Some At.disabled else None);

     

       219
       219
       +
           (if field.readonly then Some (At.v "readonly" "readonly") else None);

     

       220
       220
       +
           (if field.checked then Some At.checked else None);

     

       221
       221
       +
         ] in

     

       222
       222
       +
         let custom_attrs = List.map (fun (k, v) -> At.v k v) field.attributes in

     

       223
       223
       +
         let all_attrs = base_attrs @ optional_attrs @ custom_attrs in

     

       224
       224
       +
         

     

       225
       225
       +
         let input_element = match field.field_type with

     

       226
       226
       +
           | Input input_type ->

     

       227
       227
       +
               El.input ~at:(At.type' (input_type_to_string input_type) :: all_attrs) ()

     

       228
       228
       +
           | Textarea ->

     

       229
       229
       +
               let textarea_attrs = match field.rows with

     

       230
       230
       +
                 | Some r -> At.rows r :: all_attrs

     

       231
       231
       +
                 | None -> all_attrs

     

       232
       232
       +
               in

     

       233
       233
       +
               El.textarea ~at:textarea_attrs []

     

       234
       234
       +
           | Select options ->

     

       235
       235
       +
               let option_elements = List.map (fun (value, label) ->

     

       236
       236
       +
                 El.option ~at:[At.value value] [El.txt label]

     

       237
       237
       +
               ) options in

     

       238
       238
       +
               El.select ~at:all_attrs option_elements

     

       239
       239
       +
           | Checkbox ->

     

       240
       240
       +
               El.input ~at:(At.type' "checkbox" :: all_attrs) ()

     

       241
       241
       +
           | Radio value ->

     

       242
       242
       +
               El.input ~at:(At.type' "radio" :: At.value value :: all_attrs) ()

     

       243
       243
       +
           | Switch ->

     

       244
       244
       +
               (* Switch is implemented as a styled checkbox *)

     

       245
       245
       +
               El.input ~at:(At.type' "checkbox" :: all_attrs) ()

     

       246
       246
       +
         in

     

       247
       247
       +
         

     

       248
       248
       +
         (* Wrap in label if provided *)

     

       249
       249
       +
         match field.label with

     

       250
       250
       +
           | Some label_text ->

     

       251
       251
       +
               El.label [

     

       252
       252
       +
                 El.txt label_text;

     

       253
       253
       +
                 input_element;

     

       254
       254
       +
               ]

     

       255
       255
       +
           | None -> input_element

     

       256
       256
       +
       

     

       257
       257
       +
       let group ?classes ~fields () =

     

       258
       258
       +
         let group_classes = Tailwind.tw [

     

       259
       259
       +
           Tailwind.Display.grid;

     

       260
       260
       +
           Tailwind.Layout.w_full;

     

       261
       261
       +
           Tailwind.Spacing.(to_class (gap `All (Tailwind.Size.rem 1.0)));

     

       262
       262
       +
           (match classes with Some c -> c | None -> Tailwind.Css.empty);

     

       263
       263
       +
         ] in

     

       264
       264
       +
         

     

       265
       265
       +
         let field_elements = List.map to_html fields in

     

       266
       266
       +
         El.div ~at:[classes_attr group_classes] field_elements

     

       267
       267
       +
       

     

       268
       268
       +
       let form ?action ?method_ ?classes ?attributes ~fields ?submit () =

     

       269
       269
       +
         let form_classes = Tailwind.tw [

     

       270
       270
       +
           Tailwind.Display.grid;

     

       271
       271
       +
           Tailwind.Layout.w_full;

     

       272
       272
       +
           Tailwind.Spacing.(to_class (gap `All (Tailwind.Size.rem 1.5)));

     

       273
       273
       +
           (match classes with Some c -> c | None -> Tailwind.Css.empty);

     

       274
       274
       +
         ] in

     

       275
       275
       +
         

     

       276
       276
       +
         let base_attrs = [classes_attr form_classes] in

     

       277
       277
       +
         let optional_attrs = List.filter_map (fun x -> x) [

     

       278
       278
       +
           Option.map At.action action;

     

       279
       279
       +
           (match method_ with 

     

       280
       280
       +
            | Some `Get -> Some (At.method' "get")

     

       281
       281
       +
            | Some `Post -> Some (At.method' "post")

     

       282
       282
       +
            | None -> None);

     

       283
       283
       +
         ] in

     

       284
       284
       +
         let custom_attrs = match attributes with

     

       285
       285
       +
           | Some attrs -> List.map (fun (k, v) -> At.v k v) attrs

     

       286
       286
       +
           | None -> []

     

       287
       287
       +
         in

     

       288
       288
       +
         let all_attrs = base_attrs @ optional_attrs @ custom_attrs in

     

       289
       289
       +
         

     

       290
       290
       +
         let field_elements = List.map to_html fields in

     

       291
       291
       +
         let submit_element = match submit with

     

       292
       292
       +
           | Some btn -> [Button.to_html btn]

     

       293
       293
       +
           | None -> []

     

       294
       294
       +
         in

     

       295
       295
       +
         

     

       296
       296
       +
         El.form ~at:all_attrs (field_elements @ submit_element)

+197

lib/tailwind-html/layout.ml

···

       1
       1
       +
       open Htmlit

     

       2
       2
       +
       

     

       3
       3
       +
       type container_size =

     

       4
       4
       +
         | Sm

     

       5
       5
       +
         | Md

     

       6
       6
       +
         | Lg

     

       7
       7
       +
         | Xl

     

       8
       8
       +
         | Xl2

     

       9
       9
       +
         | Full

     

       10
       10
       +
         | Fluid

     

       11
       11
       +
       

     

       12
       12
       +
       type layout_type =

     

       13
       13
       +
         | Container of container_size * bool * bool

     

       14
       14
       +
         | Flex of Tailwind.Flexbox.direction option * Tailwind.Flexbox.justify option * Tailwind.Flexbox.align_items option * Tailwind.Flexbox.wrap option * Tailwind.Size.t option

     

       15
       15
       +
         | Grid of Tailwind.Grid.cols option * Tailwind.Grid.rows option * Tailwind.Size.t option * Tailwind.Size.t option * Tailwind.Size.t option * Tailwind.Grid.flow option

     

       16
       16
       +
         | Stack of Tailwind.Size.t option * Tailwind.Flexbox.align_items option

     

       17
       17
       +
         | Row of Tailwind.Size.t option * Tailwind.Flexbox.justify option * Tailwind.Flexbox.align_items option * bool option

     

       18
       18
       +
         | Sidebar of [`Left | `Right] option * Tailwind.Size.t option * bool option * El.html * El.html

     

       19
       19
       +
         | Page of El.html option * El.html option * El.html option * El.html

     

       20
       20
       +
       

     

       21
       21
       +
       type t = {

     

       22
       22
       +
         layout_type: layout_type;

     

       23
       23
       +
         classes: Tailwind.t option;

     

       24
       24
       +
         attributes: (string * string) list;

     

       25
       25
       +
         children: El.html list;

     

       26
       26
       +
       }

     

       27
       27
       +
       

     

       28
       28
       +
       let classes_attr tailwind_classes = 

     

       29
       29
       +
         At.class' (Tailwind.to_string tailwind_classes)

     

       30
       30
       +
       

     

       31
       31
       +
       let container_size_to_class = function

     

       32
       32
       +
         | Sm -> Tailwind.Css.make "max-w-sm"

     

       33
       33
       +
         | Md -> Tailwind.Css.make "max-w-md"

     

       34
       34
       +
         | Lg -> Tailwind.Css.make "max-w-lg"

     

       35
       35
       +
         | Xl -> Tailwind.Css.make "max-w-xl"

     

       36
       36
       +
         | Xl2 -> Tailwind.Css.make "max-w-2xl"

     

       37
       37
       +
         | Full -> Tailwind.Css.make "max-w-full"

     

       38
       38
       +
         | Fluid -> Tailwind.Layout.w_full

     

       39
       39
       +
       

     

       40
       40
       +
       let container ?size ?(center=true) ?(padding=true) ?classes ?attributes ~children () = {

     

       41
       41
       +
         layout_type = Container (

     

       42
       42
       +
           (match size with Some s -> s | None -> Lg),

     

       43
       43
       +
           center,

     

       44
       44
       +
           padding

     

       45
       45
       +
         );

     

       46
       46
       +
         classes;

     

       47
       47
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       48
       48
       +
         children;

     

       49
       49
       +
       }

     

       50
       50
       +
       

     

       51
       51
       +
       let flex ?direction ?justify ?align ?wrap ?gap ?classes ?attributes ~children () = {

     

       52
       52
       +
         layout_type = Flex (direction, justify, align, wrap, gap);

     

       53
       53
       +
         classes;

     

       54
       54
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       55
       55
       +
         children;

     

       56
       56
       +
       }

     

       57
       57
       +
       

     

       58
       58
       +
       let grid ?cols ?rows ?gap ?gap_x ?gap_y ?flow ?classes ?attributes ~children () = {

     

       59
       59
       +
         layout_type = Grid (cols, rows, gap, gap_x, gap_y, flow);

     

       60
       60
       +
         classes;

     

       61
       61
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       62
       62
       +
         children;

     

       63
       63
       +
       }

     

       64
       64
       +
       

     

       65
       65
       +
       let stack ?gap ?align ?classes ?attributes ~children () = {

     

       66
       66
       +
         layout_type = Stack (gap, align);

     

       67
       67
       +
         classes;

     

       68
       68
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       69
       69
       +
         children;

     

       70
       70
       +
       }

     

       71
       71
       +
       

     

       72
       72
       +
       let row ?gap ?justify ?align ?wrap ?classes ?attributes ~children () = {

     

       73
       73
       +
         layout_type = Row (gap, justify, align, wrap);

     

       74
       74
       +
         classes;

     

       75
       75
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       76
       76
       +
         children;

     

       77
       77
       +
       }

     

       78
       78
       +
       

     

       79
       79
       +
       let sidebar ?side ?width ?(collapsible=false) ?classes ?attributes ~sidebar ~content () = {

     

       80
       80
       +
         layout_type = Sidebar (side, width, Some collapsible, sidebar, content);

     

       81
       81
       +
         classes;

     

       82
       82
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       83
       83
       +
         children = [];

     

       84
       84
       +
       }

     

       85
       85
       +
       

     

       86
       86
       +
       let page ?header ?footer ?sidebar ?classes ?attributes ~main () = {

     

       87
       87
       +
         layout_type = Page (header, footer, sidebar, main);

     

       88
       88
       +
         classes;

     

       89
       89
       +
         attributes = (match attributes with Some a -> a | None -> []);

     

       90
       90
       +
         children = [];

     

       91
       91
       +
       }

     

       92
       92
       +
       

     

       93
       93
       +
       let to_html layout =

     

       94
       94
       +
         let base_classes = match layout.layout_type with

     

       95
       95
       +
           | Container (size, center, padding) -> 

     

       96
       96
       +
               let size_class = container_size_to_class size in

     

       97
       97
       +
               let center_class = if center then Tailwind.Css.make "mx-auto" else Tailwind.Css.empty in

     

       98
       98
       +
               let padding_class = if padding then Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 1.0))) else Tailwind.Css.empty in

     

       99
       99
       +
               Tailwind.tw [size_class; center_class; padding_class]

     

       100
       100
       +
           

     

       101
       101
       +
           | Flex (direction, justify, align, wrap, gap) ->

     

       102
       102
       +
               let dir_classes = match direction with Some d -> [Tailwind.Flexbox.(to_class (direction d))] | None -> [] in

     

       103
       103
       +
               let justify_classes = match justify with Some j -> [Tailwind.Flexbox.(to_class (justify j))] | None -> [] in

     

       104
       104
       +
               let align_classes = match align with Some a -> [Tailwind.Flexbox.(to_class (align_items a))] | None -> [] in

     

       105
       105
       +
               let wrap_classes = match wrap with Some w -> [Tailwind.Flexbox.(to_class (wrap w))] | None -> [] in

     

       106
       106
       +
               let gap_classes = match gap with Some g -> [Tailwind.Spacing.(to_class (gap `All g))] | None -> [] in

     

       107
       107
       +
               Tailwind.tw ([Tailwind.Display.flex] @ dir_classes @ justify_classes @ align_classes @ wrap_classes @ gap_classes)

     

       108
       108
       +
           

     

       109
       109
       +
           | Grid (cols, rows, gap, gap_x, gap_y, _flow) ->

     

       110
       110
       +
               let col_classes = match cols with Some c -> [Tailwind.Grid.(to_class (template_cols c))] | None -> [] in

     

       111
       111
       +
               let row_classes = match rows with Some r -> [Tailwind.Grid.(to_class (template_rows r))] | None -> [] in

     

       112
       112
       +
               let gap_classes = match gap with Some g -> [Tailwind.Spacing.(to_class (gap `All g))] | None -> [] in

     

       113
       113
       +
               let gap_x_classes = match gap_x with Some g -> [Tailwind.Spacing.(to_class (gap `X g))] | None -> [] in

     

       114
       114
       +
               let gap_y_classes = match gap_y with Some g -> [Tailwind.Spacing.(to_class (gap `Y g))] | None -> [] in

     

       115
       115
       +
               let flow_classes = [] in

     

       116
       116
       +
               Tailwind.tw ([Tailwind.Display.grid] @ col_classes @ row_classes @ gap_classes @ gap_x_classes @ gap_y_classes @ flow_classes)

     

       117
       117
       +
           

     

       118
       118
       +
           | Stack (gap, align) ->

     

       119
       119
       +
               let gap_classes = match gap with Some g -> [Tailwind.Spacing.(to_class (gap `All g))] | None -> [] in

     

       120
       120
       +
               let align_classes = match align with Some a -> [Tailwind.Flexbox.(to_class (align_items a))] | None -> [] in

     

       121
       121
       +
               Tailwind.tw ([Tailwind.Display.flex; Tailwind.Flexbox.(to_class (direction `Col))] @ gap_classes @ align_classes)

     

       122
       122
       +
           

     

       123
       123
       +
           | Row (gap, justify, align, wrap) ->

     

       124
       124
       +
               let gap_classes = match gap with Some g -> [Tailwind.Spacing.(to_class (gap `All g))] | None -> [] in

     

       125
       125
       +
               let justify_classes = match justify with Some j -> [Tailwind.Flexbox.(to_class (justify j))] | None -> [] in

     

       126
       126
       +
               let align_classes = match align with Some a -> [Tailwind.Flexbox.(to_class (align_items a))] | None -> [] in

     

       127
       127
       +
               let wrap_classes = match wrap with Some true -> [Tailwind.Flexbox.(to_class (wrap `Wrap))] | Some false -> [Tailwind.Flexbox.(to_class (wrap `Nowrap))] | None -> [] in

     

       128
       128
       +
               Tailwind.tw ([Tailwind.Display.flex; Tailwind.Flexbox.(to_class (direction `Row))] @ gap_classes @ justify_classes @ align_classes @ wrap_classes)

     

       129
       129
       +
           

     

       130
       130
       +
           | Sidebar (_side, _width, _collapsible, _sidebar_content, _main_content) ->

     

       131
       131
       +
               Tailwind.tw [Tailwind.Display.flex]

     

       132
       132
       +
           

     

       133
       133
       +
           | Page (_header, _footer, _sidebar, _main) ->

     

       134
       134
       +
               Tailwind.tw [Tailwind.Display.flex; Tailwind.Flexbox.(to_class (direction `Col)); Tailwind.Layout.h_screen]

     

       135
       135
       +
         in

     

       136
       136
       +
         

     

       137
       137
       +
         let final_classes = Tailwind.tw [

     

       138
       138
       +
           base_classes;

     

       139
       139
       +
           (match layout.classes with Some c -> c | None -> Tailwind.Css.empty);

     

       140
       140
       +
         ] in

     

       141
       141
       +
         

     

       142
       142
       +
         let base_attrs = [classes_attr final_classes] in

     

       143
       143
       +
         let custom_attrs = List.map (fun (k, v) -> At.v k v) layout.attributes in

     

       144
       144
       +
         let all_attrs = base_attrs @ custom_attrs in

     

       145
       145
       +
         

     

       146
       146
       +
         match layout.layout_type with

     

       147
       147
       +
           | Sidebar (_side, width, _collapsible, sidebar_content, main_content) ->

     

       148
       148
       +
               let sidebar_width = match width with Some w -> w | None -> Tailwind.Size.rem 16.0 in

     

       149
       149
       +
               let sidebar_classes = Tailwind.tw [

     

       150
       150
       +
                 Tailwind.Layout.(to_class (width sidebar_width));

     

       151
       151
       +
                 Tailwind.Flexbox.(to_class (shrink (Some 0)));

     

       152
       152
       +
                 Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V50 ());

     

       153
       153
       +
               ] in

     

       154
       154
       +
               let main_classes = Tailwind.tw [

     

       155
       155
       +
                 Tailwind.Flexbox.(to_class (grow (Some 1)));

     

       156
       156
       +
                 Tailwind.Layout.(to_class (overflow `All `Auto));

     

       157
       157
       +
               ] in

     

       158
       158
       +
               El.div ~at:all_attrs [

     

       159
       159
       +
                 El.div ~at:[classes_attr sidebar_classes] [sidebar_content];

     

       160
       160
       +
                 El.div ~at:[classes_attr main_classes] [main_content];

     

       161
       161
       +
               ]

     

       162
       162
       +
           

     

       163
       163
       +
           | Page (header, footer, sidebar, main) ->

     

       164
       164
       +
               let content = List.filter_map (fun x -> x) [

     

       165
       165
       +
                 header;

     

       166
       166
       +
                 (match sidebar with

     

       167
       167
       +
                  | Some sb -> Some (El.div [sb; main])

     

       168
       168
       +
                  | None -> Some main);

     

       169
       169
       +
                 footer;

     

       170
       170
       +
               ] in

     

       171
       171
       +
               El.div ~at:all_attrs content

     

       172
       172
       +
           

     

       173
       173
       +
           | _ -> El.div ~at:all_attrs layout.children

     

       174
       174
       +
       

     

       175
       175
       +
       let spacer ?size () =

     

       176
       176
       +
         let size_class = match size with

     

       177
       177
       +
           | Some s -> Tailwind.Layout.(to_class (height s))

     

       178
       178
       +
           | None -> Tailwind.Layout.(to_class (height (Tailwind.Size.rem 1.0)))

     

       179
       179
       +
         in

     

       180
       180
       +
         El.div ~at:[classes_attr (Tailwind.tw [size_class])] []

     

       181
       181
       +
       

     

       182
       182
       +
       let divider ?orientation ?classes () =

     

       183
       183
       +
         let base_classes = match orientation with

     

       184
       184
       +
           | Some `Vertical -> [

     

       185
       185
       +
               Tailwind.Layout.(to_class (width `Px));

     

       186
       186
       +
               Tailwind.Layout.h_full;

     

       187
       187
       +
               Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V300 ());

     

       188
       188
       +
             ]

     

       189
       189
       +
           | Some `Horizontal | None -> [

     

       190
       190
       +
               Tailwind.Layout.w_full;

     

       191
       191
       +
               Tailwind.Layout.(to_class (height `Px));

     

       192
       192
       +
               Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V300 ());

     

       193
       193
       +
             ]

     

       194
       194
       +
         in

     

       195
       195
       +
         let divider_classes = Tailwind.tw (base_classes @ 

     

       196
       196
       +
           (match classes with Some c -> [c] | None -> [])) in

     

       197
       197
       +
         El.div ~at:[classes_attr divider_classes] []

+70

lib/tailwind-html/tailwind_html.ml

···

       1
       1
       +
       (* Main module for Tailwind HTML library *)

     

       2
       2
       +
       

     

       3
       3
       +
       (* Re-export all submodules *)

     

       4
       4
       +
       module Component = Component

     

       5
       5
       +
       module Button = Button

     

       6
       6
       +
       module Card = Card

     

       7
       7
       +
       module Form = Form

     

       8
       8
       +
       module Layout = Layout

     

       9
       9
       +
       module Cli = Cli

     

       10
       10
       +
       

     

       11
       11
       +
       (* Common utility for converting Tailwind classes to HTML class attribute *)

     

       12
       12
       +
       let classes_attr tailwind_classes = 

     

       13
       13
       +
         Htmlit.At.class' (Tailwind.to_string tailwind_classes)

     

       14
       14
       +
       

     

       15
       15
       +
       (* Apply Tailwind classes to an existing HTML element by wrapping it *)

     

       16
       16
       +
       let with_classes classes element =

     

       17
       17
       +
         let open Htmlit in

     

       18
       18
       +
         El.span ~at:[classes_attr classes] [element]

     

       19
       19
       +
       

     

       20
       20
       +
       (* Conditionally apply Tailwind classes *)

     

       21
       21
       +
       let with_classes_if condition classes element =

     

       22
       22
       +
         if condition then with_classes classes element else element

     

       23
       23
       +
       

     

       24
       24
       +
       (* Create an element with Tailwind classes and optional attributes *)

     

       25
       25
       +
       let el tag ?classes ?attributes children =

     

       26
       26
       +
         let open Htmlit in

     

       27
       27
       +
         let base_attrs = match classes with

     

       28
       28
       +
           | Some c -> [classes_attr c]

     

       29
       29
       +
           | None -> []

     

       30
       30
       +
         in

     

       31
       31
       +
         let custom_attrs = match attributes with

     

       32
       32
       +
           | Some attrs -> List.map (fun (k, v) -> At.v k v) attrs

     

       33
       33
       +
           | None -> []

     

       34
       34
       +
         in

     

       35
       35
       +
         let all_attrs = base_attrs @ custom_attrs in

     

       36
       36
       +
         El.v tag ~at:all_attrs children

     

       37
       37
       +
       

     

       38
       38
       +
       (* Common HTML elements with Tailwind class support *)

     

       39
       39
       +
       let div ?classes ?attributes children = el "div" ?classes ?attributes children

     

       40
       40
       +
       let span ?classes ?attributes children = el "span" ?classes ?attributes children  

     

       41
       41
       +
       let p ?classes ?attributes children = el "p" ?classes ?attributes children

     

       42
       42
       +
       let a ?classes ?attributes ~href children = 

     

       43
       43
       +
         let attrs = match attributes with Some a -> a | None -> [] in

     

       44
       44
       +
         el "a" ?classes ~attributes:(("href", href) :: attrs) children

     

       45
       45
       +
       let img ?classes ?attributes ~src ~alt () =

     

       46
       46
       +
         let attrs = match attributes with Some a -> a | None -> [] in

     

       47
       47
       +
         el "img" ?classes ~attributes:(("src", src) :: ("alt", alt) :: attrs) []

     

       48
       48
       +
       let h1 ?classes ?attributes children = el "h1" ?classes ?attributes children

     

       49
       49
       +
       let h2 ?classes ?attributes children = el "h2" ?classes ?attributes children

     

       50
       50
       +
       let h3 ?classes ?attributes children = el "h3" ?classes ?attributes children

     

       51
       51
       +
       let h4 ?classes ?attributes children = el "h4" ?classes ?attributes children

     

       52
       52
       +
       let h5 ?classes ?attributes children = el "h5" ?classes ?attributes children

     

       53
       53
       +
       let h6 ?classes ?attributes children = el "h6" ?classes ?attributes children

     

       54
       54
       +
       let ul ?classes ?attributes children = el "ul" ?classes ?attributes children

     

       55
       55
       +
       let ol ?classes ?attributes children = el "ol" ?classes ?attributes children

     

       56
       56
       +
       let li ?classes ?attributes children = el "li" ?classes ?attributes children

     

       57
       57
       +
       

     

       58
       58
       +
       (* Text element with built-in typography utilities *)

     

       59
       59
       +
       let text ?size ?weight ?color ?align ?classes text_content =

     

       60
       60
       +
         let base_styles = [] in

     

       61
       61
       +
         let size_styles = match size with Some s -> [Tailwind.Typography.(to_class (font_size s))] | None -> [] in

     

       62
       62
       +
         let weight_styles = match weight with Some w -> [Tailwind.Typography.(to_class (font_weight w))] | None -> [] in

     

       63
       63
       +
         let color_styles = match color with Some c -> [Tailwind.Color.text c] | None -> [] in

     

       64
       64
       +
         let align_styles = match align with Some a -> [Tailwind.Typography.(to_class (text_align a))] | None -> [] in

     

       65
       65
       +
         let text_classes = Tailwind.tw (base_styles @ size_styles @ weight_styles @ color_styles @ align_styles) in

     

       66
       66
       +
         let final_classes = match classes with

     

       67
       67
       +
           | Some c -> Tailwind.tw [text_classes; c] 

     

       68
       68
       +
           | None -> text_classes

     

       69
       69
       +
         in

     

       70
       70
       +
         span ~classes:final_classes [Htmlit.El.txt text_content]

+11

lib/tailwind-html/tailwind_html.mli

···

       1
       1
        
       (** Main Tailwind-HTML integration module *)

     

       2
       2
        
       

     

       3
       3
       +
       (** Re-exported submodules *)

     

       4
       4
       +
       module Button : module type of Button

     

       5
       5
       +
       module Card : module type of Card  

     

       6
       6
       +
       module Component : module type of Component

     

       7
       7
       +
       module Form : module type of Form

     

       8
       8
       +
       module Layout : module type of Layout

     

       9
       9
       +
       module Cli : module type of Cli

     

       10
       10
       +
       

     

       11
       11
       +
       (** Convert Tailwind classes to HTML class attribute *)

     

       12
       12
       +
       val classes_attr : Tailwind.t -> Htmlit.At.t

     

       13
       13
       +
       

     

       3
       14
        
       (** Apply Tailwind classes to an Htmlit element *)

     

       4
       15
        
       val with_classes : Tailwind.t -> Htmlit.El.html -> Htmlit.El.html

     

       5
       16

+52 -56

lib/tailwind/color.ml

···

       1
       1
       -
       type opacity =

     

       2
       2
       -
         | Alpha of int

     

       3
       3
       -
         | Fraction of int * int

     

       1
       1
       +
       type opacity = [ `Alpha of int | `Fraction of int * int ]

     

       4
       2
        
       

     

       5
       5
       -
       type variant =

     

       6
       6
       -
         | V50 | V100 | V200 | V300 | V400 | V500

     

       7
       7
       -
         | V600 | V700 | V800 | V900 | V950

     

       3
       3
       +
       type variant = [ `V50 | `V100 | `V200 | `V300 | `V400 | `V500

     

       4
       4
       +
                      | `V600 | `V700 | `V800 | `V900 | `V950 ]

     

       8
       5
        
       

     

       9
       9
       -
       type base =

     

       10
       10
       -
         | Slate | Gray | Zinc | Neutral | Stone

     

       11
       11
       -
         | Red | Orange | Amber | Yellow | Lime | Green

     

       12
       12
       -
         | Emerald | Teal | Cyan | Sky | Blue | Indigo

     

       13
       13
       -
         | Violet | Purple | Fuchsia | Pink | Rose

     

       14
       14
       -
         | Black | White | Transparent | Current | Inherit

     

       6
       6
       +
       type base = [ `Slate | `Gray | `Zinc | `Neutral | `Stone

     

       7
       7
       +
                   | `Red | `Orange | `Amber | `Yellow | `Lime | `Green

     

       8
       8
       +
                   | `Emerald | `Teal | `Cyan | `Sky | `Blue | `Indigo

     

       9
       9
       +
                   | `Violet | `Purple | `Fuchsia | `Pink | `Rose

     

       10
       10
       +
                   | `Black | `White | `Transparent | `Current | `Inherit ]

     

       15
       11
        
       

     

       16
       12
        
       type t = {

     

       17
       13
        
         base: base;

     
···

       22
       18
        
       let make base ?variant ?opacity () = { base; variant; opacity }

     

       23
       19
        
       

     

       24
       20
        
       let base_to_string = function

     

       25
       25
       -
         | Slate -> "slate"

     

       26
       26
       -
         | Gray -> "gray"

     

       27
       27
       -
         | Zinc -> "zinc"

     

       28
       28
       -
         | Neutral -> "neutral"

     

       29
       29
       -
         | Stone -> "stone"

     

       30
       30
       -
         | Red -> "red"

     

       31
       31
       -
         | Orange -> "orange"

     

       32
       32
       -
         | Amber -> "amber"

     

       33
       33
       -
         | Yellow -> "yellow"

     

       34
       34
       -
         | Lime -> "lime"

     

       35
       35
       -
         | Green -> "green"

     

       36
       36
       -
         | Emerald -> "emerald"

     

       37
       37
       -
         | Teal -> "teal"

     

       38
       38
       -
         | Cyan -> "cyan"

     

       39
       39
       -
         | Sky -> "sky"

     

       40
       40
       -
         | Blue -> "blue"

     

       41
       41
       -
         | Indigo -> "indigo"

     

       42
       42
       -
         | Violet -> "violet"

     

       43
       43
       -
         | Purple -> "purple"

     

       44
       44
       -
         | Fuchsia -> "fuchsia"

     

       45
       45
       -
         | Pink -> "pink"

     

       46
       46
       -
         | Rose -> "rose"

     

       47
       47
       -
         | Black -> "black"

     

       48
       48
       -
         | White -> "white"

     

       49
       49
       -
         | Transparent -> "transparent"

     

       50
       50
       -
         | Current -> "current"

     

       51
       51
       -
         | Inherit -> "inherit"

     

       21
       21
       +
         | `Slate -> "slate"

     

       22
       22
       +
         | `Gray -> "gray"

     

       23
       23
       +
         | `Zinc -> "zinc"

     

       24
       24
       +
         | `Neutral -> "neutral"

     

       25
       25
       +
         | `Stone -> "stone"

     

       26
       26
       +
         | `Red -> "red"

     

       27
       27
       +
         | `Orange -> "orange"

     

       28
       28
       +
         | `Amber -> "amber"

     

       29
       29
       +
         | `Yellow -> "yellow"

     

       30
       30
       +
         | `Lime -> "lime"

     

       31
       31
       +
         | `Green -> "green"

     

       32
       32
       +
         | `Emerald -> "emerald"

     

       33
       33
       +
         | `Teal -> "teal"

     

       34
       34
       +
         | `Cyan -> "cyan"

     

       35
       35
       +
         | `Sky -> "sky"

     

       36
       36
       +
         | `Blue -> "blue"

     

       37
       37
       +
         | `Indigo -> "indigo"

     

       38
       38
       +
         | `Violet -> "violet"

     

       39
       39
       +
         | `Purple -> "purple"

     

       40
       40
       +
         | `Fuchsia -> "fuchsia"

     

       41
       41
       +
         | `Pink -> "pink"

     

       42
       42
       +
         | `Rose -> "rose"

     

       43
       43
       +
         | `Black -> "black"

     

       44
       44
       +
         | `White -> "white"

     

       45
       45
       +
         | `Transparent -> "transparent"

     

       46
       46
       +
         | `Current -> "current"

     

       47
       47
       +
         | `Inherit -> "inherit"

     

       52
       48
        
       

     

       53
       49
        
       let variant_to_string = function

     

       54
       54
       -
         | V50 -> "50"

     

       55
       55
       -
         | V100 -> "100"

     

       56
       56
       -
         | V200 -> "200"

     

       57
       57
       -
         | V300 -> "300"

     

       58
       58
       -
         | V400 -> "400"

     

       59
       59
       -
         | V500 -> "500"

     

       60
       60
       -
         | V600 -> "600"

     

       61
       61
       -
         | V700 -> "700"

     

       62
       62
       -
         | V800 -> "800"

     

       63
       63
       -
         | V900 -> "900"

     

       64
       64
       -
         | V950 -> "950"

     

       50
       50
       +
         | `V50 -> "50"

     

       51
       51
       +
         | `V100 -> "100"

     

       52
       52
       +
         | `V200 -> "200"

     

       53
       53
       +
         | `V300 -> "300"

     

       54
       54
       +
         | `V400 -> "400"

     

       55
       55
       +
         | `V500 -> "500"

     

       56
       56
       +
         | `V600 -> "600"

     

       57
       57
       +
         | `V700 -> "700"

     

       58
       58
       +
         | `V800 -> "800"

     

       59
       59
       +
         | `V900 -> "900"

     

       60
       60
       +
         | `V950 -> "950"

     

       65
       61
        
       

     

       66
       62
        
       let opacity_to_string = function

     

       67
       67
       -
         | Alpha n -> string_of_int n

     

       68
       68
       -
         | Fraction (n, d) -> Printf.sprintf "%d/%d" n d

     

       63
       63
       +
         | `Alpha n -> string_of_int n

     

       64
       64
       +
         | `Fraction (n, d) -> Printf.sprintf "%d/%d" n d

     

       69
       65
        
       

     

       70
       66
        
       let color_to_string prefix color =

     

       71
       67
        
         let base_str = base_to_string color.base in

     
···

       87
       83
        
       let fill t = color_to_string "fill" t

     

       88
       84
        
       let stroke t = color_to_string "stroke" t

     

       89
       85
        
       

     

       90
       90
       -
       let black = make Black ()

     

       91
       91
       -
       let white = make White ()

     

       92
       92
       -
       let transparent = make Transparent ()

     

       93
       93
       -
       let current = make Current ()
     

       86
       86
       +
       let black = make `Black ()

     

       87
       87
       +
       let white = make `White ()

     

       88
       88
       +
       let transparent = make `Transparent ()

     

       89
       89
       +
       let current = make `Current ()

+9 -12

lib/tailwind/color.mli

···

       4
       4
        
       type t

     

       5
       5
        
       

     

       6
       6
        
       (** Opacity values *)

     

       7
       7
       -
       type opacity =

     

       8
       8
       -
         | Alpha of int (** Alpha value 0-100 *)

     

       9
       9
       -
         | Fraction of int * int (** Fractional opacity like 1/2 *)

     

       7
       7
       +
       type opacity = [ `Alpha of int (** Alpha value 0-100 *)

     

       8
       8
       +
                      | `Fraction of int * int (** Fractional opacity like 1/2 *) ]

     

       10
       9
        
       

     

       11
       10
        
       (** Color intensity variants *)

     

       12
       12
       -
       type variant =

     

       13
       13
       -
         | V50 | V100 | V200 | V300 | V400 | V500

     

       14
       14
       -
         | V600 | V700 | V800 | V900 | V950

     

       11
       11
       +
       type variant = [ `V50 | `V100 | `V200 | `V300 | `V400 | `V500

     

       12
       12
       +
                      | `V600 | `V700 | `V800 | `V900 | `V950 ]

     

       15
       13
        
       

     

       16
       14
        
       (** Base color names *)

     

       17
       17
       -
       type base =

     

       18
       18
       -
         | Slate | Gray | Zinc | Neutral | Stone

     

       19
       19
       -
         | Red | Orange | Amber | Yellow | Lime | Green

     

       20
       20
       -
         | Emerald | Teal | Cyan | Sky | Blue | Indigo

     

       21
       21
       -
         | Violet | Purple | Fuchsia | Pink | Rose

     

       22
       22
       -
         | Black | White | Transparent | Current | Inherit

     

       15
       15
       +
       type base = [ `Slate | `Gray | `Zinc | `Neutral | `Stone

     

       16
       16
       +
                   | `Red | `Orange | `Amber | `Yellow | `Lime | `Green

     

       17
       17
       +
                   | `Emerald | `Teal | `Cyan | `Sky | `Blue | `Indigo

     

       18
       18
       +
                   | `Violet | `Purple | `Fuchsia | `Pink | `Rose

     

       19
       19
       +
                   | `Black | `White | `Transparent | `Current | `Inherit ]

     

       23
       20
        
       

     

       24
       21
        
       (** Create a color *)

     

       25
       22
        
       val make : base -> ?variant:variant -> ?opacity:opacity -> unit -> t

+39 -40

lib/tailwind/display.ml

···

       1
       1
       -
       type t =

     

       2
       2
       -
         | Block

     

       3
       3
       -
         | Inline_block

     

       4
       4
       -
         | Inline

     

       5
       5
       -
         | Flex

     

       6
       6
       -
         | Inline_flex

     

       7
       7
       -
         | Grid

     

       8
       8
       -
         | Inline_grid

     

       9
       9
       -
         | Table

     

       10
       10
       -
         | Inline_table

     

       11
       11
       -
         | Table_cell

     

       12
       12
       -
         | Table_row

     

       13
       13
       -
         | Contents

     

       14
       14
       -
         | List_item

     

       15
       15
       -
         | Hidden

     

       16
       16
       -
         | None

     

       1
       1
       +
       type t = [ `Block

     

       2
       2
       +
                | `Inline_block

     

       3
       3
       +
                | `Inline

     

       4
       4
       +
                | `Flex

     

       5
       5
       +
                | `Inline_flex

     

       6
       6
       +
                | `Grid

     

       7
       7
       +
                | `Inline_grid

     

       8
       8
       +
                | `Table

     

       9
       9
       +
                | `Inline_table

     

       10
       10
       +
                | `Table_cell

     

       11
       11
       +
                | `Table_row

     

       12
       12
       +
                | `Contents

     

       13
       13
       +
                | `List_item

     

       14
       14
       +
                | `Hidden

     

       15
       15
       +
                | `None ]

     

       17
       16
        
       

     

       18
       17
        
       let display_to_string = function

     

       19
       19
       -
         | Block -> "block"

     

       20
       20
       -
         | Inline_block -> "inline-block"

     

       21
       21
       -
         | Inline -> "inline"

     

       22
       22
       -
         | Flex -> "flex"

     

       23
       23
       -
         | Inline_flex -> "inline-flex"

     

       24
       24
       -
         | Grid -> "grid"

     

       25
       25
       -
         | Inline_grid -> "inline-grid"

     

       26
       26
       -
         | Table -> "table"

     

       27
       27
       -
         | Inline_table -> "inline-table"

     

       28
       28
       -
         | Table_cell -> "table-cell"

     

       29
       29
       -
         | Table_row -> "table-row"

     

       30
       30
       -
         | Contents -> "contents"

     

       31
       31
       -
         | List_item -> "list-item"

     

       32
       32
       -
         | Hidden -> "hidden"

     

       33
       33
       -
         | None -> "none"

     

       18
       18
       +
         | `Block -> "block"

     

       19
       19
       +
         | `Inline_block -> "inline-block"

     

       20
       20
       +
         | `Inline -> "inline"

     

       21
       21
       +
         | `Flex -> "flex"

     

       22
       22
       +
         | `Inline_flex -> "inline-flex"

     

       23
       23
       +
         | `Grid -> "grid"

     

       24
       24
       +
         | `Inline_grid -> "inline-grid"

     

       25
       25
       +
         | `Table -> "table"

     

       26
       26
       +
         | `Inline_table -> "inline-table"

     

       27
       27
       +
         | `Table_cell -> "table-cell"

     

       28
       28
       +
         | `Table_row -> "table-row"

     

       29
       29
       +
         | `Contents -> "contents"

     

       30
       30
       +
         | `List_item -> "list-item"

     

       31
       31
       +
         | `Hidden -> "hidden"

     

       32
       32
       +
         | `None -> "none"

     

       34
       33
        
       

     

       35
       34
        
       let to_class t = Css.make (display_to_string t)

     

       36
       35
        
       

     

       37
       37
       -
       let block = to_class Block

     

       38
       38
       -
       let inline_block = to_class Inline_block

     

       39
       39
       -
       let inline = to_class Inline

     

       40
       40
       -
       let flex = to_class Flex

     

       41
       41
       -
       let inline_flex = to_class Inline_flex

     

       42
       42
       -
       let grid = to_class Grid

     

       43
       43
       -
       let inline_grid = to_class Inline_grid

     

       44
       44
       -
       let hidden = to_class Hidden

     

       45
       45
       -
       let none = to_class None
     

       36
       36
       +
       let block = to_class `Block

     

       37
       37
       +
       let inline_block = to_class `Inline_block

     

       38
       38
       +
       let inline = to_class `Inline

     

       39
       39
       +
       let flex = to_class `Flex

     

       40
       40
       +
       let inline_flex = to_class `Inline_flex

     

       41
       41
       +
       let grid = to_class `Grid

     

       42
       42
       +
       let inline_grid = to_class `Inline_grid

     

       43
       43
       +
       let hidden = to_class `Hidden

     

       44
       44
       +
       let none = to_class `None

+15 -16

lib/tailwind/display.mli

···

       1
       1
        
       (** Display utilities *)

     

       2
       2
        
       

     

       3
       3
        
       (** Display property values *)

     

       4
       4
       -
       type t =

     

       5
       5
       -
         | Block

     

       6
       6
       -
         | Inline_block

     

       7
       7
       -
         | Inline

     

       8
       8
       -
         | Flex

     

       9
       9
       -
         | Inline_flex

     

       10
       10
       -
         | Grid

     

       11
       11
       -
         | Inline_grid

     

       12
       12
       -
         | Table

     

       13
       13
       -
         | Inline_table

     

       14
       14
       -
         | Table_cell

     

       15
       15
       -
         | Table_row

     

       16
       16
       -
         | Contents

     

       17
       17
       -
         | List_item

     

       18
       18
       -
         | Hidden

     

       19
       19
       -
         | None

     

       4
       4
       +
       type t = [ `Block

     

       5
       5
       +
                | `Inline_block

     

       6
       6
       +
                | `Inline

     

       7
       7
       +
                | `Flex

     

       8
       8
       +
                | `Inline_flex

     

       9
       9
       +
                | `Grid

     

       10
       10
       +
                | `Inline_grid

     

       11
       11
       +
                | `Table

     

       12
       12
       +
                | `Inline_table

     

       13
       13
       +
                | `Table_cell

     

       14
       14
       +
                | `Table_row

     

       15
       15
       +
                | `Contents

     

       16
       16
       +
                | `List_item

     

       17
       17
       +
                | `Hidden

     

       18
       18
       +
                | `None ]

     

       20
       19
        
       

     

       21
       20
        
       (** Convert display value to CSS class *)

     

       22
       21
        
       val to_class : t -> Css.t

+1 -1

lib/tailwind/dune

···

       1
       1
        
       (library

     

       2
       2
        
        (public_name tailwind)

     

       3
       3
        
        (name tailwind)

     

       4
       4
       -
        (modules css color spacing size layout display flexbox grid position typography effects responsive variants tailwind))
     

       4
       4
       +
        (modules css color spacing size layout display flexbox grid position typography effects responsive variants reset patterns tailwind))

+112 -85

lib/tailwind/effects.ml

···

       1
       1
       -
       type border_width = None | Px | Px2 | Px4 | Px8

     

       2
       2
       -
       type border_style = Solid | Dashed | Dotted | Double | Hidden | None

     

       3
       3
       -
       type border_radius = None | Sm | Base | Md | Lg | Xl | Xl2 | Xl3 | Full

     

       4
       4
       -
       type shadow = None | Sm | Base | Md | Lg | Xl | Xl2 | Inner

     

       1
       1
       +
       type border_width = [ `None | `Px | `Px2 | `Px4 | `Px8 ]

     

       2
       2
       +
       type border_style = [ `Solid | `Dashed | `Dotted | `Double | `Hidden | `None ]

     

       3
       3
       +
       type border_radius = [ `None | `Sm | `Base | `Md | `Lg | `Xl | `Xl2 | `Xl3 | `Full ]

     

       4
       4
       +
       type shadow = [ `None | `Sm | `Base | `Md | `Lg | `Xl | `Xl2 | `Inner ]

     

       5
       5
        
       type opacity = int

     

       6
       6
       -
       type transform_origin = Center | Top | Top_right | Right | Bottom_right | Bottom | Bottom_left | Left | Top_left

     

       6
       6
       +
       type transform_origin = [ `Center | `Top | `Top_right | `Right | `Bottom_right | `Bottom | `Bottom_left | `Left | `Top_left ]

     

       7
       7
        
       

     

       8
       8
       -
       type t =

     

       9
       9
       -
         | Border_width of [`All | `X | `Y | `Top | `Right | `Bottom | `Left] * border_width

     

       10
       10
       -
         | Border_style of border_style

     

       11
       11
       -
         | Border_color of Color.t

     

       12
       12
       -
         | Rounded of [`All | `Top | `Right | `Bottom | `Left | `Tl | `Tr | `Br | `Bl] * border_radius

     

       13
       13
       -
         | Shadow of shadow

     

       14
       14
       -
         | Opacity of opacity

     

       15
       15
       -
         | Backdrop_blur of [`None | `Sm | `Base | `Md | `Lg | `Xl | `Xl2 | `Xl3]

     

       16
       16
       -
         | Transform of [`None | `Gpu]

     

       17
       17
       -
         | Transform_origin of transform_origin

     

       18
       18
       -
         | Scale of [`All | `X | `Y] * int

     

       19
       19
       -
         | Rotate of int

     

       20
       20
       -
         | Translate of [`X | `Y] * Size.t

     

       8
       8
       +
       type t = [

     

       9
       9
       +
         | `Border_width of [`All | `X | `Y | `Top | `Right | `Bottom | `Left] * border_width

     

       10
       10
       +
         | `Border_style of border_style

     

       11
       11
       +
         | `Border_color of Color.t

     

       12
       12
       +
         | `Rounded of [`All | `Top | `Right | `Bottom | `Left | `Tl | `Tr | `Br | `Bl] * border_radius

     

       13
       13
       +
         | `Shadow of shadow

     

       14
       14
       +
         | `Opacity of opacity

     

       15
       15
       +
         | `Backdrop_blur of [`None | `Sm | `Base | `Md | `Lg | `Xl | `Xl2 | `Xl3]

     

       16
       16
       +
         | `Transform of [`None | `Gpu]

     

       17
       17
       +
         | `Transform_origin of transform_origin

     

       18
       18
       +
         | `Scale of [`All | `X | `Y] * int

     

       19
       19
       +
         | `Rotate of int

     

       20
       20
       +
         | `Translate of [`X | `Y] * Size.t

     

       21
       21
       +
       ]

     

       21
       22
        
       

     

       22
       23
        
       let to_class = function

     

       23
       23
       -
         | Border_width (`All, None) -> Css.make "border-0"

     

       24
       24
       -
         | Border_width (`All, Px) -> Css.make "border"

     

       25
       25
       -
         | Border_width (`All, Px2) -> Css.make "border-2"

     

       26
       26
       -
         | Border_width (`All, Px4) -> Css.make "border-4"

     

       27
       27
       -
         | Border_width (`All, Px8) -> Css.make "border-8"

     

       28
       28
       -
         | Border_style Solid -> Css.make "border-solid"

     

       29
       29
       -
         | Border_style Dashed -> Css.make "border-dashed"

     

       30
       30
       -
         | Border_style Dotted -> Css.make "border-dotted"

     

       31
       31
       -
         | Border_style Double -> Css.make "border-double"

     

       32
       32
       -
         | Border_style Hidden -> Css.make "border-hidden"

     

       33
       33
       -
         | Border_style None -> Css.make "border-none"

     

       34
       34
       -
         | Border_color color -> Color.border color

     

       35
       35
       -
         | Rounded (`All, None) -> Css.make "rounded-none"

     

       36
       36
       -
         | Rounded (`All, Sm) -> Css.make "rounded-sm"

     

       37
       37
       -
         | Rounded (`All, Base) -> Css.make "rounded"

     

       38
       38
       -
         | Rounded (`All, Md) -> Css.make "rounded-md"

     

       39
       39
       -
         | Rounded (`All, Lg) -> Css.make "rounded-lg"

     

       40
       40
       -
         | Rounded (`All, Xl) -> Css.make "rounded-xl"

     

       41
       41
       -
         | Rounded (`All, Xl2) -> Css.make "rounded-2xl"

     

       42
       42
       -
         | Rounded (`All, Xl3) -> Css.make "rounded-3xl"

     

       43
       43
       -
         | Rounded (`All, Full) -> Css.make "rounded-full"

     

       44
       44
       -
         | Shadow None -> Css.make "shadow-none"

     

       45
       45
       -
         | Shadow Sm -> Css.make "shadow-sm"

     

       46
       46
       -
         | Shadow Base -> Css.make "shadow"

     

       47
       47
       -
         | Shadow Md -> Css.make "shadow-md"

     

       48
       48
       -
         | Shadow Lg -> Css.make "shadow-lg"

     

       49
       49
       -
         | Shadow Xl -> Css.make "shadow-xl"

     

       50
       50
       -
         | Shadow Xl2 -> Css.make "shadow-2xl"

     

       51
       51
       -
         | Shadow Inner -> Css.make "shadow-inner"

     

       52
       52
       -
         | Opacity n -> Css.make (Printf.sprintf "opacity-%d" n)

     

       53
       53
       -
         | Transform `None -> Css.make "transform-none"

     

       54
       54
       -
         | Transform `Gpu -> Css.make "transform-gpu"

     

       55
       55
       -
         | Backdrop_blur `None -> Css.make "backdrop-blur-none"

     

       56
       56
       -
         | Backdrop_blur `Sm -> Css.make "backdrop-blur-sm"

     

       57
       57
       -
         | Backdrop_blur `Base -> Css.make "backdrop-blur"

     

       58
       58
       -
         | Backdrop_blur `Md -> Css.make "backdrop-blur-md"

     

       59
       59
       -
         | Backdrop_blur `Lg -> Css.make "backdrop-blur-lg"

     

       60
       60
       -
         | Backdrop_blur `Xl -> Css.make "backdrop-blur-xl"

     

       61
       61
       -
         | Backdrop_blur `Xl2 -> Css.make "backdrop-blur-2xl"

     

       62
       62
       -
         | Backdrop_blur `Xl3 -> Css.make "backdrop-blur-3xl"

     

       63
       63
       -
         | Transform_origin Center -> Css.make "origin-center"

     

       64
       64
       -
         | Transform_origin Top -> Css.make "origin-top"

     

       65
       65
       -
         | Transform_origin Top_right -> Css.make "origin-top-right"

     

       66
       66
       -
         | Transform_origin Right -> Css.make "origin-right"

     

       67
       67
       -
         | Transform_origin Bottom_right -> Css.make "origin-bottom-right"

     

       68
       68
       -
         | Transform_origin Bottom -> Css.make "origin-bottom"

     

       69
       69
       -
         | Transform_origin Bottom_left -> Css.make "origin-bottom-left"

     

       70
       70
       -
         | Transform_origin Left -> Css.make "origin-left"

     

       71
       71
       -
         | Transform_origin Top_left -> Css.make "origin-top-left"

     

       72
       72
       -
         | Scale (dir, percent) ->

     

       24
       24
       +
         | `Border_width (`All, `None) -> Css.make "border-0"

     

       25
       25
       +
         | `Border_width (`All, `Px) -> Css.make "border"

     

       26
       26
       +
         | `Border_width (`All, `Px2) -> Css.make "border-2"

     

       27
       27
       +
         | `Border_width (`All, `Px4) -> Css.make "border-4"

     

       28
       28
       +
         | `Border_width (`All, `Px8) -> Css.make "border-8"

     

       29
       29
       +
         | `Border_style `Solid -> Css.make "border-solid"

     

       30
       30
       +
         | `Border_style `Dashed -> Css.make "border-dashed"

     

       31
       31
       +
         | `Border_style `Dotted -> Css.make "border-dotted"

     

       32
       32
       +
         | `Border_style `Double -> Css.make "border-double"

     

       33
       33
       +
         | `Border_style `Hidden -> Css.make "border-hidden"

     

       34
       34
       +
         | `Border_style `None -> Css.make "border-none"

     

       35
       35
       +
         | `Border_color color -> Color.border color

     

       36
       36
       +
         | `Rounded (`All, `None) -> Css.make "rounded-none"

     

       37
       37
       +
         | `Rounded (`All, `Sm) -> Css.make "rounded-sm"

     

       38
       38
       +
         | `Rounded (`All, `Base) -> Css.make "rounded"

     

       39
       39
       +
         | `Rounded (`All, `Md) -> Css.make "rounded-md"

     

       40
       40
       +
         | `Rounded (`All, `Lg) -> Css.make "rounded-lg"

     

       41
       41
       +
         | `Rounded (`All, `Xl) -> Css.make "rounded-xl"

     

       42
       42
       +
         | `Rounded (`All, `Xl2) -> Css.make "rounded-2xl"

     

       43
       43
       +
         | `Rounded (`All, `Xl3) -> Css.make "rounded-3xl"

     

       44
       44
       +
         | `Rounded (`All, `Full) -> Css.make "rounded-full"

     

       45
       45
       +
         | `Shadow `None -> Css.make "shadow-none"

     

       46
       46
       +
         | `Shadow `Sm -> Css.make "shadow-sm"

     

       47
       47
       +
         | `Shadow `Base -> Css.make "shadow"

     

       48
       48
       +
         | `Shadow `Md -> Css.make "shadow-md"

     

       49
       49
       +
         | `Shadow `Lg -> Css.make "shadow-lg"

     

       50
       50
       +
         | `Shadow `Xl -> Css.make "shadow-xl"

     

       51
       51
       +
         | `Shadow `Xl2 -> Css.make "shadow-2xl"

     

       52
       52
       +
         | `Shadow `Inner -> Css.make "shadow-inner"

     

       53
       53
       +
         | `Opacity n -> Css.make (Printf.sprintf "opacity-%d" n)

     

       54
       54
       +
         | `Transform `None -> Css.make "transform-none"

     

       55
       55
       +
         | `Transform `Gpu -> Css.make "transform-gpu"

     

       56
       56
       +
         | `Backdrop_blur `None -> Css.make "backdrop-blur-none"

     

       57
       57
       +
         | `Backdrop_blur `Sm -> Css.make "backdrop-blur-sm"

     

       58
       58
       +
         | `Backdrop_blur `Base -> Css.make "backdrop-blur"

     

       59
       59
       +
         | `Backdrop_blur `Md -> Css.make "backdrop-blur-md"

     

       60
       60
       +
         | `Backdrop_blur `Lg -> Css.make "backdrop-blur-lg"

     

       61
       61
       +
         | `Backdrop_blur `Xl -> Css.make "backdrop-blur-xl"

     

       62
       62
       +
         | `Backdrop_blur `Xl2 -> Css.make "backdrop-blur-2xl"

     

       63
       63
       +
         | `Backdrop_blur `Xl3 -> Css.make "backdrop-blur-3xl"

     

       64
       64
       +
         | `Transform_origin `Center -> Css.make "origin-center"

     

       65
       65
       +
         | `Transform_origin `Top -> Css.make "origin-top"

     

       66
       66
       +
         | `Transform_origin `Top_right -> Css.make "origin-top-right"

     

       67
       67
       +
         | `Transform_origin `Right -> Css.make "origin-right"

     

       68
       68
       +
         | `Transform_origin `Bottom_right -> Css.make "origin-bottom-right"

     

       69
       69
       +
         | `Transform_origin `Bottom -> Css.make "origin-bottom"

     

       70
       70
       +
         | `Transform_origin `Bottom_left -> Css.make "origin-bottom-left"

     

       71
       71
       +
         | `Transform_origin `Left -> Css.make "origin-left"

     

       72
       72
       +
         | `Transform_origin `Top_left -> Css.make "origin-top-left"

     

       73
       73
       +
         | `Scale (dir, percent) ->

     

       73
       74
        
             let dir_str = match dir with `All -> "" | `X -> "-x" | `Y -> "-y" in

     

       74
       75
        
             Css.make (Printf.sprintf "scale%s-%d" dir_str percent)

     

       75
       75
       -
         | Rotate degrees -> Css.make (Printf.sprintf "rotate-%d" degrees)

     

       76
       76
       -
         | Translate (dir, size) ->

     

       76
       76
       +
         | `Rotate degrees -> Css.make (Printf.sprintf "rotate-%d" degrees)

     

       77
       77
       +
         | `Translate (dir, size) ->

     

       77
       78
        
             let dir_str = match dir with `X -> "x" | `Y -> "y" in

     

       78
       79
        
             Css.make (Printf.sprintf "translate-%s-%s" dir_str (Size.to_string size))

     

       79
       79
       -
         | Rounded (_, _) -> Css.empty (* This should be handled by the specific rounded patterns above *)

     

       80
       80
       -
         | Border_width (_, _) -> Css.empty (* This should be handled by the specific border patterns above *)

     

       80
       80
       +
         | `Rounded (_, _) -> Css.empty (* This should be handled by the specific rounded patterns above *)

     

       81
       81
       +
         | `Border_width (_, _) -> Css.empty (* This should be handled by the specific border patterns above *)

     

       81
       82
        
       

     

       82
       82
       -
       let border_width dir width = Border_width (dir, width)

     

       83
       83
       -
       let border_style style = Border_style style

     

       84
       84
       -
       let border_color color = Border_color color

     

       85
       85
       -
       let rounded dir radius = Rounded (dir, radius)

     

       86
       86
       -
       let shadow s = Shadow s

     

       87
       87
       -
       let opacity o = Opacity o

     

       88
       88
       -
       let backdrop_blur blur = Backdrop_blur blur

     

       89
       89
       -
       let transform t = Transform t

     

       90
       90
       -
       let transform_origin origin = Transform_origin origin

     

       91
       91
       -
       let scale dir percent = Scale (dir, percent)

     

       92
       92
       -
       let rotate degrees = Rotate degrees

     

       93
       93
       -
       let translate dir size = Translate (dir, size)

     

       83
       83
       +
       let border_width dir width = `Border_width (dir, width)

     

       84
       84
       +
       let border_style style = `Border_style style

     

       85
       85
       +
       let border_color color = `Border_color color

     

       86
       86
       +
       let rounded dir radius = `Rounded (dir, radius)

     

       87
       87
       +
       let shadow s = `Shadow s

     

       88
       88
       +
       let opacity o = `Opacity o

     

       89
       89
       +
       let backdrop_blur blur = `Backdrop_blur blur

     

       90
       90
       +
       let transform t = `Transform t

     

       91
       91
       +
       let transform_origin origin = `Transform_origin origin

     

       92
       92
       +
       let scale dir percent = `Scale (dir, percent)

     

       93
       93
       +
       let rotate degrees = `Rotate degrees

     

       94
       94
       +
       let translate dir size = `Translate (dir, size)

     

       94
       95
        
       

     

       95
       96
        
       let border = Css.make "border"

     

       96
       97
        
       let border_2 = Css.make "border-2"

     
···

       101
       102
        
       let rounded_full = Css.make "rounded-full"

     

       102
       103
        
       let shadow_sm = Css.make "shadow-sm"

     

       103
       104
        
       let shadow_md = Css.make "shadow-md"

     

       104
       104
       -
       let shadow_lg = Css.make "shadow-lg"
     

       105
       105
       +
       let shadow_lg = Css.make "shadow-lg"

     

       106
       106
       +
       

     

       107
       107
       +
       (* Animation and transition utilities *)

     

       108
       108
       +
       type transition_property = [ `None | `All | `Colors | `Opacity | `Shadow | `Transform ]

     

       109
       109
       +
       type timing_function = [ `Linear | `In | `Out | `In_out ]

     

       110
       110
       +
       

     

       111
       111
       +
       let transition transition_type =

     

       112
       112
       +
         let class_name = match transition_type with

     

       113
       113
       +
           | `None -> "transition-none"

     

       114
       114
       +
           | `All -> "transition-all"

     

       115
       115
       +
           | `Colors -> "transition-colors"

     

       116
       116
       +
           | `Opacity -> "transition-opacity"

     

       117
       117
       +
           | `Shadow -> "transition-shadow"

     

       118
       118
       +
           | `Transform -> "transition-transform"

     

       119
       119
       +
         in

     

       120
       120
       +
         Css.make class_name

     

       121
       121
       +
       

     

       122
       122
       +
       let duration ms = Css.make (Printf.sprintf "duration-%d" ms)

     

       123
       123
       +
       

     

       124
       124
       +
       let ease timing =

     

       125
       125
       +
         let class_name = match timing with

     

       126
       126
       +
           | `Linear -> "ease-linear"

     

       127
       127
       +
           | `In -> "ease-in"

     

       128
       128
       +
           | `Out -> "ease-out"

     

       129
       129
       +
           | `In_out -> "ease-in-out"

     

       130
       130
       +
         in

     

       131
       131
       +
         Css.make class_name

+38 -12

lib/tailwind/effects.mli

···

       4
       4
        
       type t

     

       5
       5
        
       

     

       6
       6
        
       (** Border width *)

     

       7
       7
       -
       type border_width =

     

       8
       8
       -
         | None | Px | Px2 | Px4 | Px8

     

       7
       7
       +
       type border_width = [

     

       8
       8
       +
         | `None | `Px | `Px2 | `Px4 | `Px8

     

       9
       9
       +
       ]

     

       9
       10
        
       

     

       10
       11
        
       (** Border style *)

     

       11
       11
       -
       type border_style =

     

       12
       12
       -
         | Solid | Dashed | Dotted | Double | Hidden | None

     

       12
       12
       +
       type border_style = [

     

       13
       13
       +
         | `Solid | `Dashed | `Dotted | `Double | `Hidden | `None

     

       14
       14
       +
       ]

     

       13
       15
        
       

     

       14
       16
        
       (** Border radius *)

     

       15
       15
       -
       type border_radius =

     

       16
       16
       -
         | None | Sm | Base | Md | Lg | Xl | Xl2 | Xl3 | Full

     

       17
       17
       +
       type border_radius = [

     

       18
       18
       +
         | `None | `Sm | `Base | `Md | `Lg | `Xl | `Xl2 | `Xl3 | `Full

     

       19
       19
       +
       ]

     

       17
       20
        
       

     

       18
       21
        
       (** Shadow size *)

     

       19
       19
       -
       type shadow =

     

       20
       20
       -
         | None | Sm | Base | Md | Lg | Xl | Xl2 | Inner

     

       22
       22
       +
       type shadow = [

     

       23
       23
       +
         | `None | `Sm | `Base | `Md | `Lg | `Xl | `Xl2 | `Inner

     

       24
       24
       +
       ]

     

       21
       25
        
       

     

       22
       26
        
       (** Opacity level *)

     

       23
       27
        
       type opacity = int (** 0-100 *)

     

       24
       28
        
       

     

       25
       29
        
       (** Transform origin *)

     

       26
       26
       -
       type transform_origin =

     

       27
       27
       -
         | Center | Top | Top_right | Right | Bottom_right

     

       28
       28
       -
         | Bottom | Bottom_left | Left | Top_left

     

       30
       30
       +
       type transform_origin = [

     

       31
       31
       +
         | `Center | `Top | `Top_right | `Right | `Bottom_right

     

       32
       32
       +
         | `Bottom | `Bottom_left | `Left | `Top_left

     

       33
       33
       +
       ]

     

       29
       34
        
       

     

       30
       35
        
       (** Set border width *)

     

       31
       36
        
       val border_width : [`All | `X | `Y | `Top | `Right | `Bottom | `Left] -> border_width -> t

     
···

       76
       81
        
       val rounded_full : Css.t

     

       77
       82
        
       val shadow_sm : Css.t

     

       78
       83
        
       val shadow_md : Css.t

     

       79
       79
       -
       val shadow_lg : Css.t
     

       84
       84
       +
       val shadow_lg : Css.t

     

       85
       85
       +
       

     

       86
       86
       +
       (** Animation and transition utilities *)

     

       87
       87
       +
       

     

       88
       88
       +
       (** Transition properties *)

     

       89
       89
       +
       type transition_property = [

     

       90
       90
       +
         | `None | `All | `Colors | `Opacity | `Shadow | `Transform

     

       91
       91
       +
       ]

     

       92
       92
       +
       

     

       93
       93
       +
       (** Timing functions *)

     

       94
       94
       +
       type timing_function = [

     

       95
       95
       +
         | `Linear | `In | `Out | `In_out

     

       96
       96
       +
       ]

     

       97
       97
       +
       

     

       98
       98
       +
       (** Transition utilities *)

     

       99
       99
       +
       val transition : transition_property -> Css.t

     

       100
       100
       +
       

     

       101
       101
       +
       (** Duration utilities (in ms) *)

     

       102
       102
       +
       val duration : int -> Css.t

     

       103
       103
       +
       

     

       104
       104
       +
       (** Ease timing functions *)

     

       105
       105
       +
       val ease : timing_function -> Css.t

+115 -108

lib/tailwind/flexbox.ml

···

       1
       1
       -
       type direction =

     

       2
       2
       -
         | Row

     

       3
       3
       -
         | Row_reverse  

     

       4
       4
       -
         | Col

     

       5
       5
       -
         | Col_reverse

     

       1
       1
       +
       type direction = [

     

       2
       2
       +
         | `Row

     

       3
       3
       +
         | `Row_reverse  

     

       4
       4
       +
         | `Col

     

       5
       5
       +
         | `Col_reverse

     

       6
       6
       +
       ]

     

       6
       7
        
       

     

       7
       7
       -
       type wrap =

     

       8
       8
       -
         | Wrap

     

       9
       9
       -
         | Wrap_reverse

     

       10
       10
       -
         | Nowrap

     

       8
       8
       +
       type wrap = [

     

       9
       9
       +
         | `Wrap

     

       10
       10
       +
         | `Wrap_reverse

     

       11
       11
       +
         | `Nowrap

     

       12
       12
       +
       ]

     

       11
       13
        
       

     

       12
       12
       -
       type justify =

     

       13
       13
       -
         | Normal

     

       14
       14
       -
         | Start

     

       15
       15
       -
         | End

     

       16
       16
       -
         | Center

     

       17
       17
       -
         | Between

     

       18
       18
       -
         | Around

     

       19
       19
       -
         | Evenly

     

       20
       20
       -
         | Stretch

     

       14
       14
       +
       type justify = [

     

       15
       15
       +
         | `Normal

     

       16
       16
       +
         | `Start

     

       17
       17
       +
         | `End

     

       18
       18
       +
         | `Center

     

       19
       19
       +
         | `Between

     

       20
       20
       +
         | `Around

     

       21
       21
       +
         | `Evenly

     

       22
       22
       +
         | `Stretch

     

       23
       23
       +
       ]

     

       21
       24
        
       

     

       22
       22
       -
       type align_items =

     

       23
       23
       -
         | Start

     

       24
       24
       -
         | End

     

       25
       25
       -
         | Center

     

       26
       26
       -
         | Baseline

     

       27
       27
       -
         | Stretch

     

       25
       25
       +
       type align_items = [

     

       26
       26
       +
         | `Start

     

       27
       27
       +
         | `End

     

       28
       28
       +
         | `Center

     

       29
       29
       +
         | `Baseline

     

       30
       30
       +
         | `Stretch

     

       31
       31
       +
       ]

     

       28
       32
        
       

     

       29
       29
       -
       type align_content =

     

       30
       30
       -
         | Normal

     

       31
       31
       -
         | Start

     

       32
       32
       -
         | End

     

       33
       33
       -
         | Center

     

       34
       34
       -
         | Between

     

       35
       35
       -
         | Around

     

       36
       36
       -
         | Evenly

     

       37
       37
       -
         | Stretch

     

       38
       38
       -
         | Baseline

     

       33
       33
       +
       type align_content = [

     

       34
       34
       +
         | `Normal

     

       35
       35
       +
         | `Start

     

       36
       36
       +
         | `End

     

       37
       37
       +
         | `Center

     

       38
       38
       +
         | `Between

     

       39
       39
       +
         | `Around

     

       40
       40
       +
         | `Evenly

     

       41
       41
       +
         | `Stretch

     

       42
       42
       +
         | `Baseline

     

       43
       43
       +
       ]

     

       39
       44
        
       

     

       40
       40
       -
       type align_self =

     

       41
       41
       -
         | Auto

     

       42
       42
       -
         | Start

     

       43
       43
       -
         | End  

     

       44
       44
       -
         | Center

     

       45
       45
       -
         | Stretch

     

       46
       46
       -
         | Baseline

     

       45
       45
       +
       type align_self = [

     

       46
       46
       +
         | `Auto

     

       47
       47
       +
         | `Start

     

       48
       48
       +
         | `End  

     

       49
       49
       +
         | `Center

     

       50
       50
       +
         | `Stretch

     

       51
       51
       +
         | `Baseline

     

       52
       52
       +
       ]

     

       47
       53
        
       

     

       48
       48
       -
       type t = 

     

       49
       49
       -
         | Direction of direction

     

       50
       50
       -
         | Wrap_setting of wrap

     

       51
       51
       -
         | Justify of justify

     

       52
       52
       -
         | Align_items of align_items

     

       53
       53
       -
         | Align_content of align_content

     

       54
       54
       -
         | Align_self of align_self

     

       55
       55
       -
         | Grow of int option

     

       56
       56
       -
         | Shrink of int option

     

       57
       57
       -
         | Basis of Size.t

     

       58
       58
       -
         | Flex of [`Initial | `One | `Auto | `None]

     

       54
       54
       +
       type t = [

     

       55
       55
       +
         | `Direction of direction

     

       56
       56
       +
         | `Wrap_setting of wrap

     

       57
       57
       +
         | `Justify of justify

     

       58
       58
       +
         | `Align_items of align_items

     

       59
       59
       +
         | `Align_content of align_content

     

       60
       60
       +
         | `Align_self of align_self

     

       61
       61
       +
         | `Grow of int option

     

       62
       62
       +
         | `Shrink of int option

     

       63
       63
       +
         | `Basis of Size.t

     

       64
       64
       +
         | `Flex of [`Initial | `One | `Auto | `None]

     

       65
       65
       +
       ]

     

       59
       66
        
       

     

       60
       67
        
       let to_class = function

     

       61
       61
       -
         | Direction Row -> Css.make "flex-row"

     

       62
       62
       -
         | Direction Row_reverse -> Css.make "flex-row-reverse"

     

       63
       63
       -
         | Direction Col -> Css.make "flex-col"  

     

       64
       64
       -
         | Direction Col_reverse -> Css.make "flex-col-reverse"

     

       65
       65
       -
         | Wrap_setting Wrap -> Css.make "flex-wrap"

     

       66
       66
       -
         | Wrap_setting Wrap_reverse -> Css.make "flex-wrap-reverse"

     

       67
       67
       -
         | Wrap_setting Nowrap -> Css.make "flex-nowrap"

     

       68
       68
       -
         | Justify Normal -> Css.make "justify-normal"

     

       69
       69
       -
         | Justify Start -> Css.make "justify-start"

     

       70
       70
       -
         | Justify End -> Css.make "justify-end"

     

       71
       71
       -
         | Justify Center -> Css.make "justify-center"

     

       72
       72
       -
         | Justify Between -> Css.make "justify-between"

     

       73
       73
       -
         | Justify Around -> Css.make "justify-around"

     

       74
       74
       -
         | Justify Evenly -> Css.make "justify-evenly"

     

       75
       75
       -
         | Justify Stretch -> Css.make "justify-stretch"

     

       76
       76
       -
         | Align_items Start -> Css.make "items-start"

     

       77
       77
       -
         | Align_items End -> Css.make "items-end"

     

       78
       78
       -
         | Align_items Center -> Css.make "items-center"

     

       79
       79
       -
         | Align_items Baseline -> Css.make "items-baseline"

     

       80
       80
       -
         | Align_items Stretch -> Css.make "items-stretch"

     

       81
       81
       -
         | Align_content Normal -> Css.make "content-normal"

     

       82
       82
       -
         | Align_content Start -> Css.make "content-start"

     

       83
       83
       -
         | Align_content End -> Css.make "content-end"

     

       84
       84
       -
         | Align_content Center -> Css.make "content-center"

     

       85
       85
       -
         | Align_content Between -> Css.make "content-between"

     

       86
       86
       -
         | Align_content Around -> Css.make "content-around"

     

       87
       87
       -
         | Align_content Evenly -> Css.make "content-evenly"

     

       88
       88
       -
         | Align_content Stretch -> Css.make "content-stretch"

     

       89
       89
       -
         | Align_content Baseline -> Css.make "content-baseline"

     

       90
       90
       -
         | Align_self Auto -> Css.make "self-auto"

     

       91
       91
       -
         | Align_self Start -> Css.make "self-start"

     

       92
       92
       -
         | Align_self End -> Css.make "self-end"

     

       93
       93
       -
         | Align_self Center -> Css.make "self-center"

     

       94
       94
       -
         | Align_self Stretch -> Css.make "self-stretch"

     

       95
       95
       -
         | Align_self Baseline -> Css.make "self-baseline"

     

       96
       96
       -
         | Grow None -> Css.make "grow-0"

     

       97
       97
       -
         | Grow (Some 0) -> Css.make "grow-0" 

     

       98
       98
       -
         | Grow (Some n) -> Css.make (Printf.sprintf "grow-%d" n)

     

       99
       99
       -
         | Shrink None -> Css.make "shrink-0"

     

       100
       100
       -
         | Shrink (Some 0) -> Css.make "shrink-0"

     

       101
       101
       -
         | Shrink (Some n) -> Css.make (Printf.sprintf "shrink-%d" n)

     

       102
       102
       -
         | Basis size -> Css.make (Printf.sprintf "basis-%s" (Size.to_string size))

     

       103
       103
       -
         | Flex `Initial -> Css.make "flex-initial"

     

       104
       104
       -
         | Flex `One -> Css.make "flex-1"

     

       105
       105
       -
         | Flex `Auto -> Css.make "flex-auto"

     

       106
       106
       -
         | Flex `None -> Css.make "flex-none"

     

       68
       68
       +
         | `Direction `Row -> Css.make "flex-row"

     

       69
       69
       +
         | `Direction `Row_reverse -> Css.make "flex-row-reverse"

     

       70
       70
       +
         | `Direction `Col -> Css.make "flex-col"  

     

       71
       71
       +
         | `Direction `Col_reverse -> Css.make "flex-col-reverse"

     

       72
       72
       +
         | `Wrap_setting `Wrap -> Css.make "flex-wrap"

     

       73
       73
       +
         | `Wrap_setting `Wrap_reverse -> Css.make "flex-wrap-reverse"

     

       74
       74
       +
         | `Wrap_setting `Nowrap -> Css.make "flex-nowrap"

     

       75
       75
       +
         | `Justify `Normal -> Css.make "justify-normal"

     

       76
       76
       +
         | `Justify `Start -> Css.make "justify-start"

     

       77
       77
       +
         | `Justify `End -> Css.make "justify-end"

     

       78
       78
       +
         | `Justify `Center -> Css.make "justify-center"

     

       79
       79
       +
         | `Justify `Between -> Css.make "justify-between"

     

       80
       80
       +
         | `Justify `Around -> Css.make "justify-around"

     

       81
       81
       +
         | `Justify `Evenly -> Css.make "justify-evenly"

     

       82
       82
       +
         | `Justify `Stretch -> Css.make "justify-stretch"

     

       83
       83
       +
         | `Align_items `Start -> Css.make "items-start"

     

       84
       84
       +
         | `Align_items `End -> Css.make "items-end"

     

       85
       85
       +
         | `Align_items `Center -> Css.make "items-center"

     

       86
       86
       +
         | `Align_items `Baseline -> Css.make "items-baseline"

     

       87
       87
       +
         | `Align_items `Stretch -> Css.make "items-stretch"

     

       88
       88
       +
         | `Align_content `Normal -> Css.make "content-normal"

     

       89
       89
       +
         | `Align_content `Start -> Css.make "content-start"

     

       90
       90
       +
         | `Align_content `End -> Css.make "content-end"

     

       91
       91
       +
         | `Align_content `Center -> Css.make "content-center"

     

       92
       92
       +
         | `Align_content `Between -> Css.make "content-between"

     

       93
       93
       +
         | `Align_content `Around -> Css.make "content-around"

     

       94
       94
       +
         | `Align_content `Evenly -> Css.make "content-evenly"

     

       95
       95
       +
         | `Align_content `Stretch -> Css.make "content-stretch"

     

       96
       96
       +
         | `Align_content `Baseline -> Css.make "content-baseline"

     

       97
       97
       +
         | `Align_self `Auto -> Css.make "self-auto"

     

       98
       98
       +
         | `Align_self `Start -> Css.make "self-start"

     

       99
       99
       +
         | `Align_self `End -> Css.make "self-end"

     

       100
       100
       +
         | `Align_self `Center -> Css.make "self-center"

     

       101
       101
       +
         | `Align_self `Stretch -> Css.make "self-stretch"

     

       102
       102
       +
         | `Align_self `Baseline -> Css.make "self-baseline"

     

       103
       103
       +
         | `Grow None -> Css.make "grow-0"

     

       104
       104
       +
         | `Grow (Some 0) -> Css.make "grow-0" 

     

       105
       105
       +
         | `Grow (Some n) -> Css.make (Printf.sprintf "grow-%d" n)

     

       106
       106
       +
         | `Shrink None -> Css.make "shrink-0"

     

       107
       107
       +
         | `Shrink (Some 0) -> Css.make "shrink-0"

     

       108
       108
       +
         | `Shrink (Some n) -> Css.make (Printf.sprintf "shrink-%d" n)

     

       109
       109
       +
         | `Basis size -> Css.make (Printf.sprintf "basis-%s" (Size.to_string size))

     

       110
       110
       +
         | `Flex `Initial -> Css.make "flex-initial"

     

       111
       111
       +
         | `Flex `One -> Css.make "flex-1"

     

       112
       112
       +
         | `Flex `Auto -> Css.make "flex-auto"

     

       113
       113
       +
         | `Flex `None -> Css.make "flex-none"

     

       107
       114
        
       

     

       108
       108
       -
       let direction d = Direction d

     

       109
       109
       -
       let wrap w = Wrap_setting w  

     

       110
       110
       -
       let justify j = Justify j

     

       111
       111
       -
       let align_items a = Align_items a

     

       112
       112
       -
       let align_content a = Align_content a

     

       113
       113
       -
       let align_self a = Align_self a

     

       114
       114
       -
       let grow g = Grow g

     

       115
       115
       -
       let shrink s = Shrink s

     

       116
       116
       -
       let basis b = Basis b

     

       117
       117
       -
       let flex f = Flex f

     

       115
       115
       +
       let direction d = `Direction d

     

       116
       116
       +
       let wrap w = `Wrap_setting w  

     

       117
       117
       +
       let justify j = `Justify j

     

       118
       118
       +
       let align_items a = `Align_items a

     

       119
       119
       +
       let align_content a = `Align_content a

     

       120
       120
       +
       let align_self a = `Align_self a

     

       121
       121
       +
       let grow g = `Grow g

     

       122
       122
       +
       let shrink s = `Shrink s

     

       123
       123
       +
       let basis b = `Basis b

     

       124
       124
       +
       let flex f = `Flex f

     

       118
       125
        
       

     

       119
       126
        
       let combine ts = Css.concat (List.map to_class ts)

+47 -41

lib/tailwind/flexbox.mli

···

       4
       4
        
       type t

     

       5
       5
        
       

     

       6
       6
        
       (** Flex direction values *)

     

       7
       7
       -
       type direction =

     

       8
       8
       -
         | Row

     

       9
       9
       -
         | Row_reverse

     

       10
       10
       -
         | Col

     

       11
       11
       -
         | Col_reverse

     

       7
       7
       +
       type direction = [

     

       8
       8
       +
         | `Row

     

       9
       9
       +
         | `Row_reverse

     

       10
       10
       +
         | `Col

     

       11
       11
       +
         | `Col_reverse

     

       12
       12
       +
       ]

     

       12
       13
        
       

     

       13
       14
        
       (** Flex wrap values *)

     

       14
       14
       -
       type wrap =

     

       15
       15
       -
         | Wrap

     

       16
       16
       -
         | Wrap_reverse

     

       17
       17
       -
         | Nowrap

     

       15
       15
       +
       type wrap = [

     

       16
       16
       +
         | `Wrap

     

       17
       17
       +
         | `Wrap_reverse

     

       18
       18
       +
         | `Nowrap

     

       19
       19
       +
       ]

     

       18
       20
        
       

     

       19
       21
        
       (** Justify content values *)

     

       20
       20
       -
       type justify =

     

       21
       21
       -
         | Normal

     

       22
       22
       -
         | Start

     

       23
       23
       -
         | End

     

       24
       24
       -
         | Center

     

       25
       25
       -
         | Between

     

       26
       26
       -
         | Around

     

       27
       27
       -
         | Evenly

     

       28
       28
       -
         | Stretch

     

       22
       22
       +
       type justify = [

     

       23
       23
       +
         | `Normal

     

       24
       24
       +
         | `Start

     

       25
       25
       +
         | `End

     

       26
       26
       +
         | `Center

     

       27
       27
       +
         | `Between

     

       28
       28
       +
         | `Around

     

       29
       29
       +
         | `Evenly

     

       30
       30
       +
         | `Stretch

     

       31
       31
       +
       ]

     

       29
       32
        
       

     

       30
       33
        
       (** Align items values *)

     

       31
       31
       -
       type align_items =

     

       32
       32
       -
         | Start

     

       33
       33
       -
         | End

     

       34
       34
       -
         | Center

     

       35
       35
       -
         | Baseline

     

       36
       36
       -
         | Stretch

     

       34
       34
       +
       type align_items = [

     

       35
       35
       +
         | `Start

     

       36
       36
       +
         | `End

     

       37
       37
       +
         | `Center

     

       38
       38
       +
         | `Baseline

     

       39
       39
       +
         | `Stretch

     

       40
       40
       +
       ]

     

       37
       41
        
       

     

       38
       42
        
       (** Align content values *)

     

       39
       39
       -
       type align_content =

     

       40
       40
       -
         | Normal

     

       41
       41
       -
         | Start

     

       42
       42
       -
         | End

     

       43
       43
       -
         | Center

     

       44
       44
       -
         | Between

     

       45
       45
       -
         | Around

     

       46
       46
       -
         | Evenly

     

       47
       47
       -
         | Stretch

     

       48
       48
       -
         | Baseline

     

       43
       43
       +
       type align_content = [

     

       44
       44
       +
         | `Normal

     

       45
       45
       +
         | `Start

     

       46
       46
       +
         | `End

     

       47
       47
       +
         | `Center

     

       48
       48
       +
         | `Between

     

       49
       49
       +
         | `Around

     

       50
       50
       +
         | `Evenly

     

       51
       51
       +
         | `Stretch

     

       52
       52
       +
         | `Baseline

     

       53
       53
       +
       ]

     

       49
       54
        
       

     

       50
       55
        
       (** Align self values *)

     

       51
       51
       -
       type align_self =

     

       52
       52
       -
         | Auto

     

       53
       53
       -
         | Start

     

       54
       54
       -
         | End

     

       55
       55
       -
         | Center

     

       56
       56
       -
         | Stretch

     

       57
       57
       -
         | Baseline

     

       56
       56
       +
       type align_self = [

     

       57
       57
       +
         | `Auto

     

       58
       58
       +
         | `Start

     

       59
       59
       +
         | `End

     

       60
       60
       +
         | `Center

     

       61
       61
       +
         | `Stretch

     

       62
       62
       +
         | `Baseline

     

       63
       63
       +
       ]

     

       58
       64
        
       

     

       59
       65
        
       (** Set flex direction *)

     

       60
       66
        
       val direction : direction -> t

+69 -64

lib/tailwind/grid.ml

···

       1
       1
       -
       type cols =

     

       2
       2
       -
         | None

     

       3
       3
       -
         | Subgrid

     

       4
       4
       -
         | Cols of int

     

       1
       1
       +
       type cols = [

     

       2
       2
       +
         | `None

     

       3
       3
       +
         | `Subgrid

     

       4
       4
       +
         | `Cols of int

     

       5
       5
       +
       ]

     

       5
       6
        
       

     

       6
       6
       -
       type rows =

     

       7
       7
       -
         | None

     

       8
       8
       -
         | Subgrid

     

       9
       9
       -
         | Rows of int

     

       7
       7
       +
       type rows = [

     

       8
       8
       +
         | `None

     

       9
       9
       +
         | `Subgrid

     

       10
       10
       +
         | `Rows of int

     

       11
       11
       +
       ]

     

       10
       12
        
       

     

       11
       11
       -
       type span =

     

       12
       12
       -
         | Auto

     

       13
       13
       -
         | Full

     

       14
       14
       -
         | Span of int

     

       15
       15
       -
         | Start of int

     

       16
       16
       -
         | End of int

     

       13
       13
       +
       type span = [

     

       14
       14
       +
         | `Auto

     

       15
       15
       +
         | `Full

     

       16
       16
       +
         | `Span of int

     

       17
       17
       +
         | `Start of int

     

       18
       18
       +
         | `End of int

     

       19
       19
       +
       ]

     

       17
       20
        
       

     

       18
       18
       -
       type flow =

     

       19
       19
       -
         | Row

     

       20
       20
       -
         | Col

     

       21
       21
       -
         | Dense

     

       22
       22
       -
         | Row_dense

     

       23
       23
       -
         | Col_dense

     

       21
       21
       +
       type flow = [

     

       22
       22
       +
         | `Row

     

       23
       23
       +
         | `Col

     

       24
       24
       +
         | `Dense

     

       25
       25
       +
         | `Row_dense

     

       26
       26
       +
         | `Col_dense

     

       27
       27
       +
       ]

     

       24
       28
        
       

     

       25
       25
       -
       type t = 

     

       26
       26
       -
         | Template_cols of cols

     

       27
       27
       -
         | Template_rows of rows

     

       28
       28
       -
         | Col of span

     

       29
       29
       -
         | Row of span

     

       30
       30
       -
         | Auto_flow of flow

     

       31
       31
       -
         | Auto_cols of [`Auto | `Min | `Max | `Fr of int]

     

       32
       32
       -
         | Auto_rows of [`Auto | `Min | `Max | `Fr of int]

     

       29
       29
       +
       type t = [

     

       30
       30
       +
         | `Template_cols of cols

     

       31
       31
       +
         | `Template_rows of rows

     

       32
       32
       +
         | `Col of span

     

       33
       33
       +
         | `Row of span

     

       34
       34
       +
         | `Auto_flow of flow

     

       35
       35
       +
         | `Auto_cols of [`Auto | `Min | `Max | `Fr of int]

     

       36
       36
       +
         | `Auto_rows of [`Auto | `Min | `Max | `Fr of int]

     

       37
       37
       +
       ]

     

       33
       38
        
       

     

       34
       39
        
       let to_class = function

     

       35
       35
       -
         | Template_cols None -> Css.make "grid-cols-none"

     

       36
       36
       -
         | Template_cols Subgrid -> Css.make "grid-cols-subgrid"

     

       37
       37
       -
         | Template_cols (Cols n) -> Css.make (Printf.sprintf "grid-cols-%d" n)

     

       38
       38
       -
         | Template_rows None -> Css.make "grid-rows-none"

     

       39
       39
       -
         | Template_rows Subgrid -> Css.make "grid-rows-subgrid"

     

       40
       40
       -
         | Template_rows (Rows n) -> Css.make (Printf.sprintf "grid-rows-%d" n)

     

       41
       41
       -
         | Col Auto -> Css.make "col-auto"

     

       42
       42
       -
         | Col Full -> Css.make "col-full"

     

       43
       43
       -
         | Col (Span n) -> Css.make (Printf.sprintf "col-span-%d" n)

     

       44
       44
       -
         | Col (Start n) -> Css.make (Printf.sprintf "col-start-%d" n)

     

       45
       45
       -
         | Col (End n) -> Css.make (Printf.sprintf "col-end-%d" n)

     

       46
       46
       -
         | Row Auto -> Css.make "row-auto"

     

       47
       47
       -
         | Row Full -> Css.make "row-full"

     

       48
       48
       -
         | Row (Span n) -> Css.make (Printf.sprintf "row-span-%d" n)

     

       49
       49
       -
         | Row (Start n) -> Css.make (Printf.sprintf "row-start-%d" n)

     

       50
       50
       -
         | Row (End n) -> Css.make (Printf.sprintf "row-end-%d" n)

     

       51
       51
       -
         | Auto_flow Row -> Css.make "grid-flow-row"

     

       52
       52
       -
         | Auto_flow Col -> Css.make "grid-flow-col"

     

       53
       53
       -
         | Auto_flow Dense -> Css.make "grid-flow-dense"

     

       54
       54
       -
         | Auto_flow Row_dense -> Css.make "grid-flow-row-dense"

     

       55
       55
       -
         | Auto_flow Col_dense -> Css.make "grid-flow-col-dense"

     

       56
       56
       -
         | Auto_cols `Auto -> Css.make "auto-cols-auto"

     

       57
       57
       -
         | Auto_cols `Min -> Css.make "auto-cols-min"

     

       58
       58
       -
         | Auto_cols `Max -> Css.make "auto-cols-max"

     

       59
       59
       -
         | Auto_cols (`Fr n) -> Css.make (Printf.sprintf "auto-cols-fr-%d" n)

     

       60
       60
       -
         | Auto_rows `Auto -> Css.make "auto-rows-auto"

     

       61
       61
       -
         | Auto_rows `Min -> Css.make "auto-rows-min"

     

       62
       62
       -
         | Auto_rows `Max -> Css.make "auto-rows-max"

     

       63
       63
       -
         | Auto_rows (`Fr n) -> Css.make (Printf.sprintf "auto-rows-fr-%d" n)

     

       40
       40
       +
         | `Template_cols `None -> Css.make "grid-cols-none"

     

       41
       41
       +
         | `Template_cols `Subgrid -> Css.make "grid-cols-subgrid"

     

       42
       42
       +
         | `Template_cols (`Cols n) -> Css.make (Printf.sprintf "grid-cols-%d" n)

     

       43
       43
       +
         | `Template_rows `None -> Css.make "grid-rows-none"

     

       44
       44
       +
         | `Template_rows `Subgrid -> Css.make "grid-rows-subgrid"

     

       45
       45
       +
         | `Template_rows (`Rows n) -> Css.make (Printf.sprintf "grid-rows-%d" n)

     

       46
       46
       +
         | `Col `Auto -> Css.make "col-auto"

     

       47
       47
       +
         | `Col `Full -> Css.make "col-full"

     

       48
       48
       +
         | `Col (`Span n) -> Css.make (Printf.sprintf "col-span-%d" n)

     

       49
       49
       +
         | `Col (`Start n) -> Css.make (Printf.sprintf "col-start-%d" n)

     

       50
       50
       +
         | `Col (`End n) -> Css.make (Printf.sprintf "col-end-%d" n)

     

       51
       51
       +
         | `Row `Auto -> Css.make "row-auto"

     

       52
       52
       +
         | `Row `Full -> Css.make "row-full"

     

       53
       53
       +
         | `Row (`Span n) -> Css.make (Printf.sprintf "row-span-%d" n)

     

       54
       54
       +
         | `Row (`Start n) -> Css.make (Printf.sprintf "row-start-%d" n)

     

       55
       55
       +
         | `Row (`End n) -> Css.make (Printf.sprintf "row-end-%d" n)

     

       56
       56
       +
         | `Auto_flow `Row -> Css.make "grid-flow-row"

     

       57
       57
       +
         | `Auto_flow `Col -> Css.make "grid-flow-col"

     

       58
       58
       +
         | `Auto_flow `Dense -> Css.make "grid-flow-dense"

     

       59
       59
       +
         | `Auto_flow `Row_dense -> Css.make "grid-flow-row-dense"

     

       60
       60
       +
         | `Auto_flow `Col_dense -> Css.make "grid-flow-col-dense"

     

       61
       61
       +
         | `Auto_cols `Auto -> Css.make "auto-cols-auto"

     

       62
       62
       +
         | `Auto_cols `Min -> Css.make "auto-cols-min"

     

       63
       63
       +
         | `Auto_cols `Max -> Css.make "auto-cols-max"

     

       64
       64
       +
         | `Auto_cols (`Fr n) -> Css.make (Printf.sprintf "auto-cols-fr-%d" n)

     

       65
       65
       +
         | `Auto_rows `Auto -> Css.make "auto-rows-auto"

     

       66
       66
       +
         | `Auto_rows `Min -> Css.make "auto-rows-min"

     

       67
       67
       +
         | `Auto_rows `Max -> Css.make "auto-rows-max"

     

       68
       68
       +
         | `Auto_rows (`Fr n) -> Css.make (Printf.sprintf "auto-rows-fr-%d" n)

     

       64
       69
        
       

     

       65
       65
       -
       let template_cols cols = Template_cols cols

     

       66
       66
       -
       let template_rows rows = Template_rows rows

     

       67
       67
       -
       let col span = Col span

     

       68
       68
       -
       let row span = Row span

     

       69
       69
       -
       let auto_flow flow = Auto_flow flow

     

       70
       70
       -
       let auto_cols cols = Auto_cols cols

     

       71
       71
       -
       let auto_rows rows = Auto_rows rows

     

       70
       70
       +
       let template_cols cols = `Template_cols cols

     

       71
       71
       +
       let template_rows rows = `Template_rows rows

     

       72
       72
       +
       let col span = `Col span

     

       73
       73
       +
       let row span = `Row span

     

       74
       74
       +
       let auto_flow flow = `Auto_flow flow

     

       75
       75
       +
       let auto_cols cols = `Auto_cols cols

     

       76
       76
       +
       let auto_rows rows = `Auto_rows rows

     

       72
       77
        
       

     

       73
       78
        
       let combine ts = Css.concat (List.map to_class ts)

+24 -20

lib/tailwind/grid.mli

···

       4
       4
        
       type t

     

       5
       5
        
       

     

       6
       6
        
       (** Grid template columns *)

     

       7
       7
       -
       type cols =

     

       8
       8
       -
         | None

     

       9
       9
       -
         | Subgrid

     

       10
       10
       -
         | Cols of int (** 1-12 columns *)

     

       7
       7
       +
       type cols = [

     

       8
       8
       +
         | `None

     

       9
       9
       +
         | `Subgrid

     

       10
       10
       +
         | `Cols of int (** 1-12 columns *)

     

       11
       11
       +
       ]

     

       11
       12
        
       

     

       12
       13
        
       (** Grid template rows *)

     

       13
       13
       -
       type rows =

     

       14
       14
       -
         | None

     

       15
       15
       -
         | Subgrid

     

       16
       16
       -
         | Rows of int (** 1-12 rows *)

     

       14
       14
       +
       type rows = [

     

       15
       15
       +
         | `None

     

       16
       16
       +
         | `Subgrid

     

       17
       17
       +
         | `Rows of int (** 1-12 rows *)

     

       18
       18
       +
       ]

     

       17
       19
        
       

     

       18
       20
        
       (** Grid column/row span *)

     

       19
       19
       -
       type span =

     

       20
       20
       -
         | Auto

     

       21
       21
       -
         | Full

     

       22
       22
       -
         | Span of int

     

       23
       23
       -
         | Start of int

     

       24
       24
       -
         | End of int

     

       21
       21
       +
       type span = [

     

       22
       22
       +
         | `Auto

     

       23
       23
       +
         | `Full

     

       24
       24
       +
         | `Span of int

     

       25
       25
       +
         | `Start of int

     

       26
       26
       +
         | `End of int

     

       27
       27
       +
       ]

     

       25
       28
        
       

     

       26
       29
        
       (** Grid auto flow *)

     

       27
       27
       -
       type flow =

     

       28
       28
       -
         | Row

     

       29
       29
       -
         | Col

     

       30
       30
       -
         | Dense

     

       31
       31
       -
         | Row_dense

     

       32
       32
       -
         | Col_dense

     

       30
       30
       +
       type flow = [

     

       31
       31
       +
         | `Row

     

       32
       32
       +
         | `Col

     

       33
       33
       +
         | `Dense

     

       34
       34
       +
         | `Row_dense

     

       35
       35
       +
         | `Col_dense

     

       36
       36
       +
       ]

     

       33
       37
        
       

     

       34
       38
        
       (** Set grid template columns *)

     

       35
       39
        
       val template_cols : cols -> t

+87 -82

lib/tailwind/layout.ml

···

       1
       1
       -
       type overflow =

     

       2
       2
       -
         | Auto

     

       3
       3
       -
         | Hidden

     

       4
       4
       -
         | Clip

     

       5
       5
       -
         | Visible

     

       6
       6
       -
         | Scroll

     

       1
       1
       +
       type overflow = [

     

       2
       2
       +
         | `Auto

     

       3
       3
       +
         | `Hidden

     

       4
       4
       +
         | `Clip

     

       5
       5
       +
         | `Visible

     

       6
       6
       +
         | `Scroll

     

       7
       7
       +
       ]

     

       7
       8
        
       

     

       8
       8
       -
       type box_sizing =

     

       9
       9
       -
         | Border_box

     

       10
       10
       -
         | Content_box

     

       9
       9
       +
       type box_sizing = [

     

       10
       10
       +
         | `Border_box

     

       11
       11
       +
         | `Content_box

     

       12
       12
       +
       ]

     

       11
       13
        
       

     

       12
       12
       -
       type object_fit =

     

       13
       13
       -
         | Contain

     

       14
       14
       -
         | Cover

     

       15
       15
       -
         | Fill

     

       16
       16
       -
         | None

     

       17
       17
       -
         | Scale_down

     

       14
       14
       +
       type object_fit = [

     

       15
       15
       +
         | `Contain

     

       16
       16
       +
         | `Cover

     

       17
       17
       +
         | `Fill

     

       18
       18
       +
         | `None

     

       19
       19
       +
         | `Scale_down

     

       20
       20
       +
       ]

     

       18
       21
        
       

     

       19
       19
       -
       type object_position =

     

       20
       20
       -
         | Bottom | Center | Left | Left_bottom | Left_top

     

       21
       21
       -
         | Right | Right_bottom | Right_top | Top

     

       22
       22
       +
       type object_position = [

     

       23
       23
       +
         | `Bottom | `Center | `Left | `Left_bottom | `Left_top

     

       24
       24
       +
         | `Right | `Right_bottom | `Right_top | `Top

     

       25
       25
       +
       ]

     

       22
       26
        
       

     

       23
       23
       -
       type t = 

     

       24
       24
       -
         | Width of Size.t

     

       25
       25
       -
         | Height of Size.t

     

       26
       26
       -
         | Min_width of Size.t

     

       27
       27
       -
         | Max_width of Size.t

     

       28
       28
       -
         | Min_height of Size.t

     

       29
       29
       -
         | Max_height of Size.t

     

       30
       30
       -
         | Overflow of [`All | `X | `Y] * overflow

     

       31
       31
       -
         | Box_sizing of box_sizing

     

       32
       32
       -
         | Object_fit of object_fit

     

       33
       33
       -
         | Object_position of object_position

     

       34
       34
       -
         | Aspect of [`Auto | `Square | `Video | `Ratio of int * int]

     

       27
       27
       +
       type t = [

     

       28
       28
       +
         | `Width of Size.t

     

       29
       29
       +
         | `Height of Size.t

     

       30
       30
       +
         | `Min_width of Size.t

     

       31
       31
       +
         | `Max_width of Size.t

     

       32
       32
       +
         | `Min_height of Size.t

     

       33
       33
       +
         | `Max_height of Size.t

     

       34
       34
       +
         | `Overflow of [`All | `X | `Y] * overflow

     

       35
       35
       +
         | `Box_sizing of box_sizing

     

       36
       36
       +
         | `Object_fit of object_fit

     

       37
       37
       +
         | `Object_position of object_position

     

       38
       38
       +
         | `Aspect of [`Auto | `Square | `Video | `Ratio of int * int]

     

       39
       39
       +
       ]

     

       35
       40
        
       

     

       36
       41
        
       let to_class = function

     

       37
       37
       -
         | Width size -> Css.make (Printf.sprintf "w-%s" (Size.to_string size))

     

       38
       38
       -
         | Height size -> Css.make (Printf.sprintf "h-%s" (Size.to_string size))

     

       39
       39
       -
         | Min_width size -> Css.make (Printf.sprintf "min-w-%s" (Size.to_string size))

     

       40
       40
       -
         | Max_width size -> Css.make (Printf.sprintf "max-w-%s" (Size.to_string size))

     

       41
       41
       -
         | Min_height size -> Css.make (Printf.sprintf "min-h-%s" (Size.to_string size))

     

       42
       42
       -
         | Max_height size -> Css.make (Printf.sprintf "max-h-%s" (Size.to_string size))

     

       43
       43
       -
         | Overflow (`All, Auto) -> Css.make "overflow-auto"

     

       44
       44
       -
         | Overflow (`All, Hidden) -> Css.make "overflow-hidden"

     

       45
       45
       -
         | Overflow (`All, Clip) -> Css.make "overflow-clip"

     

       46
       46
       -
         | Overflow (`All, Visible) -> Css.make "overflow-visible"

     

       47
       47
       -
         | Overflow (`All, Scroll) -> Css.make "overflow-scroll"

     

       48
       48
       -
         | Overflow (`X, Auto) -> Css.make "overflow-x-auto"

     

       49
       49
       -
         | Overflow (`X, Hidden) -> Css.make "overflow-x-hidden"

     

       50
       50
       -
         | Overflow (`X, Clip) -> Css.make "overflow-x-clip"

     

       51
       51
       -
         | Overflow (`X, Visible) -> Css.make "overflow-x-visible"

     

       52
       52
       -
         | Overflow (`X, Scroll) -> Css.make "overflow-x-scroll"

     

       53
       53
       -
         | Overflow (`Y, Auto) -> Css.make "overflow-y-auto"

     

       54
       54
       -
         | Overflow (`Y, Hidden) -> Css.make "overflow-y-hidden"

     

       55
       55
       -
         | Overflow (`Y, Clip) -> Css.make "overflow-y-clip"

     

       56
       56
       -
         | Overflow (`Y, Visible) -> Css.make "overflow-y-visible"

     

       57
       57
       -
         | Overflow (`Y, Scroll) -> Css.make "overflow-y-scroll"

     

       58
       58
       -
         | Box_sizing Border_box -> Css.make "box-border"

     

       59
       59
       -
         | Box_sizing Content_box -> Css.make "box-content"

     

       60
       60
       -
         | Object_fit Contain -> Css.make "object-contain"

     

       61
       61
       -
         | Object_fit Cover -> Css.make "object-cover"

     

       62
       62
       -
         | Object_fit Fill -> Css.make "object-fill"

     

       63
       63
       -
         | Object_fit None -> Css.make "object-none"

     

       64
       64
       -
         | Object_fit Scale_down -> Css.make "object-scale-down"

     

       65
       65
       -
         | Object_position Bottom -> Css.make "object-bottom"

     

       66
       66
       -
         | Object_position Center -> Css.make "object-center"

     

       67
       67
       -
         | Object_position Left -> Css.make "object-left"

     

       68
       68
       -
         | Object_position Left_bottom -> Css.make "object-left-bottom"

     

       69
       69
       -
         | Object_position Left_top -> Css.make "object-left-top"

     

       70
       70
       -
         | Object_position Right -> Css.make "object-right"

     

       71
       71
       -
         | Object_position Right_bottom -> Css.make "object-right-bottom"

     

       72
       72
       -
         | Object_position Right_top -> Css.make "object-right-top"

     

       73
       73
       -
         | Object_position Top -> Css.make "object-top"

     

       74
       74
       -
         | Aspect `Auto -> Css.make "aspect-auto"

     

       75
       75
       -
         | Aspect `Square -> Css.make "aspect-square"

     

       76
       76
       -
         | Aspect `Video -> Css.make "aspect-video"

     

       77
       77
       -
         | Aspect (`Ratio (w, h)) -> Css.make (Printf.sprintf "aspect-[%d/%d]" w h)

     

       42
       42
       +
         | `Width size -> Css.make (Printf.sprintf "w-%s" (Size.to_string size))

     

       43
       43
       +
         | `Height size -> Css.make (Printf.sprintf "h-%s" (Size.to_string size))

     

       44
       44
       +
         | `Min_width size -> Css.make (Printf.sprintf "min-w-%s" (Size.to_string size))

     

       45
       45
       +
         | `Max_width size -> Css.make (Printf.sprintf "max-w-%s" (Size.to_string size))

     

       46
       46
       +
         | `Min_height size -> Css.make (Printf.sprintf "min-h-%s" (Size.to_string size))

     

       47
       47
       +
         | `Max_height size -> Css.make (Printf.sprintf "max-h-%s" (Size.to_string size))

     

       48
       48
       +
         | `Overflow (`All, `Auto) -> Css.make "overflow-auto"

     

       49
       49
       +
         | `Overflow (`All, `Hidden) -> Css.make "overflow-hidden"

     

       50
       50
       +
         | `Overflow (`All, `Clip) -> Css.make "overflow-clip"

     

       51
       51
       +
         | `Overflow (`All, `Visible) -> Css.make "overflow-visible"

     

       52
       52
       +
         | `Overflow (`All, `Scroll) -> Css.make "overflow-scroll"

     

       53
       53
       +
         | `Overflow (`X, `Auto) -> Css.make "overflow-x-auto"

     

       54
       54
       +
         | `Overflow (`X, `Hidden) -> Css.make "overflow-x-hidden"

     

       55
       55
       +
         | `Overflow (`X, `Clip) -> Css.make "overflow-x-clip"

     

       56
       56
       +
         | `Overflow (`X, `Visible) -> Css.make "overflow-x-visible"

     

       57
       57
       +
         | `Overflow (`X, `Scroll) -> Css.make "overflow-x-scroll"

     

       58
       58
       +
         | `Overflow (`Y, `Auto) -> Css.make "overflow-y-auto"

     

       59
       59
       +
         | `Overflow (`Y, `Hidden) -> Css.make "overflow-y-hidden"

     

       60
       60
       +
         | `Overflow (`Y, `Clip) -> Css.make "overflow-y-clip"

     

       61
       61
       +
         | `Overflow (`Y, `Visible) -> Css.make "overflow-y-visible"

     

       62
       62
       +
         | `Overflow (`Y, `Scroll) -> Css.make "overflow-y-scroll"

     

       63
       63
       +
         | `Box_sizing `Border_box -> Css.make "box-border"

     

       64
       64
       +
         | `Box_sizing `Content_box -> Css.make "box-content"

     

       65
       65
       +
         | `Object_fit `Contain -> Css.make "object-contain"

     

       66
       66
       +
         | `Object_fit `Cover -> Css.make "object-cover"

     

       67
       67
       +
         | `Object_fit `Fill -> Css.make "object-fill"

     

       68
       68
       +
         | `Object_fit `None -> Css.make "object-none"

     

       69
       69
       +
         | `Object_fit `Scale_down -> Css.make "object-scale-down"

     

       70
       70
       +
         | `Object_position `Bottom -> Css.make "object-bottom"

     

       71
       71
       +
         | `Object_position `Center -> Css.make "object-center"

     

       72
       72
       +
         | `Object_position `Left -> Css.make "object-left"

     

       73
       73
       +
         | `Object_position `Left_bottom -> Css.make "object-left-bottom"

     

       74
       74
       +
         | `Object_position `Left_top -> Css.make "object-left-top"

     

       75
       75
       +
         | `Object_position `Right -> Css.make "object-right"

     

       76
       76
       +
         | `Object_position `Right_bottom -> Css.make "object-right-bottom"

     

       77
       77
       +
         | `Object_position `Right_top -> Css.make "object-right-top"

     

       78
       78
       +
         | `Object_position `Top -> Css.make "object-top"

     

       79
       79
       +
         | `Aspect `Auto -> Css.make "aspect-auto"

     

       80
       80
       +
         | `Aspect `Square -> Css.make "aspect-square"

     

       81
       81
       +
         | `Aspect `Video -> Css.make "aspect-video"

     

       82
       82
       +
         | `Aspect (`Ratio (w, h)) -> Css.make (Printf.sprintf "aspect-[%d/%d]" w h)

     

       78
       83
        
       

     

       79
       79
       -
       let width size = Width size

     

       80
       80
       -
       let height size = Height size

     

       81
       81
       -
       let min_width size = Min_width size

     

       82
       82
       -
       let max_width size = Max_width size

     

       83
       83
       -
       let min_height size = Min_height size

     

       84
       84
       -
       let max_height size = Max_height size

     

       85
       85
       -
       let overflow dir overflow = Overflow (dir, overflow)

     

       86
       86
       -
       let box_sizing bs = Box_sizing bs

     

       87
       87
       -
       let object_fit of_ = Object_fit of_

     

       88
       88
       -
       let object_position op = Object_position op

     

       89
       89
       -
       let aspect a = Aspect a

     

       84
       84
       +
       let width size = `Width size

     

       85
       85
       +
       let height size = `Height size

     

       86
       86
       +
       let min_width size = `Min_width size

     

       87
       87
       +
       let max_width size = `Max_width size

     

       88
       88
       +
       let min_height size = `Min_height size

     

       89
       89
       +
       let max_height size = `Max_height size

     

       90
       90
       +
       let overflow dir overflow = `Overflow (dir, overflow)

     

       91
       91
       +
       let box_sizing bs = `Box_sizing bs

     

       92
       92
       +
       let object_fit of_ = `Object_fit of_

     

       93
       93
       +
       let object_position op = `Object_position op

     

       94
       94
       +
       let aspect a = `Aspect a

     

       90
       95
        
       

     

       91
       96
        
       let w_full = Css.make "w-full"

     

       92
       97
        
       let w_screen = Css.make "w-screen"

+22 -18

lib/tailwind/layout.mli

···

       4
       4
        
       type t

     

       5
       5
        
       

     

       6
       6
        
       (** Overflow values *)

     

       7
       7
       -
       type overflow =

     

       8
       8
       -
         | Auto

     

       9
       9
       -
         | Hidden

     

       10
       10
       -
         | Clip

     

       11
       11
       -
         | Visible

     

       12
       12
       -
         | Scroll

     

       7
       7
       +
       type overflow = [

     

       8
       8
       +
         | `Auto

     

       9
       9
       +
         | `Hidden

     

       10
       10
       +
         | `Clip

     

       11
       11
       +
         | `Visible

     

       12
       12
       +
         | `Scroll

     

       13
       13
       +
       ]

     

       13
       14
        
       

     

       14
       15
        
       (** Box sizing *)

     

       15
       15
       -
       type box_sizing =

     

       16
       16
       -
         | Border_box

     

       17
       17
       -
         | Content_box

     

       16
       16
       +
       type box_sizing = [

     

       17
       17
       +
         | `Border_box

     

       18
       18
       +
         | `Content_box

     

       19
       19
       +
       ]

     

       18
       20
        
       

     

       19
       21
        
       (** Object fit *)

     

       20
       20
       -
       type object_fit =

     

       21
       21
       -
         | Contain

     

       22
       22
       -
         | Cover

     

       23
       23
       -
         | Fill

     

       24
       24
       -
         | None

     

       25
       25
       -
         | Scale_down

     

       22
       22
       +
       type object_fit = [

     

       23
       23
       +
         | `Contain

     

       24
       24
       +
         | `Cover

     

       25
       25
       +
         | `Fill

     

       26
       26
       +
         | `None

     

       27
       27
       +
         | `Scale_down

     

       28
       28
       +
       ]

     

       26
       29
        
       

     

       27
       30
        
       (** Object position *)

     

       28
       28
       -
       type object_position =

     

       29
       29
       -
         | Bottom | Center | Left | Left_bottom | Left_top

     

       30
       30
       -
         | Right | Right_bottom | Right_top | Top

     

       31
       31
       +
       type object_position = [

     

       32
       32
       +
         | `Bottom | `Center | `Left | `Left_bottom | `Left_top

     

       33
       33
       +
         | `Right | `Right_bottom | `Right_top | `Top

     

       34
       34
       +
       ]

     

       31
       35
        
       

     

       32
       36
        
       (** Set width *)

     

       33
       37
        
       val width : Size.t -> t

+63

lib/tailwind/patterns.ml

···

       1
       1
       +
       (** Common layout and styling patterns *)

     

       2
       2
       +
       

     

       3
       3
       +
       let flex_center = 

     

       4
       4
       +
         Css.concat [

     

       5
       5
       +
           Display.to_class `Flex;

     

       6
       6
       +
           Flexbox.(to_class (justify `Center));

     

       7
       7
       +
           Flexbox.(to_class (align_items `Center));

     

       8
       8
       +
         ]

     

       9
       9
       +
       

     

       10
       10
       +
       let absolute_center =

     

       11
       11
       +
         Css.concat [

     

       12
       12
       +
           Css.make "absolute";

     

       13
       13
       +
           Css.make "top-1/2";

     

       14
       14
       +
           Css.make "left-1/2";

     

       15
       15
       +
           Css.make "-translate-x-1/2";

     

       16
       16
       +
           Css.make "-translate-y-1/2";

     

       17
       17
       +
         ]

     

       18
       18
       +
       

     

       19
       19
       +
       let stack ?gap () =

     

       20
       20
       +
         let gap_class = match gap with

     

       21
       21
       +
           | Some g -> [Spacing.(to_class (gap `Y g))]

     

       22
       22
       +
           | None -> [Css.make "space-y-4"]

     

       23
       23
       +
         in

     

       24
       24
       +
         Css.concat ([

     

       25
       25
       +
           Display.to_class `Flex;

     

       26
       26
       +
           Flexbox.(to_class (direction `Col));

     

       27
       27
       +
         ] @ gap_class)

     

       28
       28
       +
       

     

       29
       29
       +
       let inline_stack ?gap () =

     

       30
       30
       +
         let gap_class = match gap with

     

       31
       31
       +
           | Some g -> [Spacing.(to_class (gap `X g))]

     

       32
       32
       +
           | None -> [Css.make "space-x-4"]

     

       33
       33
       +
         in

     

       34
       34
       +
         Css.concat ([

     

       35
       35
       +
           Display.to_class `Flex;

     

       36
       36
       +
           Flexbox.(to_class (align_items `Center));

     

       37
       37
       +
         ] @ gap_class)

     

       38
       38
       +
       

     

       39
       39
       +
       let full_height =

     

       40
       40
       +
         Css.make "min-h-screen"

     

       41
       41
       +
       

     

       42
       42
       +
       let sticky_header =

     

       43
       43
       +
         Css.concat [

     

       44
       44
       +
           Css.make "sticky";

     

       45
       45
       +
           Css.make "top-0";

     

       46
       46
       +
           Css.make "z-50";

     

       47
       47
       +
         ]

     

       48
       48
       +
       

     

       49
       49
       +
       let card =

     

       50
       50
       +
         Css.concat [

     

       51
       51
       +
           Css.make "bg-white";

     

       52
       52
       +
           Css.make "rounded-lg";

     

       53
       53
       +
           Css.make "shadow-md";

     

       54
       54
       +
           Css.make "p-6";

     

       55
       55
       +
         ]

     

       56
       56
       +
       

     

       57
       57
       +
       let container ?center () =

     

       58
       58
       +
         let base = Css.make "container" in

     

       59
       59
       +
         let center_class = match center with

     

       60
       60
       +
           | Some true -> Css.make "mx-auto"

     

       61
       61
       +
           | _ -> Css.empty

     

       62
       62
       +
         in

     

       63
       63
       +
         Css.combine base center_class

+25

lib/tailwind/patterns.mli

···

       1
       1
       +
       (** Common layout and styling patterns *)

     

       2
       2
       +
       

     

       3
       3
       +
       (** Centers content using flexbox *)

     

       4
       4
       +
       val flex_center : Css.t

     

       5
       5
       +
       

     

       6
       6
       +
       (** Centers content absolutely *)

     

       7
       7
       +
       val absolute_center : Css.t

     

       8
       8
       +
       

     

       9
       9
       +
       (** Stack items vertically with consistent spacing *)

     

       10
       10
       +
       val stack : ?gap:Size.t -> unit -> Css.t

     

       11
       11
       +
       

     

       12
       12
       +
       (** Arrange items horizontally with consistent spacing *)

     

       13
       13
       +
       val inline_stack : ?gap:Size.t -> unit -> Css.t

     

       14
       14
       +
       

     

       15
       15
       +
       (** Full viewport height layout *)

     

       16
       16
       +
       val full_height : Css.t

     

       17
       17
       +
       

     

       18
       18
       +
       (** Sticky header pattern *)

     

       19
       19
       +
       val sticky_header : Css.t

     

       20
       20
       +
       

     

       21
       21
       +
       (** Card-like container with shadow and padding *)

     

       22
       22
       +
       val card : Css.t

     

       23
       23
       +
       

     

       24
       24
       +
       (** Responsive container with max-width constraints *)

     

       25
       25
       +
       val container : ?center:bool -> unit -> Css.t

+48 -45

lib/tailwind/position.ml

···

       1
       1
       -
       type position =

     

       2
       2
       -
         | Static

     

       3
       3
       -
         | Fixed

     

       4
       4
       -
         | Absolute

     

       5
       5
       -
         | Relative

     

       6
       6
       -
         | Sticky

     

       1
       1
       +
       type position = [

     

       2
       2
       +
         | `Static

     

       3
       3
       +
         | `Fixed

     

       4
       4
       +
         | `Absolute

     

       5
       5
       +
         | `Relative

     

       6
       6
       +
         | `Sticky

     

       7
       7
       +
       ]

     

       7
       8
        
       

     

       8
       8
       -
       type inset_dir =

     

       9
       9
       -
         | All

     

       10
       10
       -
         | X

     

       11
       11
       -
         | Y

     

       12
       12
       -
         | Top

     

       13
       13
       -
         | Right

     

       14
       14
       -
         | Bottom

     

       15
       15
       -
         | Left

     

       16
       16
       -
         | Start

     

       17
       17
       -
         | End

     

       9
       9
       +
       type inset_dir = [

     

       10
       10
       +
         | `All

     

       11
       11
       +
         | `X

     

       12
       12
       +
         | `Y

     

       13
       13
       +
         | `Top

     

       14
       14
       +
         | `Right

     

       15
       15
       +
         | `Bottom

     

       16
       16
       +
         | `Left

     

       17
       17
       +
         | `Start

     

       18
       18
       +
         | `End

     

       19
       19
       +
       ]

     

       18
       20
        
       

     

       19
       19
       -
       type t = 

     

       20
       20
       -
         | Position of position

     

       21
       21
       -
         | Inset of inset_dir * Size.t

     

       22
       22
       -
         | Z_index of int option

     

       21
       21
       +
       type t = [

     

       22
       22
       +
         | `Position of position

     

       23
       23
       +
         | `Inset of inset_dir * Size.t

     

       24
       24
       +
         | `Z_index of int option

     

       25
       25
       +
       ]

     

       23
       26
        
       

     

       24
       27
        
       let to_class = function

     

       25
       25
       -
         | Position Static -> Css.make "static"

     

       26
       26
       -
         | Position Fixed -> Css.make "fixed"

     

       27
       27
       -
         | Position Absolute -> Css.make "absolute"

     

       28
       28
       -
         | Position Relative -> Css.make "relative"

     

       29
       29
       -
         | Position Sticky -> Css.make "sticky"

     

       30
       30
       -
         | Inset (All, size) -> Css.make (Printf.sprintf "inset-%s" (Size.to_string size))

     

       31
       31
       -
         | Inset (X, size) -> Css.make (Printf.sprintf "inset-x-%s" (Size.to_string size))

     

       32
       32
       -
         | Inset (Y, size) -> Css.make (Printf.sprintf "inset-y-%s" (Size.to_string size))

     

       33
       33
       -
         | Inset (Top, size) -> Css.make (Printf.sprintf "top-%s" (Size.to_string size))

     

       34
       34
       -
         | Inset (Right, size) -> Css.make (Printf.sprintf "right-%s" (Size.to_string size))

     

       35
       35
       -
         | Inset (Bottom, size) -> Css.make (Printf.sprintf "bottom-%s" (Size.to_string size))

     

       36
       36
       -
         | Inset (Left, size) -> Css.make (Printf.sprintf "left-%s" (Size.to_string size))

     

       37
       37
       -
         | Inset (Start, size) -> Css.make (Printf.sprintf "start-%s" (Size.to_string size))

     

       38
       38
       -
         | Inset (End, size) -> Css.make (Printf.sprintf "end-%s" (Size.to_string size))

     

       39
       39
       -
         | Z_index None -> Css.make "z-auto"

     

       40
       40
       -
         | Z_index (Some n) -> Css.make (Printf.sprintf "z-%d" n)

     

       28
       28
       +
         | `Position `Static -> Css.make "static"

     

       29
       29
       +
         | `Position `Fixed -> Css.make "fixed"

     

       30
       30
       +
         | `Position `Absolute -> Css.make "absolute"

     

       31
       31
       +
         | `Position `Relative -> Css.make "relative"

     

       32
       32
       +
         | `Position `Sticky -> Css.make "sticky"

     

       33
       33
       +
         | `Inset (`All, size) -> Css.make (Printf.sprintf "inset-%s" (Size.to_string size))

     

       34
       34
       +
         | `Inset (`X, size) -> Css.make (Printf.sprintf "inset-x-%s" (Size.to_string size))

     

       35
       35
       +
         | `Inset (`Y, size) -> Css.make (Printf.sprintf "inset-y-%s" (Size.to_string size))

     

       36
       36
       +
         | `Inset (`Top, size) -> Css.make (Printf.sprintf "top-%s" (Size.to_string size))

     

       37
       37
       +
         | `Inset (`Right, size) -> Css.make (Printf.sprintf "right-%s" (Size.to_string size))

     

       38
       38
       +
         | `Inset (`Bottom, size) -> Css.make (Printf.sprintf "bottom-%s" (Size.to_string size))

     

       39
       39
       +
         | `Inset (`Left, size) -> Css.make (Printf.sprintf "left-%s" (Size.to_string size))

     

       40
       40
       +
         | `Inset (`Start, size) -> Css.make (Printf.sprintf "start-%s" (Size.to_string size))

     

       41
       41
       +
         | `Inset (`End, size) -> Css.make (Printf.sprintf "end-%s" (Size.to_string size))

     

       42
       42
       +
         | `Z_index None -> Css.make "z-auto"

     

       43
       43
       +
         | `Z_index (Some n) -> Css.make (Printf.sprintf "z-%d" n)

     

       41
       44
        
       

     

       42
       42
       -
       let position p = Position p

     

       43
       43
       -
       let inset dir size = Inset (dir, size)

     

       44
       44
       -
       let z_index z = Z_index z

     

       45
       45
       +
       let position p = `Position p

     

       46
       46
       +
       let inset dir size = `Inset (dir, size)

     

       47
       47
       +
       let z_index z = `Z_index z

     

       45
       48
        
       

     

       46
       49
        
       let static = Css.make "static"

     

       47
       50
        
       let fixed = Css.make "fixed"

     
···

       49
       52
        
       let relative = Css.make "relative"

     

       50
       53
        
       let sticky = Css.make "sticky"

     

       51
       54
        
       

     

       52
       52
       -
       let top size = inset Top size

     

       53
       53
       -
       let right size = inset Right size

     

       54
       54
       -
       let bottom size = inset Bottom size

     

       55
       55
       -
       let left size = inset Left size

     

       56
       56
       -
       let inset_x size = inset X size

     

       57
       57
       -
       let inset_y size = inset Y size
     

       55
       55
       +
       let top size = inset `Top size

     

       56
       56
       +
       let right size = inset `Right size

     

       57
       57
       +
       let bottom size = inset `Bottom size

     

       58
       58
       +
       let left size = inset `Left size

     

       59
       59
       +
       let inset_x size = inset `X size

     

       60
       60
       +
       let inset_y size = inset `Y size

+18 -16

lib/tailwind/position.mli

···

       4
       4
        
       type t

     

       5
       5
        
       

     

       6
       6
        
       (** Position values *)

     

       7
       7
       -
       type position =

     

       8
       8
       -
         | Static

     

       9
       9
       -
         | Fixed

     

       10
       10
       -
         | Absolute

     

       11
       11
       -
         | Relative

     

       12
       12
       -
         | Sticky

     

       7
       7
       +
       type position = [

     

       8
       8
       +
         | `Static

     

       9
       9
       +
         | `Fixed

     

       10
       10
       +
         | `Absolute

     

       11
       11
       +
         | `Relative

     

       12
       12
       +
         | `Sticky

     

       13
       13
       +
       ]

     

       13
       14
        
       

     

       14
       15
        
       (** Inset direction *)

     

       15
       15
       -
       type inset_dir =

     

       16
       16
       -
         | All

     

       17
       17
       -
         | X

     

       18
       18
       -
         | Y

     

       19
       19
       -
         | Top

     

       20
       20
       -
         | Right

     

       21
       21
       -
         | Bottom

     

       22
       22
       -
         | Left

     

       23
       23
       -
         | Start

     

       24
       24
       -
         | End

     

       16
       16
       +
       type inset_dir = [

     

       17
       17
       +
         | `All

     

       18
       18
       +
         | `X

     

       19
       19
       +
         | `Y

     

       20
       20
       +
         | `Top

     

       21
       21
       +
         | `Right

     

       22
       22
       +
         | `Bottom

     

       23
       23
       +
         | `Left

     

       24
       24
       +
         | `Start

     

       25
       25
       +
         | `End

     

       26
       26
       +
       ]

     

       25
       27
        
       

     

       26
       28
        
       (** Set position type *)

     

       27
       29
        
       val position : position -> t

+37

lib/tailwind/reset.ml

···

       1
       1
       +
       (** Reset utilities for normalizing element styles *)

     

       2
       2
       +
       

     

       3
       3
       +
       let button =

     

       4
       4
       +
         Css.concat [

     

       5
       5
       +
           Css.make "border-0";

     

       6
       6
       +
           Css.make "bg-transparent"; 

     

       7
       7
       +
           Css.make "p-0";

     

       8
       8
       +
           Css.make "cursor-pointer";

     

       9
       9
       +
         ]

     

       10
       10
       +
       

     

       11
       11
       +
       let input =

     

       12
       12
       +
         Css.concat [

     

       13
       13
       +
           Css.make "border-0";

     

       14
       14
       +
           Css.make "outline-none";

     

       15
       15
       +
           Css.make "bg-transparent";

     

       16
       16
       +
           Css.make "appearance-none";

     

       17
       17
       +
         ]

     

       18
       18
       +
       

     

       19
       19
       +
       let list =

     

       20
       20
       +
         Css.concat [

     

       21
       21
       +
           Css.make "list-none";

     

       22
       22
       +
           Css.make "p-0";

     

       23
       23
       +
           Css.make "m-0";

     

       24
       24
       +
         ]

     

       25
       25
       +
       

     

       26
       26
       +
       let link =

     

       27
       27
       +
         Css.concat [

     

       28
       28
       +
           Css.make "text-inherit";

     

       29
       29
       +
           Css.make "no-underline";

     

       30
       30
       +
         ]

     

       31
       31
       +
       

     

       32
       32
       +
       let heading =

     

       33
       33
       +
         Css.concat [

     

       34
       34
       +
           Css.make "m-0";

     

       35
       35
       +
           Css.make "font-inherit";

     

       36
       36
       +
           Css.make "font-normal";

     

       37
       37
       +
         ]

+16

lib/tailwind/reset.mli

···

       1
       1
       +
       (** Reset utilities for normalizing element styles *)

     

       2
       2
       +
       

     

       3
       3
       +
       (** Remove default button styling *)

     

       4
       4
       +
       val button : Css.t

     

       5
       5
       +
       

     

       6
       6
       +
       (** Remove default input styling *)

     

       7
       7
       +
       val input : Css.t

     

       8
       8
       +
       

     

       9
       9
       +
       (** Remove default list styling *)

     

       10
       10
       +
       val list : Css.t

     

       11
       11
       +
       

     

       12
       12
       +
       (** Remove default link styling *)

     

       13
       13
       +
       val link : Css.t

     

       14
       14
       +
       

     

       15
       15
       +
       (** Remove default heading margins *)

     

       16
       16
       +
       val heading : Css.t

+51 -50

lib/tailwind/responsive.ml

···

       1
       1
       -
       type breakpoint = Sm | Md | Lg | Xl | Xl2

     

       2
       2
       -
       type container_size = Xs | Sm | Md | Lg | Xl | Xl2 | Xl3 | Xl4 | Xl5 | Xl6 | Xl7

     

       3
       3
       -
       type media_feature = Dark | Light | Motion_safe | Motion_reduce | Contrast_more | Contrast_less | Portrait | Landscape | Print | Screen

     

       1
       1
       +
       type breakpoint = [ `Sm | `Md | `Lg | `Xl | `Xl2 ]

     

       2
       2
       +
       type container_size = [ `Xs | `Sm | `Md | `Lg | `Xl | `Xl2 | `Xl3 | `Xl4 | `Xl5 | `Xl6 | `Xl7 ]

     

       3
       3
       +
       type media_feature = [ `Dark | `Light | `Motion_safe | `Motion_reduce | `Contrast_more | `Contrast_less | `Portrait | `Landscape | `Print | `Screen ]

     

       4
       4
        
       

     

       5
       5
       -
       type t =

     

       6
       6
       -
         | At_breakpoint of breakpoint * Css.t

     

       7
       7
       -
         | Max_breakpoint of breakpoint * Css.t

     

       8
       8
       -
         | At_container of container_size * Css.t

     

       9
       9
       -
         | Media of media_feature * Css.t

     

       10
       10
       -
         | Container of [`Normal | `Size | `Inline_size] option

     

       5
       5
       +
       type t = [

     

       6
       6
       +
         | `At_breakpoint of breakpoint * Css.t

     

       7
       7
       +
         | `Max_breakpoint of breakpoint * Css.t

     

       8
       8
       +
         | `At_container of container_size * Css.t

     

       9
       9
       +
         | `Media of media_feature * Css.t

     

       10
       10
       +
         | `Container of [`Normal | `Size | `Inline_size] option

     

       11
       11
       +
       ]

     

       11
       12
        
       

     

       12
       13
        
       let to_class = function

     

       13
       13
       -
         | At_breakpoint (Sm, classes) -> Css.make ("sm:" ^ Css.to_string classes)

     

       14
       14
       -
         | At_breakpoint (Md, classes) -> Css.make ("md:" ^ Css.to_string classes)

     

       15
       15
       -
         | At_breakpoint (Lg, classes) -> Css.make ("lg:" ^ Css.to_string classes)

     

       16
       16
       -
         | At_breakpoint (Xl, classes) -> Css.make ("xl:" ^ Css.to_string classes)

     

       17
       17
       -
         | At_breakpoint (Xl2, classes) -> Css.make ("2xl:" ^ Css.to_string classes)

     

       18
       18
       -
         | Max_breakpoint (Sm, classes) -> Css.make ("max-sm:" ^ Css.to_string classes)

     

       19
       19
       -
         | Max_breakpoint (Md, classes) -> Css.make ("max-md:" ^ Css.to_string classes)

     

       20
       20
       -
         | Max_breakpoint (Lg, classes) -> Css.make ("max-lg:" ^ Css.to_string classes)

     

       21
       21
       -
         | Max_breakpoint (Xl, classes) -> Css.make ("max-xl:" ^ Css.to_string classes)

     

       22
       22
       -
         | Max_breakpoint (Xl2, classes) -> Css.make ("max-2xl:" ^ Css.to_string classes)

     

       23
       23
       -
         | Media (Dark, classes) -> Css.make ("dark:" ^ Css.to_string classes)

     

       24
       24
       -
         | Media (Light, classes) -> Css.make ("light:" ^ Css.to_string classes)

     

       25
       25
       -
         | Media (Motion_safe, classes) -> Css.make ("motion-safe:" ^ Css.to_string classes)

     

       26
       26
       -
         | Media (Motion_reduce, classes) -> Css.make ("motion-reduce:" ^ Css.to_string classes)

     

       27
       27
       -
         | Media (Contrast_more, classes) -> Css.make ("contrast-more:" ^ Css.to_string classes)

     

       28
       28
       -
         | Media (Contrast_less, classes) -> Css.make ("contrast-less:" ^ Css.to_string classes)

     

       29
       29
       -
         | Media (Portrait, classes) -> Css.make ("portrait:" ^ Css.to_string classes)

     

       30
       30
       -
         | Media (Landscape, classes) -> Css.make ("landscape:" ^ Css.to_string classes)

     

       31
       31
       -
         | Media (Print, classes) -> Css.make ("print:" ^ Css.to_string classes)

     

       32
       32
       -
         | Media (Screen, classes) -> Css.make ("screen:" ^ Css.to_string classes)

     

       33
       33
       -
         | Container None -> Css.make "container"

     

       34
       34
       -
         | Container (Some `Normal) -> Css.make "container"

     

       35
       35
       -
         | Container (Some `Size) -> Css.make "@container"

     

       36
       36
       -
         | Container (Some `Inline_size) -> Css.make "@container/inline-size"

     

       37
       37
       -
         | At_container (size, classes) ->

     

       14
       14
       +
         | `At_breakpoint (`Sm, classes) -> Css.make ("sm:" ^ Css.to_string classes)

     

       15
       15
       +
         | `At_breakpoint (`Md, classes) -> Css.make ("md:" ^ Css.to_string classes)

     

       16
       16
       +
         | `At_breakpoint (`Lg, classes) -> Css.make ("lg:" ^ Css.to_string classes)

     

       17
       17
       +
         | `At_breakpoint (`Xl, classes) -> Css.make ("xl:" ^ Css.to_string classes)

     

       18
       18
       +
         | `At_breakpoint (`Xl2, classes) -> Css.make ("2xl:" ^ Css.to_string classes)

     

       19
       19
       +
         | `Max_breakpoint (`Sm, classes) -> Css.make ("max-sm:" ^ Css.to_string classes)

     

       20
       20
       +
         | `Max_breakpoint (`Md, classes) -> Css.make ("max-md:" ^ Css.to_string classes)

     

       21
       21
       +
         | `Max_breakpoint (`Lg, classes) -> Css.make ("max-lg:" ^ Css.to_string classes)

     

       22
       22
       +
         | `Max_breakpoint (`Xl, classes) -> Css.make ("max-xl:" ^ Css.to_string classes)

     

       23
       23
       +
         | `Max_breakpoint (`Xl2, classes) -> Css.make ("max-2xl:" ^ Css.to_string classes)

     

       24
       24
       +
         | `Media (`Dark, classes) -> Css.make ("dark:" ^ Css.to_string classes)

     

       25
       25
       +
         | `Media (`Light, classes) -> Css.make ("light:" ^ Css.to_string classes)

     

       26
       26
       +
         | `Media (`Motion_safe, classes) -> Css.make ("motion-safe:" ^ Css.to_string classes)

     

       27
       27
       +
         | `Media (`Motion_reduce, classes) -> Css.make ("motion-reduce:" ^ Css.to_string classes)

     

       28
       28
       +
         | `Media (`Contrast_more, classes) -> Css.make ("contrast-more:" ^ Css.to_string classes)

     

       29
       29
       +
         | `Media (`Contrast_less, classes) -> Css.make ("contrast-less:" ^ Css.to_string classes)

     

       30
       30
       +
         | `Media (`Portrait, classes) -> Css.make ("portrait:" ^ Css.to_string classes)

     

       31
       31
       +
         | `Media (`Landscape, classes) -> Css.make ("landscape:" ^ Css.to_string classes)

     

       32
       32
       +
         | `Media (`Print, classes) -> Css.make ("print:" ^ Css.to_string classes)

     

       33
       33
       +
         | `Media (`Screen, classes) -> Css.make ("screen:" ^ Css.to_string classes)

     

       34
       34
       +
         | `Container None -> Css.make "container"

     

       35
       35
       +
         | `Container (Some `Normal) -> Css.make "container"

     

       36
       36
       +
         | `Container (Some `Size) -> Css.make "@container"

     

       37
       37
       +
         | `Container (Some `Inline_size) -> Css.make "@container/inline-size"

     

       38
       38
       +
         | `At_container (size, classes) ->

     

       38
       39
        
           let size_str = match size with

     

       39
       39
       -
             | Xs -> "@xs"

     

       40
       40
       -
             | Sm -> "@sm" 

     

       41
       41
       -
             | Md -> "@md"

     

       42
       42
       -
             | Lg -> "@lg"

     

       43
       43
       -
             | Xl -> "@xl"

     

       44
       44
       -
             | Xl2 -> "@2xl"

     

       45
       45
       -
             | Xl3 -> "@3xl"

     

       46
       46
       -
             | Xl4 -> "@4xl"

     

       47
       47
       -
             | Xl5 -> "@5xl"

     

       48
       48
       -
             | Xl6 -> "@6xl"

     

       49
       49
       -
             | Xl7 -> "@7xl"

     

       40
       40
       +
             | `Xs -> "@xs"

     

       41
       41
       +
             | `Sm -> "@sm" 

     

       42
       42
       +
             | `Md -> "@md"

     

       43
       43
       +
             | `Lg -> "@lg"

     

       44
       44
       +
             | `Xl -> "@xl"

     

       45
       45
       +
             | `Xl2 -> "@2xl"

     

       46
       46
       +
             | `Xl3 -> "@3xl"

     

       47
       47
       +
             | `Xl4 -> "@4xl"

     

       48
       48
       +
             | `Xl5 -> "@5xl"

     

       49
       49
       +
             | `Xl6 -> "@6xl"

     

       50
       50
       +
             | `Xl7 -> "@7xl"

     

       50
       51
        
           in

     

       51
       52
        
           Css.make (size_str ^ ":" ^ Css.to_string classes)

     

       52
       53
        
       

     

       53
       53
       -
       let at_breakpoint bp classes = At_breakpoint (bp, classes)

     

       54
       54
       -
       let max_breakpoint bp classes = Max_breakpoint (bp, classes)

     

       55
       55
       -
       let at_container size classes = At_container (size, classes)

     

       56
       56
       -
       let media feature classes = Media (feature, classes)

     

       57
       57
       -
       let container container_type = Container container_type

     

       54
       54
       +
       let at_breakpoint bp classes = `At_breakpoint (bp, classes)

     

       55
       55
       +
       let max_breakpoint bp classes = `Max_breakpoint (bp, classes)

     

       56
       56
       +
       let at_container size classes = `At_container (size, classes)

     

       57
       57
       +
       let media feature classes = `Media (feature, classes)

     

       58
       58
       +
       let container container_type = `Container container_type

     

       58
       59
        
       

     

       59
       60
        
       let apply responsive_t classes = 

     

       60
       61
        
         Css.combine (to_class responsive_t) classes

+32 -29

lib/tailwind/responsive.mli

···

       4
       4
        
       type t

     

       5
       5
        
       

     

       6
       6
        
       (** Breakpoint sizes *)

     

       7
       7
       -
       type breakpoint =

     

       8
       8
       -
         | Sm  (** 640px *)

     

       9
       9
       -
         | Md  (** 768px *)

     

       10
       10
       -
         | Lg  (** 1024px *)

     

       11
       11
       -
         | Xl  (** 1280px *)

     

       12
       12
       -
         | Xl2 (** 1536px *)

     

       7
       7
       +
       type breakpoint = [

     

       8
       8
       +
         | `Sm  (** 640px *)

     

       9
       9
       +
         | `Md  (** 768px *)

     

       10
       10
       +
         | `Lg  (** 1024px *)

     

       11
       11
       +
         | `Xl  (** 1280px *)

     

       12
       12
       +
         | `Xl2 (** 1536px *)

     

       13
       13
       +
       ]

     

       13
       14
        
       

     

       14
       15
        
       (** Container query sizes *)

     

       15
       15
       -
       type container_size =

     

       16
       16
       -
         | Xs  (** 20rem *)

     

       17
       17
       -
         | Sm  (** 24rem *)

     

       18
       18
       -
         | Md  (** 28rem *)

     

       19
       19
       -
         | Lg  (** 32rem *)

     

       20
       20
       -
         | Xl  (** 36rem *)

     

       21
       21
       -
         | Xl2 (** 42rem *)

     

       22
       22
       -
         | Xl3 (** 48rem *)

     

       23
       23
       -
         | Xl4 (** 56rem *)

     

       24
       24
       -
         | Xl5 (** 64rem *)

     

       25
       25
       -
         | Xl6 (** 72rem *)

     

       26
       26
       -
         | Xl7 (** 80rem *)

     

       16
       16
       +
       type container_size = [

     

       17
       17
       +
         | `Xs  (** 20rem *)

     

       18
       18
       +
         | `Sm  (** 24rem *)

     

       19
       19
       +
         | `Md  (** 28rem *)

     

       20
       20
       +
         | `Lg  (** 32rem *)

     

       21
       21
       +
         | `Xl  (** 36rem *)

     

       22
       22
       +
         | `Xl2 (** 42rem *)

     

       23
       23
       +
         | `Xl3 (** 48rem *)

     

       24
       24
       +
         | `Xl4 (** 56rem *)

     

       25
       25
       +
         | `Xl5 (** 64rem *)

     

       26
       26
       +
         | `Xl6 (** 72rem *)

     

       27
       27
       +
         | `Xl7 (** 80rem *)

     

       28
       28
       +
       ]

     

       27
       29
        
       

     

       28
       30
        
       (** Media features *)

     

       29
       29
       -
       type media_feature =

     

       30
       30
       -
         | Dark

     

       31
       31
       -
         | Light

     

       32
       32
       -
         | Motion_safe

     

       33
       33
       -
         | Motion_reduce

     

       34
       34
       -
         | Contrast_more

     

       35
       35
       -
         | Contrast_less

     

       36
       36
       -
         | Portrait

     

       37
       37
       -
         | Landscape

     

       38
       38
       -
         | Print

     

       39
       39
       -
         | Screen

     

       31
       31
       +
       type media_feature = [

     

       32
       32
       +
         | `Dark

     

       33
       33
       +
         | `Light

     

       34
       34
       +
         | `Motion_safe

     

       35
       35
       +
         | `Motion_reduce

     

       36
       36
       +
         | `Contrast_more

     

       37
       37
       +
         | `Contrast_less

     

       38
       38
       +
         | `Portrait

     

       39
       39
       +
         | `Landscape

     

       40
       40
       +
         | `Print

     

       41
       41
       +
         | `Screen

     

       42
       42
       +
       ]

     

       40
       43
        
       

     

       41
       44
        
       (** Apply classes at a breakpoint *)

     

       42
       45
        
       val at_breakpoint : breakpoint -> Css.t -> t

+29 -30

lib/tailwind/size.ml

···

       1
       1
       -
       type t =

     

       2
       2
       -
         | Px

     

       3
       3
       -
         | Zero

     

       4
       4
       -
         | Auto

     

       5
       5
       -
         | Rem of float

     

       6
       6
       -
         | Fraction of int * int

     

       7
       7
       -
         | Full

     

       8
       8
       -
         | Screen

     

       9
       9
       -
         | Min

     

       10
       10
       -
         | Max

     

       11
       11
       -
         | Fit

     

       12
       12
       -
         | Viewport of [`W | `H] * [`S | `L | `D]

     

       1
       1
       +
       type t = [ `Px

     

       2
       2
       +
                | `Zero

     

       3
       3
       +
                | `Auto

     

       4
       4
       +
                | `Rem of float

     

       5
       5
       +
                | `Fraction of int * int

     

       6
       6
       +
                | `Full

     

       7
       7
       +
                | `Screen

     

       8
       8
       +
                | `Min

     

       9
       9
       +
                | `Max

     

       10
       10
       +
                | `Fit

     

       11
       11
       +
                | `Viewport of [`W | `H] * [`S | `L | `D] ]

     

       13
       12
        
       

     

       14
       13
        
       let to_string = function

     

       15
       15
       -
         | Px -> "px"

     

       16
       16
       -
         | Zero -> "0"

     

       17
       17
       -
         | Auto -> "auto"

     

       18
       18
       -
         | Rem f ->

     

       14
       14
       +
         | `Px -> "px"

     

       15
       15
       +
         | `Zero -> "0"

     

       16
       16
       +
         | `Auto -> "auto"

     

       17
       17
       +
         | `Rem f ->

     

       19
       18
        
             let s = string_of_float f in

     

       20
       19
        
             if String.ends_with ~suffix:".0" s then

     

       21
       20
        
               String.sub s 0 (String.length s - 2)

     

       22
       21
        
             else if String.ends_with ~suffix:"." s then

     

       23
       22
        
               String.sub s 0 (String.length s - 1)

     

       24
       23
        
             else s

     

       25
       25
       -
         | Fraction (n, d) -> Printf.sprintf "%d/%d" n d

     

       26
       26
       -
         | Full -> "full"

     

       27
       27
       -
         | Screen -> "screen"

     

       28
       28
       -
         | Min -> "min"

     

       29
       29
       -
         | Max -> "max"

     

       30
       30
       -
         | Fit -> "fit"

     

       31
       31
       -
         | Viewport (dir, size) ->

     

       24
       24
       +
         | `Fraction (n, d) -> Printf.sprintf "%d/%d" n d

     

       25
       25
       +
         | `Full -> "full"

     

       26
       26
       +
         | `Screen -> "screen"

     

       27
       27
       +
         | `Min -> "min"

     

       28
       28
       +
         | `Max -> "max"

     

       29
       29
       +
         | `Fit -> "fit"

     

       30
       30
       +
         | `Viewport (dir, size) ->

     

       32
       31
        
             let d = match dir with `W -> "w" | `H -> "h" in

     

       33
       32
        
             let s = match size with `S -> "s" | `L -> "l" | `D -> "d" in

     

       34
       33
        
             Printf.sprintf "%sv%s" s d

     

       35
       34
        
       

     

       36
       36
       -
       let px = Px

     

       37
       37
       -
       let zero = Zero

     

       38
       38
       -
       let auto = Auto

     

       39
       39
       -
       let full = Full

     

       40
       40
       -
       let screen = Screen

     

       35
       35
       +
       let px = `Px

     

       36
       36
       +
       let zero = `Zero

     

       37
       37
       +
       let auto = `Auto

     

       38
       38
       +
       let full = `Full

     

       39
       39
       +
       let screen = `Screen

     

       41
       40
        
       

     

       42
       42
       -
       let rem f = Rem f

     

       41
       41
       +
       let rem f = `Rem f

     

       43
       42
        
       

     

       44
       44
       -
       let fraction n d = Fraction (n, d)
     

       43
       43
       +
       let fraction n d = `Fraction (n, d)

+11 -12

lib/tailwind/size.mli

···

       1
       1
        
       (** Size and spacing units *)

     

       2
       2
        
       

     

       3
       3
        
       (** Represents a size value in Tailwind *)

     

       4
       4
       -
       type t =

     

       5
       5
       -
         | Px (** 1px *)

     

       6
       6
       -
         | Zero (** 0 *)

     

       7
       7
       -
         | Auto (** auto *)

     

       8
       8
       -
         | Rem of float (** Rem-based sizes: 0.5, 1.0, 1.5, etc. *)

     

       9
       9
       -
         | Fraction of int * int (** Fractions: 1/2, 1/3, 2/3, etc. *)

     

       10
       10
       -
         | Full (** 100% *)

     

       11
       11
       -
         | Screen (** 100vw or 100vh *)

     

       12
       12
       -
         | Min (** min-content *)

     

       13
       13
       -
         | Max (** max-content *)

     

       14
       14
       -
         | Fit (** fit-content *)

     

       15
       15
       -
         | Viewport of [`W | `H] * [`S | `L | `D] (** Viewport units: svw, lvh, dvh, etc. *)

     

       4
       4
       +
       type t = [ `Px (** 1px *)

     

       5
       5
       +
                | `Zero (** 0 *)

     

       6
       6
       +
                | `Auto (** auto *)

     

       7
       7
       +
                | `Rem of float (** Rem-based sizes: 0.5, 1.0, 1.5, etc. *)

     

       8
       8
       +
                | `Fraction of int * int (** Fractions: 1/2, 1/3, 2/3, etc. *)

     

       9
       9
       +
                | `Full (** 100% *)

     

       10
       10
       +
                | `Screen (** 100vw or 100vh *)

     

       11
       11
       +
                | `Min (** min-content *)

     

       12
       12
       +
                | `Max (** max-content *)

     

       13
       13
       +
                | `Fit (** fit-content *)

     

       14
       14
       +
                | `Viewport of [`W | `H] * [`S | `L | `D] (** Viewport units: svw, lvh, dvh, etc. *) ]

     

       16
       15
        
       

     

       17
       16
        
       (** Convert a size to its Tailwind class suffix *)

     

       18
       17
        
       val to_string : t -> string

+34 -33

lib/tailwind/spacing.ml

···

       1
       1
       -
       type direction =

     

       2
       2
       -
         | All

     

       3
       3
       -
         | X

     

       4
       4
       -
         | Y

     

       5
       5
       -
         | Top

     

       6
       6
       -
         | Right

     

       7
       7
       -
         | Bottom

     

       8
       8
       -
         | Left

     

       9
       9
       -
         | Start

     

       10
       10
       -
         | End

     

       1
       1
       +
       type direction = [

     

       2
       2
       +
         | `All

     

       3
       3
       +
         | `X

     

       4
       4
       +
         | `Y

     

       5
       5
       +
         | `Top

     

       6
       6
       +
         | `Right

     

       7
       7
       +
         | `Bottom

     

       8
       8
       +
         | `Left

     

       9
       9
       +
         | `Start

     

       10
       10
       +
         | `End

     

       11
       11
       +
       ]

     

       11
       12
        
       

     

       12
       13
        
       type t = {

     

       13
       14
        
         property: string;

     
···

       16
       17
        
       }

     

       17
       18
        
       

     

       18
       19
        
       let direction_to_string = function

     

       19
       19
       -
         | All -> ""

     

       20
       20
       -
         | X -> "x"

     

       21
       21
       -
         | Y -> "y"

     

       22
       22
       -
         | Top -> "t"

     

       23
       23
       -
         | Right -> "r"

     

       24
       24
       -
         | Bottom -> "b"

     

       25
       25
       -
         | Left -> "l"

     

       26
       26
       -
         | Start -> "s"

     

       27
       27
       -
         | End -> "e"

     

       20
       20
       +
         | `All -> ""

     

       21
       21
       +
         | `X -> "x"

     

       22
       22
       +
         | `Y -> "y"

     

       23
       23
       +
         | `Top -> "t"

     

       24
       24
       +
         | `Right -> "r"

     

       25
       25
       +
         | `Bottom -> "b"

     

       26
       26
       +
         | `Left -> "l"

     

       27
       27
       +
         | `Start -> "s"

     

       28
       28
       +
         | `End -> "e"

     

       28
       29
        
       

     

       29
       30
        
       let make_spacing property direction size =

     

       30
       31
        
         let dir_str = direction_to_string direction in

     
···

       60
       61
        
         Css.make class_name

     

       61
       62
        
       

     

       62
       63
        
       (* Shorthand constructors *)

     

       63
       63
       -
       let p size = padding All size

     

       64
       64
       -
       let px size = padding X size

     

       65
       65
       -
       let py size = padding Y size

     

       66
       66
       -
       let pt size = padding Top size

     

       67
       67
       -
       let pr size = padding Right size

     

       68
       68
       -
       let pb size = padding Bottom size

     

       69
       69
       -
       let pl size = padding Left size

     

       64
       64
       +
       let p size = padding `All size

     

       65
       65
       +
       let px size = padding `X size

     

       66
       66
       +
       let py size = padding `Y size

     

       67
       67
       +
       let pt size = padding `Top size

     

       68
       68
       +
       let pr size = padding `Right size

     

       69
       69
       +
       let pb size = padding `Bottom size

     

       70
       70
       +
       let pl size = padding `Left size

     

       70
       71
        
       

     

       71
       71
       -
       let m size = margin All size

     

       72
       72
       -
       let mx size = margin X size

     

       73
       73
       -
       let my size = margin Y size

     

       74
       74
       -
       let mt size = margin Top size

     

       75
       75
       -
       let mr size = margin Right size

     

       76
       76
       -
       let mb size = margin Bottom size

     

       77
       77
       -
       let ml size = margin Left size
     

       72
       72
       +
       let m size = margin `All size

     

       73
       73
       +
       let mx size = margin `X size

     

       74
       74
       +
       let my size = margin `Y size

     

       75
       75
       +
       let mt size = margin `Top size

     

       76
       76
       +
       let mr size = margin `Right size

     

       77
       77
       +
       let mb size = margin `Bottom size

     

       78
       78
       +
       let ml size = margin `Left size

+11 -10

lib/tailwind/spacing.mli

···

       4
       4
        
       type t

     

       5
       5
        
       

     

       6
       6
        
       (** Direction for spacing *)

     

       7
       7
       -
       type direction =

     

       8
       8
       -
         | All (** All sides *)

     

       9
       9
       -
         | X (** Horizontal (left and right) *)

     

       10
       10
       -
         | Y (** Vertical (top and bottom) *)

     

       11
       11
       -
         | Top (** Top only *)

     

       12
       12
       -
         | Right (** Right only *)

     

       13
       13
       -
         | Bottom (** Bottom only *)

     

       14
       14
       -
         | Left (** Left only *)

     

       15
       15
       -
         | Start (** Inline start (logical) *)

     

       16
       16
       -
         | End (** Inline end (logical) *)

     

       7
       7
       +
       type direction = [

     

       8
       8
       +
         | `All (** All sides *)

     

       9
       9
       +
         | `X (** Horizontal (left and right) *)

     

       10
       10
       +
         | `Y (** Vertical (top and bottom) *)

     

       11
       11
       +
         | `Top (** Top only *)

     

       12
       12
       +
         | `Right (** Right only *)

     

       13
       13
       +
         | `Bottom (** Bottom only *)

     

       14
       14
       +
         | `Left (** Left only *)

     

       15
       15
       +
         | `Start (** Inline start (logical) *)

     

       16
       16
       +
         | `End (** Inline end (logical) *)

     

       17
       17
       +
       ]

     

       17
       18
        
       

     

       18
       19
        
       (** Create padding classes *)

     

       19
       20
        
       val padding : direction -> Size.t -> t

+24 -72

lib/tailwind/tailwind.ml

···

       14
       14
        
       module Effects = Effects

     

       15
       15
        
       module Responsive = Responsive

     

       16
       16
        
       module Variants = Variants

     

       17
       17
       +
       module Reset = Reset

     

       18
       18
       +
       module Patterns = Patterns

     

       19
       19
       +
       

     

       20
       20
       +
       (* Convenience aliases *)

     

       21
       21
       +
       module C = Color

     

       22
       22
       +
       module S = Spacing

     

       23
       23
       +
       module E = Effects

     

       24
       24
       +
       module T = Typography

     

       25
       25
       +
       module F = Flexbox

     

       26
       26
       +
       module G = Grid

     

       27
       27
       +
       module P = Patterns

     

       28
       28
       +
       module R = Reset

     

       17
       29
        
       

     

       18
       30
        
       let tw classes = Css.concat classes

     

       19
       31
        
       

     
···

       24
       36
        
       

     

       25
       37
        
       let to_string = Css.to_string

     

       26
       38
        
       

     

       27
       27
       -
       (* Common utility patterns *)

     

       28
       28
       -
       let flex_center = 

     

       29
       29
       -
         tw [

     

       30
       30
       -
           Display.to_class Flex;

     

       31
       31
       -
           Flexbox.(to_class (justify Center));

     

       32
       32
       -
           Flexbox.(to_class (align_items Center));

     

       33
       33
       -
         ]

     

       34
       34
       -
       

     

       35
       35
       -
       let absolute_center =

     

       36
       36
       -
         tw [

     

       37
       37
       -
           Css.make "absolute";

     

       38
       38
       -
           Css.make "top-1/2";

     

       39
       39
       -
           Css.make "left-1/2";

     

       40
       40
       -
           Css.make "-translate-x-1/2";

     

       41
       41
       -
           Css.make "-translate-y-1/2";

     

       42
       42
       -
         ]

     

       39
       39
       +
       (* Core utility functions *)

     

       43
       40
        
       

     

       44
       41
        
       let sr_only =

     

       45
       42
        
         tw [

     
···

       62
       59
        
         in

     

       63
       60
        
         tw (base_classes @ color_class @ width_class)

     

       64
       61
        
       

     

       65
       65
       -
       let container ?center () =

     

       66
       66
       -
         let base = Css.make "container" in

     

       67
       67
       -
         let center_class = match center with

     

       68
       68
       -
           | Some true -> Css.make "mx-auto"

     

       69
       69
       -
           | _ -> Css.empty

     

       70
       70
       -
         in

     

       71
       71
       -
         Css.combine base center_class

     

       72
       72
       -
       

     

       73
       73
       -
       let button_reset =

     

       74
       74
       -
         tw [

     

       75
       75
       -
           Css.make "border-0";

     

       76
       76
       -
           Css.make "bg-transparent"; 

     

       77
       77
       -
           Css.make "p-0";

     

       78
       78
       -
           Css.make "cursor-pointer";

     

       79
       79
       -
         ]

     

       80
       80
       -
       

     

       81
       81
       -
       let input_reset =

     

       82
       82
       -
         tw [

     

       83
       83
       -
           Css.make "border-0";

     

       84
       84
       -
           Css.make "outline-none";

     

       85
       85
       -
           Css.make "bg-transparent";

     

       86
       86
       -
           Css.make "appearance-none";

     

       87
       87
       -
         ]

     

       88
       88
       -
       

     

       89
       89
       -
       let transition transition_type =

     

       90
       90
       -
         let class_name = match transition_type with

     

       91
       91
       -
           | `None -> "transition-none"

     

       92
       92
       -
           | `All -> "transition-all"

     

       93
       93
       -
           | `Colors -> "transition-colors"

     

       94
       94
       -
           | `Opacity -> "transition-opacity"

     

       95
       95
       -
           | `Shadow -> "transition-shadow"

     

       96
       96
       -
           | `Transform -> "transition-transform"

     

       97
       97
       -
         in

     

       98
       98
       -
         Css.make class_name

     

       99
       99
       -
       

     

       100
       100
       -
       let duration ms = Css.make (Printf.sprintf "duration-%d" ms)

     

       101
       101
       -
       

     

       102
       102
       -
       let ease timing =

     

       103
       103
       -
         let class_name = match timing with

     

       104
       104
       -
           | `Linear -> "ease-linear"

     

       105
       105
       -
           | `In -> "ease-in"

     

       106
       106
       -
           | `Out -> "ease-out"

     

       107
       107
       -
           | `In_out -> "ease-in-out"

     

       108
       108
       -
         in

     

       109
       109
       -
         Css.make class_name

     

       110
       62
        
       

     

       111
       63
        
       module V4 = struct

     

       112
       64
        
         let container_query size classes =

     

       113
       65
        
           let container_class = match size with

     

       114
       114
       -
             | Responsive.Xs -> "@xs:"

     

       115
       115
       -
             | Responsive.Sm -> "@sm:"

     

       116
       116
       -
             | Responsive.Md -> "@md:"

     

       117
       117
       -
             | Responsive.Lg -> "@lg:"

     

       118
       118
       -
             | Responsive.Xl -> "@xl:"

     

       119
       119
       -
             | Responsive.Xl2 -> "@2xl:"

     

       120
       120
       -
             | Responsive.Xl3 -> "@3xl:"

     

       121
       121
       -
             | Responsive.Xl4 -> "@4xl:"

     

       122
       122
       -
             | Responsive.Xl5 -> "@5xl:"

     

       123
       123
       -
             | Responsive.Xl6 -> "@6xl:"

     

       124
       124
       -
             | Responsive.Xl7 -> "@7xl:"

     

       66
       66
       +
             | `Xs -> "@xs:"

     

       67
       67
       +
             | `Sm -> "@sm:"

     

       68
       68
       +
             | `Md -> "@md:"

     

       69
       69
       +
             | `Lg -> "@lg:"

     

       70
       70
       +
             | `Xl -> "@xl:"

     

       71
       71
       +
             | `Xl2 -> "@2xl:"

     

       72
       72
       +
             | `Xl3 -> "@3xl:"

     

       73
       73
       +
             | `Xl4 -> "@4xl:"

     

       74
       74
       +
             | `Xl5 -> "@5xl:"

     

       75
       75
       +
             | `Xl6 -> "@6xl:"

     

       76
       76
       +
             | `Xl7 -> "@7xl:"

     

       125
       77
        
           in

     

       126
       78
        
           Css.make (container_class ^ Css.to_string classes)

     

       127
       79

+13 -25

lib/tailwind/tailwind.mli

···

       17
       17
        
       module Effects = Effects

     

       18
       18
        
       module Responsive = Responsive

     

       19
       19
        
       module Variants = Variants

     

       20
       20
       +
       module Reset = Reset

     

       21
       21
       +
       module Patterns = Patterns

     

       22
       22
       +
       

     

       23
       23
       +
       (** Convenience aliases for shorter imports *)

     

       24
       24
       +
       module C = Color

     

       25
       25
       +
       module S = Spacing

     

       26
       26
       +
       module E = Effects

     

       27
       27
       +
       module T = Typography

     

       28
       28
       +
       module F = Flexbox

     

       29
       29
       +
       module G = Grid

     

       30
       30
       +
       module P = Patterns

     

       31
       31
       +
       module R = Reset

     

       20
       32
        
       

     

       21
       33
        
       (** Combine multiple CSS classes *)

     

       22
       34
        
       val tw : Css.t list -> Css.t

     
···

       27
       39
        
       (** Convert CSS classes to string *)

     

       28
       40
        
       val to_string : t -> string

     

       29
       41
        
       

     

       30
       30
       -
       (** Common utility patterns *)

     

       31
       31
       -
       

     

       32
       32
       -
       (** Centers content using flexbox *)

     

       33
       33
       -
       val flex_center : t

     

       34
       34
       -
       

     

       35
       35
       -
       (** Centers content absolutely *)

     

       36
       36
       -
       val absolute_center : t

     

       42
       42
       +
       (** Core utility functions *)

     

       37
       43
        
       

     

       38
       44
        
       (** Screen reader only (visually hidden but accessible) *)

     

       39
       45
        
       val sr_only : t

     

       40
       46
        
       

     

       41
       47
        
       (** Focus ring utility *)

     

       42
       48
        
       val focus_ring : ?color:Color.t -> ?width:Effects.border_width -> unit -> t

     

       43
       43
       -
       

     

       44
       44
       -
       (** Container with responsive max-widths *)

     

       45
       45
       -
       val container : ?center:bool -> unit -> t

     

       46
       46
       -
       

     

       47
       47
       -
       (** Reset styles for buttons *)

     

       48
       48
       -
       val button_reset : t

     

       49
       49
       -
       

     

       50
       50
       -
       (** Reset styles for inputs *)

     

       51
       51
       -
       val input_reset : t

     

       52
       52
       -
       

     

       53
       53
       -
       (** Common transition utilities *)

     

       54
       54
       -
       val transition : [`None | `All | `Colors | `Opacity | `Shadow | `Transform] -> t

     

       55
       55
       -
       

     

       56
       56
       -
       (** Duration utilities (in ms) *)

     

       57
       57
       -
       val duration : int -> t

     

       58
       58
       -
       

     

       59
       59
       -
       (** Ease timing functions *)

     

       60
       60
       -
       val ease : [`Linear | `In | `Out | `In_out] -> t

     

       61
       49
        
       

     

       62
       50
        
       (** V4 specific features *)

     

       63
       51
        
       module V4 : sig

+86 -85

lib/tailwind/typography.ml

···

       1
       1
       -
       type font_family = Sans | Serif | Mono

     

       2
       2
       -
       type font_size = Xs | Sm | Base | Lg | Xl | Xl2 | Xl3 | Xl4 | Xl5 | Xl6 | Xl7 | Xl8 | Xl9

     

       3
       3
       -
       type font_weight = Thin | Extralight | Light | Normal | Medium | Semibold | Bold | Extrabold | Black

     

       4
       4
       -
       type font_style = Italic | Not_italic

     

       5
       5
       -
       type letter_spacing = Tighter | Tight | Normal | Wide | Wider | Widest

     

       6
       6
       -
       type line_height = None | Tight | Snug | Normal | Relaxed | Loose | Rem of float

     

       7
       7
       -
       type text_align = Left | Center | Right | Justify | Start | End

     

       8
       8
       -
       type text_decoration = Underline | Overline | Line_through | No_underline

     

       9
       9
       -
       type text_transform = Uppercase | Lowercase | Capitalize | Normal_case

     

       1
       1
       +
       type font_family = [ `Sans | `Serif | `Mono ]

     

       2
       2
       +
       type font_size = [ `Xs | `Sm | `Base | `Lg | `Xl | `Xl2 | `Xl3 | `Xl4 | `Xl5 | `Xl6 | `Xl7 | `Xl8 | `Xl9 ]

     

       3
       3
       +
       type font_weight = [ `Thin | `Extralight | `Light | `Normal | `Medium | `Semibold | `Bold | `Extrabold | `Black ]

     

       4
       4
       +
       type font_style = [ `Italic | `Not_italic ]

     

       5
       5
       +
       type letter_spacing = [ `Tighter | `Tight | `Normal | `Wide | `Wider | `Widest ]

     

       6
       6
       +
       type line_height = [ `None | `Tight | `Snug | `Normal | `Relaxed | `Loose | `Rem of float ]

     

       7
       7
       +
       type text_align = [ `Left | `Center | `Right | `Justify | `Start | `End ]

     

       8
       8
       +
       type text_decoration = [ `Underline | `Overline | `Line_through | `No_underline ]

     

       9
       9
       +
       type text_transform = [ `Uppercase | `Lowercase | `Capitalize | `Normal_case ]

     

       10
       10
        
       

     

       11
       11
       -
       type t = 

     

       12
       12
       -
         | Font_family of font_family

     

       13
       13
       -
         | Font_size of font_size  

     

       14
       14
       -
         | Font_weight of font_weight

     

       15
       15
       -
         | Font_style of font_style

     

       16
       16
       -
         | Letter_spacing of letter_spacing

     

       17
       17
       -
         | Line_height of line_height

     

       18
       18
       -
         | Text_align of text_align

     

       19
       19
       -
         | Text_decoration of text_decoration

     

       20
       20
       -
         | Text_transform of text_transform

     

       21
       21
       -
         | Text_color of Color.t

     

       11
       11
       +
       type t = [

     

       12
       12
       +
         | `Font_family of font_family

     

       13
       13
       +
         | `Font_size of font_size  

     

       14
       14
       +
         | `Font_weight of font_weight

     

       15
       15
       +
         | `Font_style of font_style

     

       16
       16
       +
         | `Letter_spacing of letter_spacing

     

       17
       17
       +
         | `Line_height of line_height

     

       18
       18
       +
         | `Text_align of text_align

     

       19
       19
       +
         | `Text_decoration of text_decoration

     

       20
       20
       +
         | `Text_transform of text_transform

     

       21
       21
       +
         | `Text_color of Color.t

     

       22
       22
       +
       ]

     

       22
       23
        
       

     

       23
       24
        
       let to_class = function

     

       24
       24
       -
         | Font_family Sans -> Css.make "font-sans"

     

       25
       25
       -
         | Font_family Serif -> Css.make "font-serif"

     

       26
       26
       -
         | Font_family Mono -> Css.make "font-mono"

     

       27
       27
       -
         | Font_size Xs -> Css.make "text-xs"

     

       28
       28
       -
         | Font_size Sm -> Css.make "text-sm"

     

       29
       29
       -
         | Font_size Base -> Css.make "text-base"

     

       30
       30
       -
         | Font_size Lg -> Css.make "text-lg"

     

       31
       31
       -
         | Font_size Xl -> Css.make "text-xl"

     

       32
       32
       -
         | Font_size Xl2 -> Css.make "text-2xl"

     

       33
       33
       -
         | Font_size Xl3 -> Css.make "text-3xl"

     

       34
       34
       -
         | Font_size Xl4 -> Css.make "text-4xl"

     

       35
       35
       -
         | Font_size Xl5 -> Css.make "text-5xl"

     

       36
       36
       -
         | Font_size Xl6 -> Css.make "text-6xl"

     

       37
       37
       -
         | Font_size Xl7 -> Css.make "text-7xl"

     

       38
       38
       -
         | Font_size Xl8 -> Css.make "text-8xl"

     

       39
       39
       -
         | Font_size Xl9 -> Css.make "text-9xl"

     

       40
       40
       -
         | Font_weight Thin -> Css.make "font-thin"

     

       41
       41
       -
         | Font_weight Extralight -> Css.make "font-extralight"

     

       42
       42
       -
         | Font_weight Light -> Css.make "font-light"

     

       43
       43
       -
         | Font_weight Normal -> Css.make "font-normal"

     

       44
       44
       -
         | Font_weight Medium -> Css.make "font-medium"

     

       45
       45
       -
         | Font_weight Semibold -> Css.make "font-semibold"

     

       46
       46
       -
         | Font_weight Bold -> Css.make "font-bold"

     

       47
       47
       -
         | Font_weight Extrabold -> Css.make "font-extrabold"

     

       48
       48
       -
         | Font_weight Black -> Css.make "font-black"

     

       49
       49
       -
         | Font_style Italic -> Css.make "italic"

     

       50
       50
       -
         | Font_style Not_italic -> Css.make "not-italic"

     

       51
       51
       -
         | Letter_spacing Tighter -> Css.make "tracking-tighter"

     

       52
       52
       -
         | Letter_spacing Tight -> Css.make "tracking-tight"

     

       53
       53
       -
         | Letter_spacing Normal -> Css.make "tracking-normal"

     

       54
       54
       -
         | Letter_spacing Wide -> Css.make "tracking-wide"

     

       55
       55
       -
         | Letter_spacing Wider -> Css.make "tracking-wider"

     

       56
       56
       -
         | Letter_spacing Widest -> Css.make "tracking-widest"

     

       57
       57
       -
         | Line_height None -> Css.make "leading-none"

     

       58
       58
       -
         | Line_height Tight -> Css.make "leading-tight"

     

       59
       59
       -
         | Line_height Snug -> Css.make "leading-snug"

     

       60
       60
       -
         | Line_height Normal -> Css.make "leading-normal"

     

       61
       61
       -
         | Line_height Relaxed -> Css.make "leading-relaxed"

     

       62
       62
       -
         | Line_height Loose -> Css.make "leading-loose"

     

       63
       63
       -
         | Line_height (Rem f) -> Css.make (Printf.sprintf "leading-[%.1frem]" f)

     

       64
       64
       -
         | Text_align Left -> Css.make "text-left"

     

       65
       65
       -
         | Text_align Center -> Css.make "text-center"

     

       66
       66
       -
         | Text_align Right -> Css.make "text-right"

     

       67
       67
       -
         | Text_align Justify -> Css.make "text-justify"

     

       68
       68
       -
         | Text_align Start -> Css.make "text-start"

     

       69
       69
       -
         | Text_align End -> Css.make "text-end"

     

       70
       70
       -
         | Text_decoration Underline -> Css.make "underline"

     

       71
       71
       -
         | Text_decoration Overline -> Css.make "overline"

     

       72
       72
       -
         | Text_decoration Line_through -> Css.make "line-through"

     

       73
       73
       -
         | Text_decoration No_underline -> Css.make "no-underline"

     

       74
       74
       -
         | Text_transform Uppercase -> Css.make "uppercase"

     

       75
       75
       -
         | Text_transform Lowercase -> Css.make "lowercase"

     

       76
       76
       -
         | Text_transform Capitalize -> Css.make "capitalize"

     

       77
       77
       -
         | Text_transform Normal_case -> Css.make "normal-case"

     

       78
       78
       -
         | Text_color color -> Color.text color

     

       25
       25
       +
         | `Font_family `Sans -> Css.make "font-sans"

     

       26
       26
       +
         | `Font_family `Serif -> Css.make "font-serif"

     

       27
       27
       +
         | `Font_family `Mono -> Css.make "font-mono"

     

       28
       28
       +
         | `Font_size `Xs -> Css.make "text-xs"

     

       29
       29
       +
         | `Font_size `Sm -> Css.make "text-sm"

     

       30
       30
       +
         | `Font_size `Base -> Css.make "text-base"

     

       31
       31
       +
         | `Font_size `Lg -> Css.make "text-lg"

     

       32
       32
       +
         | `Font_size `Xl -> Css.make "text-xl"

     

       33
       33
       +
         | `Font_size `Xl2 -> Css.make "text-2xl"

     

       34
       34
       +
         | `Font_size `Xl3 -> Css.make "text-3xl"

     

       35
       35
       +
         | `Font_size `Xl4 -> Css.make "text-4xl"

     

       36
       36
       +
         | `Font_size `Xl5 -> Css.make "text-5xl"

     

       37
       37
       +
         | `Font_size `Xl6 -> Css.make "text-6xl"

     

       38
       38
       +
         | `Font_size `Xl7 -> Css.make "text-7xl"

     

       39
       39
       +
         | `Font_size `Xl8 -> Css.make "text-8xl"

     

       40
       40
       +
         | `Font_size `Xl9 -> Css.make "text-9xl"

     

       41
       41
       +
         | `Font_weight `Thin -> Css.make "font-thin"

     

       42
       42
       +
         | `Font_weight `Extralight -> Css.make "font-extralight"

     

       43
       43
       +
         | `Font_weight `Light -> Css.make "font-light"

     

       44
       44
       +
         | `Font_weight `Normal -> Css.make "font-normal"

     

       45
       45
       +
         | `Font_weight `Medium -> Css.make "font-medium"

     

       46
       46
       +
         | `Font_weight `Semibold -> Css.make "font-semibold"

     

       47
       47
       +
         | `Font_weight `Bold -> Css.make "font-bold"

     

       48
       48
       +
         | `Font_weight `Extrabold -> Css.make "font-extrabold"

     

       49
       49
       +
         | `Font_weight `Black -> Css.make "font-black"

     

       50
       50
       +
         | `Font_style `Italic -> Css.make "italic"

     

       51
       51
       +
         | `Font_style `Not_italic -> Css.make "not-italic"

     

       52
       52
       +
         | `Letter_spacing `Tighter -> Css.make "tracking-tighter"

     

       53
       53
       +
         | `Letter_spacing `Tight -> Css.make "tracking-tight"

     

       54
       54
       +
         | `Letter_spacing `Normal -> Css.make "tracking-normal"

     

       55
       55
       +
         | `Letter_spacing `Wide -> Css.make "tracking-wide"

     

       56
       56
       +
         | `Letter_spacing `Wider -> Css.make "tracking-wider"

     

       57
       57
       +
         | `Letter_spacing `Widest -> Css.make "tracking-widest"

     

       58
       58
       +
         | `Line_height `None -> Css.make "leading-none"

     

       59
       59
       +
         | `Line_height `Tight -> Css.make "leading-tight"

     

       60
       60
       +
         | `Line_height `Snug -> Css.make "leading-snug"

     

       61
       61
       +
         | `Line_height `Normal -> Css.make "leading-normal"

     

       62
       62
       +
         | `Line_height `Relaxed -> Css.make "leading-relaxed"

     

       63
       63
       +
         | `Line_height `Loose -> Css.make "leading-loose"

     

       64
       64
       +
         | `Line_height (`Rem f) -> Css.make (Printf.sprintf "leading-[%.1frem]" f)

     

       65
       65
       +
         | `Text_align `Left -> Css.make "text-left"

     

       66
       66
       +
         | `Text_align `Center -> Css.make "text-center"

     

       67
       67
       +
         | `Text_align `Right -> Css.make "text-right"

     

       68
       68
       +
         | `Text_align `Justify -> Css.make "text-justify"

     

       69
       69
       +
         | `Text_align `Start -> Css.make "text-start"

     

       70
       70
       +
         | `Text_align `End -> Css.make "text-end"

     

       71
       71
       +
         | `Text_decoration `Underline -> Css.make "underline"

     

       72
       72
       +
         | `Text_decoration `Overline -> Css.make "overline"

     

       73
       73
       +
         | `Text_decoration `Line_through -> Css.make "line-through"

     

       74
       74
       +
         | `Text_decoration `No_underline -> Css.make "no-underline"

     

       75
       75
       +
         | `Text_transform `Uppercase -> Css.make "uppercase"

     

       76
       76
       +
         | `Text_transform `Lowercase -> Css.make "lowercase"

     

       77
       77
       +
         | `Text_transform `Capitalize -> Css.make "capitalize"

     

       78
       78
       +
         | `Text_transform `Normal_case -> Css.make "normal-case"

     

       79
       79
       +
         | `Text_color color -> Color.text color

     

       79
       80
        
       

     

       80
       80
       -
       let font_family ff = Font_family ff

     

       81
       81
       -
       let font_size fs = Font_size fs

     

       82
       82
       -
       let font_weight fw = Font_weight fw

     

       83
       83
       -
       let font_style fs = Font_style fs

     

       84
       84
       -
       let letter_spacing ls = Letter_spacing ls

     

       85
       85
       -
       let line_height lh = Line_height lh

     

       86
       86
       -
       let text_align ta = Text_align ta

     

       87
       87
       -
       let text_decoration td = Text_decoration td

     

       88
       88
       -
       let text_transform tt = Text_transform tt

     

       89
       89
       -
       let text_color c = Text_color c

     

       81
       81
       +
       let font_family ff = `Font_family ff

     

       82
       82
       +
       let font_size fs = `Font_size fs

     

       83
       83
       +
       let font_weight fw = `Font_weight fw

     

       84
       84
       +
       let font_style fs = `Font_style fs

     

       85
       85
       +
       let letter_spacing ls = `Letter_spacing ls

     

       86
       86
       +
       let line_height lh = `Line_height lh

     

       87
       87
       +
       let text_align ta = `Text_align ta

     

       88
       88
       +
       let text_decoration td = `Text_decoration td

     

       89
       89
       +
       let text_transform tt = `Text_transform tt

     

       90
       90
       +
       let text_color c = `Text_color c

     

       90
       91
        
       

     

       91
       92
        
       let text_xs = Css.make "text-xs"

     

       92
       93
        
       let text_sm = Css.make "text-sm"

+34 -25

lib/tailwind/typography.mli

···

       4
       4
        
       type t

     

       5
       5
        
       

     

       6
       6
        
       (** Font family *)

     

       7
       7
       -
       type font_family =

     

       8
       8
       -
         | Sans

     

       9
       9
       -
         | Serif

     

       10
       10
       -
         | Mono

     

       7
       7
       +
       type font_family = [

     

       8
       8
       +
         | `Sans

     

       9
       9
       +
         | `Serif

     

       10
       10
       +
         | `Mono

     

       11
       11
       +
       ]

     

       11
       12
        
       

     

       12
       13
        
       (** Font size *)

     

       13
       13
       -
       type font_size =

     

       14
       14
       -
         | Xs | Sm | Base | Lg | Xl

     

       15
       15
       -
         | Xl2 | Xl3 | Xl4 | Xl5 | Xl6

     

       16
       16
       -
         | Xl7 | Xl8 | Xl9

     

       14
       14
       +
       type font_size = [

     

       15
       15
       +
         | `Xs | `Sm | `Base | `Lg | `Xl

     

       16
       16
       +
         | `Xl2 | `Xl3 | `Xl4 | `Xl5 | `Xl6

     

       17
       17
       +
         | `Xl7 | `Xl8 | `Xl9

     

       18
       18
       +
       ]

     

       17
       19
        
       

     

       18
       20
        
       (** Font weight *)

     

       19
       19
       -
       type font_weight =

     

       20
       20
       -
         | Thin | Extralight | Light | Normal | Medium

     

       21
       21
       -
         | Semibold | Bold | Extrabold | Black

     

       21
       21
       +
       type font_weight = [

     

       22
       22
       +
         | `Thin | `Extralight | `Light | `Normal | `Medium

     

       23
       23
       +
         | `Semibold | `Bold | `Extrabold | `Black

     

       24
       24
       +
       ]

     

       22
       25
        
       

     

       23
       26
        
       (** Font style *)

     

       24
       24
       -
       type font_style =

     

       25
       25
       -
         | Italic

     

       26
       26
       -
         | Not_italic

     

       27
       27
       +
       type font_style = [

     

       28
       28
       +
         | `Italic

     

       29
       29
       +
         | `Not_italic

     

       30
       30
       +
       ]

     

       27
       31
        
       

     

       28
       32
        
       (** Letter spacing *)

     

       29
       29
       -
       type letter_spacing =

     

       30
       30
       -
         | Tighter | Tight | Normal | Wide | Wider | Widest

     

       33
       33
       +
       type letter_spacing = [

     

       34
       34
       +
         | `Tighter | `Tight | `Normal | `Wide | `Wider | `Widest

     

       35
       35
       +
       ]

     

       31
       36
        
       

     

       32
       37
        
       (** Line height *)

     

       33
       33
       -
       type line_height =

     

       34
       34
       -
         | None | Tight | Snug | Normal | Relaxed | Loose

     

       35
       35
       -
         | Rem of float

     

       38
       38
       +
       type line_height = [

     

       39
       39
       +
         | `None | `Tight | `Snug | `Normal | `Relaxed | `Loose

     

       40
       40
       +
         | `Rem of float

     

       41
       41
       +
       ]

     

       36
       42
        
       

     

       37
       43
        
       (** Text alignment *)

     

       38
       38
       -
       type text_align =

     

       39
       39
       -
         | Left | Center | Right | Justify | Start | End

     

       44
       44
       +
       type text_align = [

     

       45
       45
       +
         | `Left | `Center | `Right | `Justify | `Start | `End

     

       46
       46
       +
       ]

     

       40
       47
        
       

     

       41
       48
        
       (** Text decoration *)

     

       42
       42
       -
       type text_decoration =

     

       43
       43
       -
         | Underline | Overline | Line_through | No_underline

     

       49
       49
       +
       type text_decoration = [

     

       50
       50
       +
         | `Underline | `Overline | `Line_through | `No_underline

     

       51
       51
       +
       ]

     

       44
       52
        
       

     

       45
       53
        
       (** Text transform *)

     

       46
       46
       -
       type text_transform =

     

       47
       47
       -
         | Uppercase | Lowercase | Capitalize | Normal_case

     

       54
       54
       +
       type text_transform = [

     

       55
       55
       +
         | `Uppercase | `Lowercase | `Capitalize | `Normal_case

     

       56
       56
       +
       ]

     

       48
       57
        
       

     

       49
       58
        
       (** Set font family *)

     

       50
       59
        
       val font_family : font_family -> t

+71 -70

lib/tailwind/variants.ml

···

       1
       1
       -
       type pseudo = Hover | Focus | Focus_within | Focus_visible | Active | Visited | Target 

     

       2
       2
       -
         | Disabled | Enabled | Checked | Indeterminate | Default | Required | Valid | Invalid

     

       3
       3
       -
         | In_range | Out_of_range | Placeholder_shown | Autofill | Read_only

     

       1
       1
       +
       type pseudo = [ `Hover | `Focus | `Focus_within | `Focus_visible | `Active | `Visited | `Target 

     

       2
       2
       +
         | `Disabled | `Enabled | `Checked | `Indeterminate | `Default | `Required | `Valid | `Invalid

     

       3
       3
       +
         | `In_range | `Out_of_range | `Placeholder_shown | `Autofill | `Read_only ]

     

       4
       4
        
       

     

       5
       5
       -
       type pseudo_element = Before | After | First_line | First_letter | Marker | Selection | File | Backdrop | Placeholder

     

       5
       5
       +
       type pseudo_element = [ `Before | `After | `First_line | `First_letter | `Marker | `Selection | `File | `Backdrop | `Placeholder ]

     

       6
       6
        
       

     

       7
       7
       -
       type structural = First | Last | Only | Odd | Even | First_of_type | Last_of_type | Only_of_type | Empty | Root | Nth of int | Nth_last of int

     

       7
       7
       +
       type structural = [ `First | `Last | `Only | `Odd | `Even | `First_of_type | `Last_of_type | `Only_of_type | `Empty | `Root | `Nth of int | `Nth_last of int ]

     

       8
       8
        
       

     

       9
       9
       -
       type group = Group of pseudo | Peer of pseudo

     

       9
       9
       +
       type group = [ `Group of pseudo | `Peer of pseudo ]

     

       10
       10
        
       

     

       11
       11
       -
       type special = Not of pseudo | Has of string | Where of string | Is of string | Starting_style | Inert | Open | In of string

     

       11
       11
       +
       type special = [ `Not of pseudo | `Has of string | `Where of string | `Is of string | `Starting_style | `Inert | `Open | `In of string ]

     

       12
       12
        
       

     

       13
       13
       -
       type t = 

     

       14
       14
       -
         | Pseudo of pseudo * Css.t

     

       15
       15
       -
         | Pseudo_element of pseudo_element * Css.t

     

       16
       16
       -
         | Structural of structural * Css.t

     

       17
       17
       -
         | Group of group * Css.t

     

       18
       18
       -
         | Special of special * Css.t

     

       13
       13
       +
       type t = [

     

       14
       14
       +
         | `Pseudo of pseudo * Css.t

     

       15
       15
       +
         | `Pseudo_element of pseudo_element * Css.t

     

       16
       16
       +
         | `Structural of structural * Css.t

     

       17
       17
       +
         | `Group of group * Css.t

     

       18
       18
       +
         | `Special of special * Css.t

     

       19
       19
       +
       ]

     

       19
       20
        
       

     

       20
       21
        
       let pseudo_to_string = function

     

       21
       21
       -
         | Hover -> "hover"

     

       22
       22
       -
         | Focus -> "focus"

     

       23
       23
       -
         | Focus_within -> "focus-within"

     

       24
       24
       -
         | Focus_visible -> "focus-visible"

     

       25
       25
       -
         | Active -> "active"

     

       26
       26
       -
         | Visited -> "visited"

     

       27
       27
       -
         | Target -> "target"

     

       28
       28
       -
         | Disabled -> "disabled"

     

       29
       29
       -
         | Enabled -> "enabled"

     

       30
       30
       -
         | Checked -> "checked"

     

       31
       31
       -
         | Indeterminate -> "indeterminate"

     

       32
       32
       -
         | Default -> "default"

     

       33
       33
       -
         | Required -> "required"

     

       34
       34
       -
         | Valid -> "valid"

     

       35
       35
       -
         | Invalid -> "invalid"

     

       36
       36
       -
         | In_range -> "in-range"

     

       37
       37
       -
         | Out_of_range -> "out-of-range"

     

       38
       38
       -
         | Placeholder_shown -> "placeholder-shown"

     

       39
       39
       -
         | Autofill -> "autofill"

     

       40
       40
       -
         | Read_only -> "read-only"

     

       22
       22
       +
         | `Hover -> "hover"

     

       23
       23
       +
         | `Focus -> "focus"

     

       24
       24
       +
         | `Focus_within -> "focus-within"

     

       25
       25
       +
         | `Focus_visible -> "focus-visible"

     

       26
       26
       +
         | `Active -> "active"

     

       27
       27
       +
         | `Visited -> "visited"

     

       28
       28
       +
         | `Target -> "target"

     

       29
       29
       +
         | `Disabled -> "disabled"

     

       30
       30
       +
         | `Enabled -> "enabled"

     

       31
       31
       +
         | `Checked -> "checked"

     

       32
       32
       +
         | `Indeterminate -> "indeterminate"

     

       33
       33
       +
         | `Default -> "default"

     

       34
       34
       +
         | `Required -> "required"

     

       35
       35
       +
         | `Valid -> "valid"

     

       36
       36
       +
         | `Invalid -> "invalid"

     

       37
       37
       +
         | `In_range -> "in-range"

     

       38
       38
       +
         | `Out_of_range -> "out-of-range"

     

       39
       39
       +
         | `Placeholder_shown -> "placeholder-shown"

     

       40
       40
       +
         | `Autofill -> "autofill"

     

       41
       41
       +
         | `Read_only -> "read-only"

     

       41
       42
        
       

     

       42
       43
        
       let to_class = function

     

       43
       43
       -
         | Pseudo (pseudo, classes) -> 

     

       44
       44
       +
         | `Pseudo (pseudo, classes) -> 

     

       44
       45
        
           let prefix = pseudo_to_string pseudo in

     

       45
       46
        
           Css.make (prefix ^ ":" ^ Css.to_string classes)

     

       46
       46
       -
         | Pseudo_element (Before, classes) -> Css.make ("before:" ^ Css.to_string classes)

     

       47
       47
       -
         | Pseudo_element (After, classes) -> Css.make ("after:" ^ Css.to_string classes)

     

       48
       48
       -
         | Pseudo_element (First_line, classes) -> Css.make ("first-line:" ^ Css.to_string classes)

     

       49
       49
       -
         | Pseudo_element (First_letter, classes) -> Css.make ("first-letter:" ^ Css.to_string classes)

     

       50
       50
       -
         | Pseudo_element (Marker, classes) -> Css.make ("marker:" ^ Css.to_string classes)

     

       51
       51
       -
         | Pseudo_element (Selection, classes) -> Css.make ("selection:" ^ Css.to_string classes)

     

       52
       52
       -
         | Pseudo_element (File, classes) -> Css.make ("file:" ^ Css.to_string classes)

     

       53
       53
       -
         | Pseudo_element (Backdrop, classes) -> Css.make ("backdrop:" ^ Css.to_string classes)

     

       54
       54
       -
         | Pseudo_element (Placeholder, classes) -> Css.make ("placeholder:" ^ Css.to_string classes)

     

       55
       55
       -
         | Structural (First, classes) -> Css.make ("first:" ^ Css.to_string classes)

     

       56
       56
       -
         | Structural (Last, classes) -> Css.make ("last:" ^ Css.to_string classes)

     

       57
       57
       -
         | Structural (Only, classes) -> Css.make ("only:" ^ Css.to_string classes)

     

       58
       58
       -
         | Structural (Odd, classes) -> Css.make ("odd:" ^ Css.to_string classes)

     

       59
       59
       -
         | Structural (Even, classes) -> Css.make ("even:" ^ Css.to_string classes)

     

       60
       60
       -
         | Structural (First_of_type, classes) -> Css.make ("first-of-type:" ^ Css.to_string classes)

     

       61
       61
       -
         | Structural (Last_of_type, classes) -> Css.make ("last-of-type:" ^ Css.to_string classes)

     

       62
       62
       -
         | Structural (Only_of_type, classes) -> Css.make ("only-of-type:" ^ Css.to_string classes)

     

       63
       63
       -
         | Structural (Empty, classes) -> Css.make ("empty:" ^ Css.to_string classes)

     

       64
       64
       -
         | Structural (Root, classes) -> Css.make ("root:" ^ Css.to_string classes)

     

       65
       65
       -
         | Structural (Nth n, classes) -> Css.make (Printf.sprintf "nth-child(%d):" n ^ Css.to_string classes)

     

       66
       66
       -
         | Structural (Nth_last n, classes) -> Css.make (Printf.sprintf "nth-last-child(%d):" n ^ Css.to_string classes)

     

       67
       67
       -
         | Group (Group pseudo, classes) -> 

     

       47
       47
       +
         | `Pseudo_element (`Before, classes) -> Css.make ("before:" ^ Css.to_string classes)

     

       48
       48
       +
         | `Pseudo_element (`After, classes) -> Css.make ("after:" ^ Css.to_string classes)

     

       49
       49
       +
         | `Pseudo_element (`First_line, classes) -> Css.make ("first-line:" ^ Css.to_string classes)

     

       50
       50
       +
         | `Pseudo_element (`First_letter, classes) -> Css.make ("first-letter:" ^ Css.to_string classes)

     

       51
       51
       +
         | `Pseudo_element (`Marker, classes) -> Css.make ("marker:" ^ Css.to_string classes)

     

       52
       52
       +
         | `Pseudo_element (`Selection, classes) -> Css.make ("selection:" ^ Css.to_string classes)

     

       53
       53
       +
         | `Pseudo_element (`File, classes) -> Css.make ("file:" ^ Css.to_string classes)

     

       54
       54
       +
         | `Pseudo_element (`Backdrop, classes) -> Css.make ("backdrop:" ^ Css.to_string classes)

     

       55
       55
       +
         | `Pseudo_element (`Placeholder, classes) -> Css.make ("placeholder:" ^ Css.to_string classes)

     

       56
       56
       +
         | `Structural (`First, classes) -> Css.make ("first:" ^ Css.to_string classes)

     

       57
       57
       +
         | `Structural (`Last, classes) -> Css.make ("last:" ^ Css.to_string classes)

     

       58
       58
       +
         | `Structural (`Only, classes) -> Css.make ("only:" ^ Css.to_string classes)

     

       59
       59
       +
         | `Structural (`Odd, classes) -> Css.make ("odd:" ^ Css.to_string classes)

     

       60
       60
       +
         | `Structural (`Even, classes) -> Css.make ("even:" ^ Css.to_string classes)

     

       61
       61
       +
         | `Structural (`First_of_type, classes) -> Css.make ("first-of-type:" ^ Css.to_string classes)

     

       62
       62
       +
         | `Structural (`Last_of_type, classes) -> Css.make ("last-of-type:" ^ Css.to_string classes)

     

       63
       63
       +
         | `Structural (`Only_of_type, classes) -> Css.make ("only-of-type:" ^ Css.to_string classes)

     

       64
       64
       +
         | `Structural (`Empty, classes) -> Css.make ("empty:" ^ Css.to_string classes)

     

       65
       65
       +
         | `Structural (`Root, classes) -> Css.make ("root:" ^ Css.to_string classes)

     

       66
       66
       +
         | `Structural (`Nth n, classes) -> Css.make (Printf.sprintf "nth-child(%d):" n ^ Css.to_string classes)

     

       67
       67
       +
         | `Structural (`Nth_last n, classes) -> Css.make (Printf.sprintf "nth-last-child(%d):" n ^ Css.to_string classes)

     

       68
       68
       +
         | `Group (`Group pseudo, classes) -> 

     

       68
       69
        
           let prefix = pseudo_to_string pseudo in

     

       69
       70
        
           Css.make ("group-" ^ prefix ^ ":" ^ Css.to_string classes)

     

       70
       70
       -
         | Group (Peer pseudo, classes) -> 

     

       71
       71
       +
         | `Group (`Peer pseudo, classes) -> 

     

       71
       72
        
           let prefix = pseudo_to_string pseudo in

     

       72
       73
        
           Css.make ("peer-" ^ prefix ^ ":" ^ Css.to_string classes)

     

       73
       73
       -
         | Special (Not pseudo, classes) -> 

     

       74
       74
       +
         | `Special (`Not pseudo, classes) -> 

     

       74
       75
        
           let prefix = pseudo_to_string pseudo in

     

       75
       76
        
           Css.make ("not-" ^ prefix ^ ":" ^ Css.to_string classes)

     

       76
       76
       -
         | Special (Has selector, classes) -> Css.make ("has-[" ^ selector ^ "]:" ^ Css.to_string classes)

     

       77
       77
       -
         | Special (Where selector, classes) -> Css.make ("where-[" ^ selector ^ "]:" ^ Css.to_string classes)

     

       78
       78
       -
         | Special (Is selector, classes) -> Css.make ("is-[" ^ selector ^ "]:" ^ Css.to_string classes)

     

       79
       79
       -
         | Special (Starting_style, classes) -> Css.make ("@starting-style:" ^ Css.to_string classes)

     

       80
       80
       -
         | Special (Inert, classes) -> Css.make ("inert:" ^ Css.to_string classes)

     

       81
       81
       -
         | Special (Open, classes) -> Css.make ("open:" ^ Css.to_string classes)

     

       82
       82
       -
         | Special (In variant, classes) -> Css.make ("in-" ^ variant ^ ":" ^ Css.to_string classes)

     

       77
       77
       +
         | `Special (`Has selector, classes) -> Css.make ("has-[" ^ selector ^ "]:" ^ Css.to_string classes)

     

       78
       78
       +
         | `Special (`Where selector, classes) -> Css.make ("where-[" ^ selector ^ "]:" ^ Css.to_string classes)

     

       79
       79
       +
         | `Special (`Is selector, classes) -> Css.make ("is-[" ^ selector ^ "]:" ^ Css.to_string classes)

     

       80
       80
       +
         | `Special (`Starting_style, classes) -> Css.make ("@starting-style:" ^ Css.to_string classes)

     

       81
       81
       +
         | `Special (`Inert, classes) -> Css.make ("inert:" ^ Css.to_string classes)

     

       82
       82
       +
         | `Special (`Open, classes) -> Css.make ("open:" ^ Css.to_string classes)

     

       83
       83
       +
         | `Special (`In variant, classes) -> Css.make ("in-" ^ variant ^ ":" ^ Css.to_string classes)

     

       83
       84
        
       

     

       84
       84
       -
       let pseudo p classes = Pseudo (p, classes)

     

       85
       85
       -
       let pseudo_element pe classes = Pseudo_element (pe, classes)

     

       86
       86
       -
       let structural s classes = Structural (s, classes)

     

       87
       87
       -
       let group g classes = Group (g, classes)

     

       88
       88
       -
       let special s classes = Special (s, classes)

     

       85
       85
       +
       let pseudo p classes = `Pseudo (p, classes)

     

       86
       86
       +
       let pseudo_element pe classes = `Pseudo_element (pe, classes)

     

       87
       87
       +
       let structural s classes = `Structural (s, classes)

     

       88
       88
       +
       let group g classes = `Group (g, classes)

     

       89
       89
       +
       let special s classes = `Special (s, classes)

     

       89
       90
        
       

     

       90
       91
        
       let apply variant_t classes =

     

       91
       92
        
         Css.combine (to_class variant_t) classes

+61 -56

lib/tailwind/variants.mli

···

       4
       4
        
       type t

     

       5
       5
        
       

     

       6
       6
        
       (** Pseudo-class states *)

     

       7
       7
       -
       type pseudo =

     

       8
       8
       -
         | Hover

     

       9
       9
       -
         | Focus

     

       10
       10
       -
         | Focus_within

     

       11
       11
       -
         | Focus_visible

     

       12
       12
       -
         | Active

     

       13
       13
       -
         | Visited

     

       14
       14
       -
         | Target

     

       15
       15
       -
         | Disabled

     

       16
       16
       -
         | Enabled

     

       17
       17
       -
         | Checked

     

       18
       18
       -
         | Indeterminate

     

       19
       19
       -
         | Default

     

       20
       20
       -
         | Required

     

       21
       21
       -
         | Valid

     

       22
       22
       -
         | Invalid

     

       23
       23
       -
         | In_range

     

       24
       24
       -
         | Out_of_range

     

       25
       25
       -
         | Placeholder_shown

     

       26
       26
       -
         | Autofill

     

       27
       27
       -
         | Read_only

     

       7
       7
       +
       type pseudo = [

     

       8
       8
       +
         | `Hover

     

       9
       9
       +
         | `Focus

     

       10
       10
       +
         | `Focus_within

     

       11
       11
       +
         | `Focus_visible

     

       12
       12
       +
         | `Active

     

       13
       13
       +
         | `Visited

     

       14
       14
       +
         | `Target

     

       15
       15
       +
         | `Disabled

     

       16
       16
       +
         | `Enabled

     

       17
       17
       +
         | `Checked

     

       18
       18
       +
         | `Indeterminate

     

       19
       19
       +
         | `Default

     

       20
       20
       +
         | `Required

     

       21
       21
       +
         | `Valid

     

       22
       22
       +
         | `Invalid

     

       23
       23
       +
         | `In_range

     

       24
       24
       +
         | `Out_of_range

     

       25
       25
       +
         | `Placeholder_shown

     

       26
       26
       +
         | `Autofill

     

       27
       27
       +
         | `Read_only

     

       28
       28
       +
       ]

     

       28
       29
        
       

     

       29
       30
        
       (** Pseudo-element states *)

     

       30
       30
       -
       type pseudo_element =

     

       31
       31
       -
         | Before

     

       32
       32
       -
         | After

     

       33
       33
       -
         | First_line

     

       34
       34
       -
         | First_letter

     

       35
       35
       -
         | Marker

     

       36
       36
       -
         | Selection

     

       37
       37
       -
         | File

     

       38
       38
       -
         | Backdrop

     

       39
       39
       -
         | Placeholder

     

       31
       31
       +
       type pseudo_element = [

     

       32
       32
       +
         | `Before

     

       33
       33
       +
         | `After

     

       34
       34
       +
         | `First_line

     

       35
       35
       +
         | `First_letter

     

       36
       36
       +
         | `Marker

     

       37
       37
       +
         | `Selection

     

       38
       38
       +
         | `File

     

       39
       39
       +
         | `Backdrop

     

       40
       40
       +
         | `Placeholder

     

       41
       41
       +
       ]

     

       40
       42
        
       

     

       41
       43
        
       (** Structural pseudo-classes *)

     

       42
       42
       -
       type structural =

     

       43
       43
       -
         | First

     

       44
       44
       -
         | Last

     

       45
       45
       -
         | Only

     

       46
       46
       -
         | Odd

     

       47
       47
       -
         | Even

     

       48
       48
       -
         | First_of_type

     

       49
       49
       -
         | Last_of_type

     

       50
       50
       -
         | Only_of_type

     

       51
       51
       -
         | Empty

     

       52
       52
       -
         | Root

     

       53
       53
       -
         | Nth of int

     

       54
       54
       -
         | Nth_last of int

     

       44
       44
       +
       type structural = [

     

       45
       45
       +
         | `First

     

       46
       46
       +
         | `Last

     

       47
       47
       +
         | `Only

     

       48
       48
       +
         | `Odd

     

       49
       49
       +
         | `Even

     

       50
       50
       +
         | `First_of_type

     

       51
       51
       +
         | `Last_of_type

     

       52
       52
       +
         | `Only_of_type

     

       53
       53
       +
         | `Empty

     

       54
       54
       +
         | `Root

     

       55
       55
       +
         | `Nth of int

     

       56
       56
       +
         | `Nth_last of int

     

       57
       57
       +
       ]

     

       55
       58
        
       

     

       56
       59
        
       (** Group and peer variants *)

     

       57
       57
       -
       type group =

     

       58
       58
       -
         | Group of pseudo

     

       59
       59
       -
         | Peer of pseudo

     

       60
       60
       +
       type group = [

     

       61
       61
       +
         | `Group of pseudo

     

       62
       62
       +
         | `Peer of pseudo

     

       63
       63
       +
       ]

     

       60
       64
        
       

     

       61
       65
        
       (** Special variants *)

     

       62
       62
       -
       type special =

     

       63
       63
       -
         | Not of pseudo

     

       64
       64
       -
         | Has of string

     

       65
       65
       -
         | Where of string

     

       66
       66
       -
         | Is of string

     

       67
       67
       -
         | Starting_style

     

       68
       68
       -
         | Inert

     

       69
       69
       -
         | Open

     

       70
       70
       -
         | In of string

     

       66
       66
       +
       type special = [

     

       67
       67
       +
         | `Not of pseudo

     

       68
       68
       +
         | `Has of string

     

       69
       69
       +
         | `Where of string

     

       70
       70
       +
         | `Is of string

     

       71
       71
       +
         | `Starting_style

     

       72
       72
       +
         | `Inert

     

       73
       73
       +
         | `Open

     

       74
       74
       +
         | `In of string

     

       75
       75
       +
       ]

     

       71
       76
        
       

     

       72
       77
        
       (** Apply pseudo-class variant *)

     

       73
       78
        
       val pseudo : pseudo -> Css.t -> t

tailwind-html.opam

···

       13
       13
        
         "dune" {>= "3.0" & >= "3.0"}

     

       14
       14
        
         "tailwind"

     

       15
       15
        
         "htmlit" {>= "0.1.0"}

     

       16
       16
       +
         "alcotest" {with-test}

     

       17
       17
       +
         "qcheck" {with-test}

     

       16
       18
        
         "odoc" {with-doc}

     

       17
       19
        
       ]

     

       18
       20
        
       build: [

tailwind.opam

···

       12
       12
        
       depends: [

     

       13
       13
        
         "ocaml"

     

       14
       14
        
         "dune" {>= "3.0" & >= "3.0"}

     

       15
       15
       +
         "alcotest" {with-test}

     

       16
       16
       +
         "qcheck" {with-test}

     

       15
       17
        
         "odoc" {with-doc}

     

       16
       18
        
       ]

     

       17
       19
        
       build: [

+10

test/dune

···

       1
       1
       +
       (executable

     

       2
       2
       +
        (public_name test_tailwind)

     

       3
       3
       +
        (name test_runner)

     

       4
       4
       +
        (package tailwind)

     

       5
       5
       +
        (modules test_runner test_simple)

     

       6
       6
       +
        (libraries tailwind tailwind-html alcotest))

     

       7
       7
       +
       

     

       8
       8
       +
       (rule

     

       9
       9
       +
        (alias runtest)

     

       10
       10
       +
        (action (run ./test_runner.exe)))

+50

test/test_color.ml

···

       1
       1
       +
       open Tailwind

     

       2
       2
       +
       

     

       3
       3
       +
       let test_color_basic () =

     

       4
       4
       +
         let blue = Color.make `Blue () in

     

       5
       5
       +
         let bg_class = Color.bg blue in

     

       6
       6
       +
         Alcotest.(check string) "basic blue background" "bg-blue-500" (Css.to_string bg_class)

     

       7
       7
       +
       

     

       8
       8
       +
       let test_color_with_variant () =

     

       9
       9
       +
         let light_blue = Color.make `Blue ~variant:`V300 () in

     

       10
       10
       +
         let bg_class = Color.bg light_blue in

     

       11
       11
       +
         Alcotest.(check string) "blue-300 background" "bg-blue-300" (Css.to_string bg_class)

     

       12
       12
       +
       

     

       13
       13
       +
       let test_color_with_opacity () =

     

       14
       14
       +
         let semi_blue = Color.make `Blue ~opacity:50 () in

     

       15
       15
       +
         let bg_class = Color.bg semi_blue in

     

       16
       16
       +
         Alcotest.(check string) "blue with opacity" "bg-blue-500/50" (Css.to_string bg_class)

     

       17
       17
       +
       

     

       18
       18
       +
       let test_color_text () =

     

       19
       19
       +
         let red = Color.make `Red ~variant:`V600 () in

     

       20
       20
       +
         let text_class = Color.text red in

     

       21
       21
       +
         Alcotest.(check string) "red text" "text-red-600" (Css.to_string text_class)

     

       22
       22
       +
       

     

       23
       23
       +
       let test_color_border () =

     

       24
       24
       +
         let green = Color.make `Green ~variant:`V400 () in

     

       25
       25
       +
         let border_class = Color.border green in

     

       26
       26
       +
         Alcotest.(check string) "green border" "border-green-400" (Css.to_string border_class)

     

       27
       27
       +
       

     

       28
       28
       +
       let test_color_ring () =

     

       29
       29
       +
         let purple = Color.make `Purple ~variant:`V500 () in

     

       30
       30
       +
         let ring_class = Color.ring purple in

     

       31
       31
       +
         Alcotest.(check string) "purple ring" "ring-purple-500" (Css.to_string ring_class)

     

       32
       32
       +
       

     

       33
       33
       +
       (* Additional edge case tests *)

     

       34
       34
       +
       let test_opacity_edge_cases () =

     

       35
       35
       +
         let transparent = Color.make `Blue ~opacity:0 () in

     

       36
       36
       +
         let opaque = Color.make `Blue ~opacity:100 () in

     

       37
       37
       +
         let bg1 = Color.bg transparent in

     

       38
       38
       +
         let bg2 = Color.bg opaque in

     

       39
       39
       +
         Alcotest.(check bool) "zero opacity contains /0" (String.contains_s (Css.to_string bg1) "/0");

     

       40
       40
       +
         Alcotest.(check bool) "full opacity contains /100" (String.contains_s (Css.to_string bg2) "/100")

     

       41
       41
       +
       

     

       42
       42
       +
       let suite = [

     

       43
       43
       +
         "color_basic", `Quick, test_color_basic;

     

       44
       44
       +
         "color_with_variant", `Quick, test_color_with_variant;

     

       45
       45
       +
         "color_with_opacity", `Quick, test_color_with_opacity;

     

       46
       46
       +
         "color_text", `Quick, test_color_text;

     

       47
       47
       +
         "color_border", `Quick, test_color_border;

     

       48
       48
       +
         "color_ring", `Quick, test_color_ring;

     

       49
       49
       +
         "opacity_edge_cases", `Quick, test_opacity_edge_cases;

     

       50
       50
       +
       ]

+43

test/test_css.ml

···

       1
       1
       +
       open Tailwind

     

       2
       2
       +
       

     

       3
       3
       +
       let test_css_make () =

     

       4
       4
       +
         let css = Css.make "p-4" in

     

       5
       5
       +
         Alcotest.(check string) "basic class creation" "p-4" (Css.to_string css)

     

       6
       6
       +
       

     

       7
       7
       +
       let test_css_empty () =

     

       8
       8
       +
         let empty = Css.empty in

     

       9
       9
       +
         Alcotest.(check bool) "empty is empty" true (Css.is_empty empty);

     

       10
       10
       +
         Alcotest.(check string) "empty to string" "" (Css.to_string empty)

     

       11
       11
       +
       

     

       12
       12
       +
       let test_css_combine () =

     

       13
       13
       +
         let c1 = Css.make "p-4" in

     

       14
       14
       +
         let c2 = Css.make "m-2" in

     

       15
       15
       +
         let combined = Css.combine c1 c2 in

     

       16
       16
       +
         Alcotest.(check string) "combine classes" "p-4 m-2" (Css.to_string combined)

     

       17
       17
       +
       

     

       18
       18
       +
       let test_css_concat () =

     

       19
       19
       +
         let classes = [Css.make "p-4"; Css.make "m-2"; Css.make "bg-blue-500"] in

     

       20
       20
       +
         let result = Css.concat classes in

     

       21
       21
       +
         Alcotest.(check string) "concat classes" "p-4 m-2 bg-blue-500" (Css.to_string result)

     

       22
       22
       +
       

     

       23
       23
       +
       let test_css_deduplication () =

     

       24
       24
       +
         let c1 = Css.make "p-4" in

     

       25
       25
       +
         let c2 = Css.make "p-4" in

     

       26
       26
       +
         let combined = Css.combine c1 c2 in

     

       27
       27
       +
         (* Current implementation doesn't deduplicate - this documents current behavior *)

     

       28
       28
       +
         Alcotest.(check string) "no deduplication" "p-4 p-4" (Css.to_string combined)

     

       29
       29
       +
       

     

       30
       30
       +
       (* Additional edge case tests *)

     

       31
       31
       +
       let test_css_empty_string () =

     

       32
       32
       +
         (* Test empty string handling *)

     

       33
       33
       +
         let css = Css.make "" in

     

       34
       34
       +
         Alcotest.(check string) "empty string class" "" (Css.to_string css)

     

       35
       35
       +
       

     

       36
       36
       +
       let suite = [

     

       37
       37
       +
         "css_make", `Quick, test_css_make;

     

       38
       38
       +
         "css_empty", `Quick, test_css_empty;

     

       39
       39
       +
         "css_combine", `Quick, test_css_combine;

     

       40
       40
       +
         "css_concat", `Quick, test_css_concat;

     

       41
       41
       +
         "css_deduplication", `Quick, test_css_deduplication;

     

       42
       42
       +
         "css_empty_string", `Quick, test_css_empty_string;

     

       43
       43
       +
       ]

+50

test/test_effects.ml

···

       1
       1
       +
       open Tailwind

     

       2
       2
       +
       

     

       3
       3
       +
       let test_transition () =

     

       4
       4
       +
         let trans = Effects.transition `All in

     

       5
       5
       +
         Alcotest.(check string) "transition all" "transition-all" (Css.to_string trans)

     

       6
       6
       +
       

     

       7
       7
       +
       let test_transition_colors () =

     

       8
       8
       +
         let trans = Effects.transition `Colors in

     

       9
       9
       +
         Alcotest.(check string) "transition colors" "transition-colors" (Css.to_string trans)

     

       10
       10
       +
       

     

       11
       11
       +
       let test_duration () =

     

       12
       12
       +
         let dur = Effects.duration 300 in

     

       13
       13
       +
         Alcotest.(check string) "duration 300ms" "duration-300" (Css.to_string dur)

     

       14
       14
       +
       

     

       15
       15
       +
       let test_ease () =

     

       16
       16
       +
         let ease_in = Effects.ease `In in

     

       17
       17
       +
         Alcotest.(check string) "ease in" "ease-in" (Css.to_string ease_in);

     

       18
       18
       +
         

     

       19
       19
       +
         let ease_out = Effects.ease `Out in

     

       20
       20
       +
         Alcotest.(check string) "ease out" "ease-out" (Css.to_string ease_out)

     

       21
       21
       +
       

     

       22
       22
       +
       let test_shadow () =

     

       23
       23
       +
         let shadow = Effects.shadow_md in

     

       24
       24
       +
         Alcotest.(check string) "shadow medium" "shadow-md" (Css.to_string shadow)

     

       25
       25
       +
       

     

       26
       26
       +
       let test_rounded () =

     

       27
       27
       +
         let rounded = Effects.rounded_lg in

     

       28
       28
       +
         Alcotest.(check string) "rounded large" "rounded-lg" (Css.to_string rounded)

     

       29
       29
       +
       

     

       30
       30
       +
       let test_border () =

     

       31
       31
       +
         let border = Effects.border in

     

       32
       32
       +
         Alcotest.(check string) "basic border" "border" (Css.to_string border)

     

       33
       33
       +
       

     

       34
       34
       +
       (* Additional duration tests *)

     

       35
       35
       +
       let test_duration_edge_cases () =

     

       36
       36
       +
         let zero = Effects.duration 0 in

     

       37
       37
       +
         let large = Effects.duration 9999 in

     

       38
       38
       +
         Alcotest.(check string) "zero duration" "duration-0" (Css.to_string zero);

     

       39
       39
       +
         Alcotest.(check string) "large duration" "duration-9999" (Css.to_string large)

     

       40
       40
       +
       

     

       41
       41
       +
       let suite = [

     

       42
       42
       +
         "transition", `Quick, test_transition;

     

       43
       43
       +
         "transition_colors", `Quick, test_transition_colors;

     

       44
       44
       +
         "duration", `Quick, test_duration;

     

       45
       45
       +
         "ease", `Quick, test_ease;

     

       46
       46
       +
         "shadow", `Quick, test_shadow;

     

       47
       47
       +
         "rounded", `Quick, test_rounded;

     

       48
       48
       +
         "border", `Quick, test_border;

     

       49
       49
       +
         "duration_edge_cases", `Quick, test_duration_edge_cases;

     

       50
       50
       +
       ]

+72

test/test_patterns.ml

···

       1
       1
       +
       open Tailwind

     

       2
       2
       +
       

     

       3
       3
       +
       let contains_substring s sub =

     

       4
       4
       +
         let len = String.length s in

     

       5
       5
       +
         let sub_len = String.length sub in

     

       6
       6
       +
         let rec aux i =

     

       7
       7
       +
           if i > len - sub_len then false

     

       8
       8
       +
           else if String.sub s i sub_len = sub then true

     

       9
       9
       +
           else aux (i + 1)

     

       10
       10
       +
         in

     

       11
       11
       +
         if sub_len = 0 then true else aux 0

     

       12
       12
       +
       

     

       13
       13
       +
       let test_flex_center () =

     

       14
       14
       +
         let center = Patterns.flex_center in

     

       15
       15
       +
         let result = Css.to_string center in

     

       16
       16
       +
         Alcotest.(check bool) "contains flex" (contains_substring result "flex");

     

       17
       17
       +
         Alcotest.(check bool) "contains justify" (contains_substring result "justify");

     

       18
       18
       +
         Alcotest.(check bool) "contains items" (contains_substring result "items")

     

       19
       19
       +
       

     

       20
       20
       +
       let test_absolute_center () =

     

       21
       21
       +
         let center = Patterns.absolute_center in

     

       22
       22
       +
         let result = Css.to_string center in

     

       23
       23
       +
         Alcotest.(check bool) "contains absolute" (contains_substring result "absolute");

     

       24
       24
       +
         Alcotest.(check bool) "contains top-1/2" (contains_substring result "top-1/2");

     

       25
       25
       +
         Alcotest.(check bool) "contains left-1/2" (contains_substring result "left-1/2")

     

       26
       26
       +
       

     

       27
       27
       +
       let test_stack_default () =

     

       28
       28
       +
         let stack = Patterns.stack () in

     

       29
       29
       +
         let result = Css.to_string stack in

     

       30
       30
       +
         Alcotest.(check bool) "contains flex" (contains_substring result "flex");

     

       31
       31
       +
         Alcotest.(check bool) "non-empty" (String.length result > 0)

     

       32
       32
       +
       

     

       33
       33
       +
       let test_stack_with_gap () =

     

       34
       34
       +
         let stack = Patterns.stack ~gap:(Size.rem 2.0) () in

     

       35
       35
       +
         let result = Css.to_string stack in

     

       36
       36
       +
         Alcotest.(check bool) "contains flex" (contains_substring result "flex");

     

       37
       37
       +
         Alcotest.(check bool) "non-empty" (String.length result > 0)

     

       38
       38
       +
       

     

       39
       39
       +
       let test_inline_stack () =

     

       40
       40
       +
         let inline = Patterns.inline_stack () in

     

       41
       41
       +
         let result = Css.to_string inline in

     

       42
       42
       +
         Alcotest.(check bool) "contains flex" (contains_substring result "flex");

     

       43
       43
       +
         Alcotest.(check bool) "non-empty" (String.length result > 0)

     

       44
       44
       +
       

     

       45
       45
       +
       let test_card () =

     

       46
       46
       +
         let card = Patterns.card in

     

       47
       47
       +
         let result = Css.to_string card in

     

       48
       48
       +
         Alcotest.(check bool) "contains bg-white" (contains_substring result "bg-white");

     

       49
       49
       +
         Alcotest.(check bool) "contains rounded" (contains_substring result "rounded");

     

       50
       50
       +
         Alcotest.(check bool) "contains shadow" (contains_substring result "shadow")

     

       51
       51
       +
       

     

       52
       52
       +
       let test_container () =

     

       53
       53
       +
         let container = Patterns.container () in

     

       54
       54
       +
         let result = Css.to_string container in

     

       55
       55
       +
         Alcotest.(check bool) "contains container" (contains_substring result "container")

     

       56
       56
       +
       

     

       57
       57
       +
       let test_container_centered () =

     

       58
       58
       +
         let container = Patterns.container ~center:true () in

     

       59
       59
       +
         let result = Css.to_string container in

     

       60
       60
       +
         Alcotest.(check bool) "contains container" (contains_substring result "container");

     

       61
       61
       +
         Alcotest.(check bool) "contains mx-auto" (contains_substring result "mx-auto")

     

       62
       62
       +
       

     

       63
       63
       +
       let suite = [

     

       64
       64
       +
         "flex_center", `Quick, test_flex_center;

     

       65
       65
       +
         "absolute_center", `Quick, test_absolute_center;

     

       66
       66
       +
         "stack_default", `Quick, test_stack_default;

     

       67
       67
       +
         "stack_with_gap", `Quick, test_stack_with_gap;

     

       68
       68
       +
         "inline_stack", `Quick, test_inline_stack;

     

       69
       69
       +
         "card", `Quick, test_card;

     

       70
       70
       +
         "container", `Quick, test_container;

     

       71
       71
       +
         "container_centered", `Quick, test_container_centered;

     

       72
       72
       +
       ]

test/test_runner.ml

···

       1
       1
       +
       open Alcotest

     

       2
       2
       +
       

     

       3
       3
       +
       let () =

     

       4
       4
       +
         run "Tailwind OCaml Library" [

     

       5
       5
       +
           (* Basic functionality tests *)

     

       6
       6
       +
           "Basic", Test_simple.suite;

     

       7
       7
       +
         ]

+25

test/test_simple.ml

···

       1
       1
       +
       open Tailwind

     

       2
       2
       +
       

     

       3
       3
       +
       let test_basic_functionality () =

     

       4
       4
       +
         (* Test basic CSS creation *)

     

       5
       5
       +
         let css1 = Css.make "p-4" in

     

       6
       6
       +
         let css2 = Css.make "m-2" in

     

       7
       7
       +
         let combined = Css.combine css1 css2 in

     

       8
       8
       +
         Alcotest.(check string) "basic combination" "p-4 m-2" (Css.to_string combined);

     

       9
       9
       +
         

     

       10
       10
       +
         (* Test tw function *)

     

       11
       11
       +
         let classes = tw [css1; css2] in

     

       12
       12
       +
         Alcotest.(check string) "tw function" "p-4 m-2" (Css.to_string classes);

     

       13
       13
       +
       

     

       14
       14
       +
         (* Test patterns *)

     

       15
       15
       +
         let center = Patterns.flex_center in

     

       16
       16
       +
         let result = Css.to_string center in

     

       17
       17
       +
         Alcotest.(check bool) "patterns work" (String.length result > 0) true;

     

       18
       18
       +
       

     

       19
       19
       +
         (* Test effects *)

     

       20
       20
       +
         let shadow = Effects.shadow_md in

     

       21
       21
       +
         Alcotest.(check string) "shadow effect" "shadow-md" (Css.to_string shadow)

     

       22
       22
       +
       

     

       23
       23
       +
       let suite = [

     

       24
       24
       +
         "basic_functionality", `Quick, test_basic_functionality;

     

       25
       25
       +
       ]

+61

test/test_tailwind.ml

···

       1
       1
       +
       open Tailwind

     

       2
       2
       +
       

     

       3
       3
       +
       let test_tw_combinator () =

     

       4
       4
       +
         let classes = tw [

     

       5
       5
       +
           Color.bg (Color.make `Blue ~variant:`V500 ());

     

       6
       6
       +
           Effects.rounded_md;

     

       7
       7
       +
           Spacing.(to_class (p (Size.rem 1.0)));

     

       8
       8
       +
         ] in

     

       9
       9
       +
         let result = to_string classes in

     

       10
       10
       +
         Alcotest.(check bool) "contains bg-blue-500" (String.contains_s result "bg-blue-500");

     

       11
       11
       +
         Alcotest.(check bool) "contains rounded-md" (String.contains_s result "rounded-md")

     

       12
       12
       +
       

     

       13
       13
       +
       let test_class_list_conditional () =

     

       14
       14
       +
         let classes = class_list [

     

       15
       15
       +
           (Color.bg (Color.make `Red ()), true);

     

       16
       16
       +
           (Color.text (Color.make `White ()), false);

     

       17
       17
       +
           (Effects.shadow_lg, true);

     

       18
       18
       +
         ] in

     

       19
       19
       +
         let result = to_string classes in

     

       20
       20
       +
         Alcotest.(check bool) "contains red background" (String.contains_s result "bg-red");

     

       21
       21
       +
         Alcotest.(check bool) "excludes white text" (not (String.contains_s result "text-white"));

     

       22
       22
       +
         Alcotest.(check bool) "contains shadow" (String.contains_s result "shadow-lg")

     

       23
       23
       +
       

     

       24
       24
       +
       let test_focus_ring () =

     

       25
       25
       +
         let ring = focus_ring () in

     

       26
       26
       +
         let result = to_string ring in

     

       27
       27
       +
         Alcotest.(check bool) "contains focus styles" (String.contains_s result "focus")

     

       28
       28
       +
       

     

       29
       29
       +
       let test_focus_ring_with_color () =

     

       30
       30
       +
         let blue = Color.make `Blue ~variant:`V500 () in

     

       31
       31
       +
         let ring = focus_ring ~color:blue () in

     

       32
       32
       +
         let result = to_string ring in

     

       33
       33
       +
         Alcotest.(check bool) "contains focus styles" (String.contains_s result "focus")

     

       34
       34
       +
       

     

       35
       35
       +
       let test_sr_only () =

     

       36
       36
       +
         let sr = sr_only in

     

       37
       37
       +
         let result = to_string sr in

     

       38
       38
       +
         Alcotest.(check string) "screen reader only" "sr-only" result

     

       39
       39
       +
       

     

       40
       40
       +
       let test_module_integration () =

     

       41
       41
       +
         let complex_button = tw [

     

       42
       42
       +
           Color.bg (Color.make `Blue ~variant:`V500 ());

     

       43
       43
       +
           Color.text (Color.make `White ());

     

       44
       44
       +
           Spacing.(to_class (px (Size.rem 1.0)));

     

       45
       45
       +
           Spacing.(to_class (py (Size.rem 0.5)));

     

       46
       46
       +
           Effects.rounded_md;

     

       47
       47
       +
           Effects.shadow_sm;

     

       48
       48
       +
           Effects.transition `Colors;

     

       49
       49
       +
           Variants.hover (Color.bg (Color.make `Blue ~variant:`V600 ()));

     

       50
       50
       +
         ] in

     

       51
       51
       +
         let result = to_string complex_button in

     

       52
       52
       +
         Alcotest.(check bool) "integration works" (String.length result > 0)

     

       53
       53
       +
       

     

       54
       54
       +
       let suite = [

     

       55
       55
       +
         "tw_combinator", `Quick, test_tw_combinator;

     

       56
       56
       +
         "class_list_conditional", `Quick, test_class_list_conditional;

     

       57
       57
       +
         "focus_ring", `Quick, test_focus_ring;

     

       58
       58
       +
         "focus_ring_with_color", `Quick, test_focus_ring_with_color;

     

       59
       59
       +
         "sr_only", `Quick, test_sr_only;

     

       60
       60
       +
         "module_integration", `Quick, test_module_integration;

     

       61
       61
       +
       ]