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

.gitignore

···

       0

···

       1
       +
       _build

CLAUDE.md

···

       1
       +
       My goal is to build a high quality professions OCaml library to generate Tailwind CSS components. Build a core `tailwind` library that serialises the CSS into strings. Then build a `tailwind-html` library that uses the Htmlit OCaml HTML generation library https://github.com/dbuenzli/htmlit for common components.

     

       2
       +
       

     

       3
       +
       You can find full Tailwind docs in tailwind-llms.txt

+36

dune-project

···

       1
       +
       (lang dune 3.0)

     

       2
       +
       

     

       3
       +
       (name tailwind)

     

       4
       +
       

     

       5
       +
       (generate_opam_files true)

     

       6
       +
       

     

       7
       +
       (source

     

       8
       +
        (github yourusername/tailwind-ocaml))

     

       9
       +
       

     

       10
       +
       (authors "Your Name")

     

       11
       +
       

     

       12
       +
       (maintainers "Your Name")

     

       13
       +
       

     

       14
       +
       (license MIT)

     

       15
       +
       

     

       16
       +
       (documentation https://yourusername.github.io/tailwind-ocaml/)

     

       17
       +
       

     

       18
       +
       (package

     

       19
       +
        (name tailwind)

     

       20
       +
        (synopsis "Type-safe Tailwind CSS generation for OCaml")

     

       21
       +
        (description "A comprehensive OCaml library for generating Tailwind CSS classes with full type safety")

     

       22
       +
        (depends

     

       23
       +
         ocaml

     

       24
       +
         (dune (>= 3.0))

     

       25
       +
         (odoc :with-doc)))

     

       26
       +
       

     

       27
       +
       (package

     

       28
       +
        (name tailwind-html)

     

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

     

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

     

       31
       +
        (depends

     

       32
       +
         ocaml

     

       33
       +
         (dune (>= 3.0))

     

       34
       +
         tailwind

     

       35
       +
         (htmlit (>= 0.1.0))

     

       36
       +
         (odoc :with-doc)))

+67

examples/advanced_features.ml

···

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

     

       2
       +
       

     

       3
       +
       let () =

     

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

     

       5
       +
         

     

       6
       +
         (* V4 Container Queries *)

     

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

     

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

     

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

     

       10
       +
         

     

       11
       +
         (* V4 Starting Style *)

     

       12
       +
         let starting_animation = Tailwind.V4.starting_style

     

       13
       +
           (Tailwind.Css.make "opacity-0") in

     

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

     

       15
       +
         

     

       16
       +
         (* V4 Text Shadow *)

     

       17
       +
         let text_shadow = Tailwind.V4.text_shadow `Lg in

     

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

     

       19
       +
         

     

       20
       +
         (* Advanced Variants - Pseudo-classes *)

     

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

     

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

     

       23
       +
         

     

       24
       +
         let focus_visible = Tailwind.Variants.apply 

     

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

     

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

     

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

     

       28
       +
         

     

       29
       +
         (* Responsive with Media Features *)

     

       30
       +
         let dark_mode = Tailwind.Responsive.(apply 

     

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

     

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

     

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

     

       34
       +
         

     

       35
       +
         let motion_safe = Tailwind.Responsive.(apply

     

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

     

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

     

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

     

       39
       +
         

     

       40
       +
         (* Advanced Effects *)

     

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

     

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

     

       43
       +
         

     

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

     

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

     

       46
       +
         

     

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

     

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

     

       49
       +
         

     

       50
       +
         let rotate_transform = Tailwind.Effects.(to_class (rotate 45)) in

     

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

     

       52
       +
         

     

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

     

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

     

       55
       +
         

     

       56
       +
         (* Complex Combination *)

     

       57
       +
         let complex_card = Tailwind.tw [

     

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

     

       59
       +
           Tailwind.Effects.rounded_lg;

     

       60
       +
           Tailwind.Effects.shadow_md;

     

       61
       +
           backdrop_blur;

     

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

     

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

     

       64
       +
           Tailwind.transition `All;

     

       65
       +
           hover_effect;

     

       66
       +
         ] in

     

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

+45

examples/basic_usage.ml

···

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

     

       2
       +
       

     

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

     

       4
       +
       

     

       5
       +
       let () =

     

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

     

       7
       +
         let flex_center_classes = Tailwind.flex_center in

     

       8
       +
         let focus_ring_classes = Tailwind.focus_ring () in

     

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

     

       10
       +
         

     

       11
       +
         (* Utility patterns *)

     

       12
       +
         let button_reset = Tailwind.button_reset in

     

       13
       +
         let input_reset = Tailwind.input_reset in

     

       14
       +
         let sr_only = Tailwind.sr_only in

     

       15
       +
         

     

       16
       +
         (* Transitions *)

     

       17
       +
         let transition_all = Tailwind.transition `All in

     

       18
       +
         let duration_300 = Tailwind.duration 300 in

     

       19
       +
         let ease_in_out = Tailwind.ease `In_out in

     

       20
       +
         

     

       21
       +
         (* Conditional classes *)

     

       22
       +
         let conditional_classes = Tailwind.class_list [

     

       23
       +
           (Tailwind.flex_center, true);

     

       24
       +
           (Tailwind.button_reset, false);

     

       25
       +
         ] in

     

       26
       +
         

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

       38
       +
         

     

       39
       +
         (* Combining classes *)

     

       40
       +
         let combined_classes = Tailwind.tw [

     

       41
       +
           flex_center_classes;

     

       42
       +
           container_classes;

     

       43
       +
           transition_all;

     

       44
       +
         ] in

     

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

examples/dune

···

       1
       +
       (executables

     

       2
       +
        (public_names basic_usage module_usage advanced_features)

     

       3
       +
        (names basic_usage module_usage advanced_features)

     

       4
       +
        (package tailwind)

     

       5
       +
        (libraries tailwind))

+58

examples/module_usage.ml

···

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

     

       2
       +
       

     

       3
       +
       let () =

     

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

     

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

     

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

     

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

     

       8
       +
         let rounded = Tailwind.Effects.rounded_md in

     

       9
       +
         let flex_display = Tailwind.Display.flex in

     

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

     

       11
       +
         

     

       12
       +
         (* Combine all classes *)

     

       13
       +
         let button_classes = Tailwind.tw [

     

       14
       +
           blue_bg;

     

       15
       +
           white_text;

     

       16
       +
           padding;

     

       17
       +
           rounded;

     

       18
       +
           flex_display;

     

       19
       +
           center_items;

     

       20
       +
         ] in

     

       21
       +
         

     

       22
       +
         (* Typography example *)

     

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

     

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

     

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

     

       26
       +
         

     

       27
       +
         let heading_classes = Tailwind.tw [

     

       28
       +
           heading;

     

       29
       +
           bold_text;

     

       30
       +
           center_align;

     

       31
       +
         ] in

     

       32
       +
         

     

       33
       +
         (* Layout example *)

     

       34
       +
         let full_width = Tailwind.Layout.w_full in

     

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

     

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

     

       37
       +
         

     

       38
       +
         let container_classes = Tailwind.tw [

     

       39
       +
           full_width;

     

       40
       +
           fixed_height;

     

       41
       +
           overflow_hidden;

     

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

     

       43
       +
         ] in

     

       44
       +
         

     

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

     

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

     

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

     

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

     

       49
       +
         

     

       50
       +
         (* Show conditional classes *)

     

       51
       +
         let is_primary = true in

     

       52
       +
         let conditional_button = Tailwind.class_list [

     

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

     

       54
       +
           (blue_bg, is_primary);

     

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

     

       56
       +
         ] in

     

       57
       +
         

     

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

+68

lib/tailwind-html/button.mli

···

       1
       +
       (** Button component module *)

     

       2
       +
       

     

       3
       +
       (** Button configuration *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Button variants *)

     

       7
       +
       type variant =

     

       8
       +
         | Primary

     

       9
       +
         | Secondary

     

       10
       +
         | Outline

     

       11
       +
         | Ghost

     

       12
       +
         | Link

     

       13
       +
         | Danger

     

       14
       +
         | Success

     

       15
       +
       

     

       16
       +
       (** Button sizes *)

     

       17
       +
       type size =

     

       18
       +
         | Xs

     

       19
       +
         | Sm

     

       20
       +
         | Md

     

       21
       +
         | Lg

     

       22
       +
         | Xl

     

       23
       +
       

     

       24
       +
       (** Create a button *)

     

       25
       +
       val make :

     

       26
       +
         ?variant:variant ->

     

       27
       +
         ?size:size ->

     

       28
       +
         ?disabled:bool ->

     

       29
       +
         ?loading:bool ->

     

       30
       +
         ?full_width:bool ->

     

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

     

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

     

       33
       +
         ?classes:Tailwind.t ->

     

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

     

       35
       +
         ?onclick:string ->

     

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

     

       37
       +
         unit -> t

     

       38
       +
       

     

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

     

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

     

       41
       +
       

     

       42
       +
       (** Create button group *)

     

       43
       +
       val group :

     

       44
       +
         ?classes:Tailwind.t ->

     

       45
       +
         ?vertical:bool ->

     

       46
       +
         buttons:t list ->

     

       47
       +
         unit -> Htmlit.El.html

     

       48
       +
       

     

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

     

       50
       +
       val icon :

     

       51
       +
         ?variant:variant ->

     

       52
       +
         ?size:size ->

     

       53
       +
         ?disabled:bool ->

     

       54
       +
         ?classes:Tailwind.t ->

     

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

     

       56
       +
         ?aria_label:string ->

     

       57
       +
         icon:Htmlit.El.html ->

     

       58
       +
         unit -> Htmlit.El.html

     

       59
       +
       

     

       60
       +
       (** Link styled as button *)

     

       61
       +
       val link :

     

       62
       +
         ?variant:variant ->

     

       63
       +
         ?size:size ->

     

       64
       +
         ?classes:Tailwind.t ->

     

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

     

       66
       +
         href:string ->

     

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

     

       68
       +
         unit -> Htmlit.El.html

+66

lib/tailwind-html/card.mli

···

       1
       +
       (** Card component module *)

     

       2
       +
       

     

       3
       +
       (** Card configuration *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Card variants *)

     

       7
       +
       type variant =

     

       8
       +
         | Default

     

       9
       +
         | Outlined

     

       10
       +
         | Elevated

     

       11
       +
         | Flat

     

       12
       +
       

     

       13
       +
       (** Create a card *)

     

       14
       +
       val make :

     

       15
       +
         ?variant:variant ->

     

       16
       +
         ?header:Htmlit.El.html ->

     

       17
       +
         ?footer:Htmlit.El.html ->

     

       18
       +
         ?image:Htmlit.El.html ->

     

       19
       +
         ?padding:bool ->

     

       20
       +
         ?hoverable:bool ->

     

       21
       +
         ?clickable:bool ->

     

       22
       +
         ?classes:Tailwind.t ->

     

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

     

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

     

       25
       +
         unit -> t

     

       26
       +
       

     

       27
       +
       (** Convert card to Htmlit element *)

     

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

     

       29
       +
       

     

       30
       +
       (** Card header section *)

     

       31
       +
       val header :

     

       32
       +
         ?classes:Tailwind.t ->

     

       33
       +
         ?title:string ->

     

       34
       +
         ?subtitle:string ->

     

       35
       +
         ?actions:Htmlit.El.html ->

     

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

     

       37
       +
         unit -> Htmlit.El.html

     

       38
       +
       

     

       39
       +
       (** Card body section *)

     

       40
       +
       val body :

     

       41
       +
         ?classes:Tailwind.t ->

     

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

     

       43
       +
         unit -> Htmlit.El.html

     

       44
       +
       

     

       45
       +
       (** Card footer section *)

     

       46
       +
       val footer :

     

       47
       +
         ?classes:Tailwind.t ->

     

       48
       +
         ?actions:Htmlit.El.html list ->

     

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

     

       50
       +
         unit -> Htmlit.El.html

     

       51
       +
       

     

       52
       +
       (** Card image section *)

     

       53
       +
       val image :

     

       54
       +
         ?classes:Tailwind.t ->

     

       55
       +
         ?alt:string ->

     

       56
       +
         ?cover:bool ->

     

       57
       +
         src:string ->

     

       58
       +
         unit -> Htmlit.El.html

     

       59
       +
       

     

       60
       +
       (** Create a card grid *)

     

       61
       +
       val grid :

     

       62
       +
         ?cols:[`Xs of int | `Sm of int | `Md of int | `Lg of int | `Xl of int] list ->

     

       63
       +
         ?gap:Tailwind.Size.t ->

     

       64
       +
         ?classes:Tailwind.t ->

     

       65
       +
         cards:t list ->

     

       66
       +
         unit -> Htmlit.El.html

+36

lib/tailwind-html/component.mli

···

       1
       +
       (** Base component module for Tailwind-Htmlit integration *)

     

       2
       +
       

     

       3
       +
       (** Component configuration *)

     

       4
       +
       type t

     

       5
       +
       

     

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

     

       7
       +
       val make : 

     

       8
       +
         ?classes:Tailwind.t ->

     

       9
       +
         ?attributes:(string * string) list ->

     

       10
       +
         ?id:string ->

     

       11
       +
         ?data:(string * string) list ->

     

       12
       +
         unit -> t

     

       13
       +
       

     

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

     

       15
       +
       val add_classes : Tailwind.t -> t -> t

     

       16
       +
       

     

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

     

       18
       +
       val add_attributes : (string * string) list -> t -> t

     

       19
       +
       

     

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

     

       21
       +
       val to_htmlit_atts : t -> Htmlit.At.t list

     

       22
       +
       

     

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

     

       24
       +
       val apply : t -> Htmlit.El.html -> Htmlit.El.html

     

       25
       +
       

     

       26
       +
       (** Create a div with component styling *)

     

       27
       +
       val div : t -> Htmlit.El.html list -> Htmlit.El.html

     

       28
       +
       

     

       29
       +
       (** Create a span with component styling *)

     

       30
       +
       val span : t -> Htmlit.El.html list -> Htmlit.El.html

     

       31
       +
       

     

       32
       +
       (** Create a section with component styling *)

     

       33
       +
       val section : t -> Htmlit.El.html list -> Htmlit.El.html

     

       34
       +
       

     

       35
       +
       (** Create an article with component styling *)

     

       36
       +
       val article : t -> Htmlit.El.html list -> Htmlit.El.html

lib/tailwind-html/dune

···

       1
       +
       (library

     

       2
       +
        (public_name tailwind-html)

     

       3
       +
        (name tailwind_html)

     

       4
       +
        (libraries tailwind htmlit)

     

       5
       +
        (modules component button card form layout tailwind_html)

     

       6
       +
        (modules_without_implementation component button card form layout tailwind_html))

+127

lib/tailwind-html/form.mli

···

       1
       +
       (** Form component module *)

     

       2
       +
       

     

       3
       +
       (** Form field configuration *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Input types *)

     

       7
       +
       type input_type =

     

       8
       +
         | Text

     

       9
       +
         | Email

     

       10
       +
         | Password

     

       11
       +
         | Number

     

       12
       +
         | Tel

     

       13
       +
         | Url

     

       14
       +
         | Search

     

       15
       +
         | Date

     

       16
       +
         | Time

     

       17
       +
         | Datetime_local

     

       18
       +
       

     

       19
       +
       (** Field validation state *)

     

       20
       +
       type validation_state =

     

       21
       +
         | Valid

     

       22
       +
         | Invalid

     

       23
       +
         | Warning

     

       24
       +
       

     

       25
       +
       (** Create an input field *)

     

       26
       +
       val input :

     

       27
       +
         ?input_type:input_type ->

     

       28
       +
         ?label:string ->

     

       29
       +
         ?placeholder:string ->

     

       30
       +
         ?value:string ->

     

       31
       +
         ?name:string ->

     

       32
       +
         ?id:string ->

     

       33
       +
         ?required:bool ->

     

       34
       +
         ?disabled:bool ->

     

       35
       +
         ?readonly:bool ->

     

       36
       +
         ?validation:validation_state ->

     

       37
       +
         ?helper_text:string ->

     

       38
       +
         ?error_text:string ->

     

       39
       +
         ?classes:Tailwind.t ->

     

       40
       +
         ?attributes:(string * string) list ->

     

       41
       +
         unit -> t

     

       42
       +
       

     

       43
       +
       (** Create a textarea field *)

     

       44
       +
       val textarea :

     

       45
       +
         ?label:string ->

     

       46
       +
         ?placeholder:string ->

     

       47
       +
         ?value:string ->

     

       48
       +
         ?name:string ->

     

       49
       +
         ?id:string ->

     

       50
       +
         ?rows:int ->

     

       51
       +
         ?required:bool ->

     

       52
       +
         ?disabled:bool ->

     

       53
       +
         ?readonly:bool ->

     

       54
       +
         ?validation:validation_state ->

     

       55
       +
         ?helper_text:string ->

     

       56
       +
         ?error_text:string ->

     

       57
       +
         ?classes:Tailwind.t ->

     

       58
       +
         ?attributes:(string * string) list ->

     

       59
       +
         unit -> t

     

       60
       +
       

     

       61
       +
       (** Create a select field *)

     

       62
       +
       val select :

     

       63
       +
         ?label:string ->

     

       64
       +
         ?name:string ->

     

       65
       +
         ?id:string ->

     

       66
       +
         ?required:bool ->

     

       67
       +
         ?disabled:bool ->

     

       68
       +
         ?validation:validation_state ->

     

       69
       +
         ?helper_text:string ->

     

       70
       +
         ?error_text:string ->

     

       71
       +
         ?classes:Tailwind.t ->

     

       72
       +
         ?attributes:(string * string) list ->

     

       73
       +
         options:(string * string) list -> (* value, label pairs *)

     

       74
       +
         unit -> t

     

       75
       +
       

     

       76
       +
       (** Create a checkbox field *)

     

       77
       +
       val checkbox :

     

       78
       +
         ?label:string ->

     

       79
       +
         ?name:string ->

     

       80
       +
         ?id:string ->

     

       81
       +
         ?checked:bool ->

     

       82
       +
         ?disabled:bool ->

     

       83
       +
         ?classes:Tailwind.t ->

     

       84
       +
         ?attributes:(string * string) list ->

     

       85
       +
         unit -> t

     

       86
       +
       

     

       87
       +
       (** Create a radio button *)

     

       88
       +
       val radio :

     

       89
       +
         ?label:string ->

     

       90
       +
         ?name:string ->

     

       91
       +
         ?id:string ->

     

       92
       +
         ?value:string ->

     

       93
       +
         ?checked:bool ->

     

       94
       +
         ?disabled:bool ->

     

       95
       +
         ?classes:Tailwind.t ->

     

       96
       +
         ?attributes:(string * string) list ->

     

       97
       +
         unit -> t

     

       98
       +
       

     

       99
       +
       (** Create a switch/toggle *)

     

       100
       +
       val switch :

     

       101
       +
         ?label:string ->

     

       102
       +
         ?name:string ->

     

       103
       +
         ?id:string ->

     

       104
       +
         ?checked:bool ->

     

       105
       +
         ?disabled:bool ->

     

       106
       +
         ?classes:Tailwind.t ->

     

       107
       +
         ?attributes:(string * string) list ->

     

       108
       +
         unit -> t

     

       109
       +
       

     

       110
       +
       (** Convert form field to Htmlit element *)

     

       111
       +
       val to_html : t -> Htmlit.El.html

     

       112
       +
       

     

       113
       +
       (** Create a form group (label + input + helper/error text) *)

     

       114
       +
       val group :

     

       115
       +
         ?classes:Tailwind.t ->

     

       116
       +
         fields:t list ->

     

       117
       +
         unit -> Htmlit.El.html

     

       118
       +
       

     

       119
       +
       (** Create a complete form *)

     

       120
       +
       val form :

     

       121
       +
         ?action:string ->

     

       122
       +
         ?method_:[`Get | `Post] ->

     

       123
       +
         ?classes:Tailwind.t ->

     

       124
       +
         ?attributes:(string * string) list ->

     

       125
       +
         fields:t list ->

     

       126
       +
         ?submit:Button.t ->

     

       127
       +
         unit -> Htmlit.El.html

+102

lib/tailwind-html/layout.mli

···

       1
       +
       (** Layout component module *)

     

       2
       +
       

     

       3
       +
       (** Layout configuration *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Container sizes *)

     

       7
       +
       type container_size =

     

       8
       +
         | Sm

     

       9
       +
         | Md

     

       10
       +
         | Lg

     

       11
       +
         | Xl

     

       12
       +
         | Xl2

     

       13
       +
         | Full

     

       14
       +
         | Fluid

     

       15
       +
       

     

       16
       +
       (** Create a container *)

     

       17
       +
       val container :

     

       18
       +
         ?size:container_size ->

     

       19
       +
         ?center:bool ->

     

       20
       +
         ?padding:bool ->

     

       21
       +
         ?classes:Tailwind.t ->

     

       22
       +
         ?attributes:(string * string) list ->

     

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

     

       24
       +
         unit -> t

     

       25
       +
       

     

       26
       +
       (** Create a flex container *)

     

       27
       +
       val flex :

     

       28
       +
         ?direction:Tailwind.Flexbox.direction ->

     

       29
       +
         ?justify:Tailwind.Flexbox.justify ->

     

       30
       +
         ?align:Tailwind.Flexbox.align_items ->

     

       31
       +
         ?wrap:Tailwind.Flexbox.wrap ->

     

       32
       +
         ?gap:Tailwind.Size.t ->

     

       33
       +
         ?classes:Tailwind.t ->

     

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

     

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

     

       36
       +
         unit -> t

     

       37
       +
       

     

       38
       +
       (** Create a grid container *)

     

       39
       +
       val grid :

     

       40
       +
         ?cols:Tailwind.Grid.cols ->

     

       41
       +
         ?rows:Tailwind.Grid.rows ->

     

       42
       +
         ?gap:Tailwind.Size.t ->

     

       43
       +
         ?gap_x:Tailwind.Size.t ->

     

       44
       +
         ?gap_y:Tailwind.Size.t ->

     

       45
       +
         ?flow:Tailwind.Grid.flow ->

     

       46
       +
         ?classes:Tailwind.t ->

     

       47
       +
         ?attributes:(string * string) list ->

     

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

     

       49
       +
         unit -> t

     

       50
       +
       

     

       51
       +
       (** Create a stack (vertical flex) *)

     

       52
       +
       val stack :

     

       53
       +
         ?gap:Tailwind.Size.t ->

     

       54
       +
         ?align:Tailwind.Flexbox.align_items ->

     

       55
       +
         ?classes:Tailwind.t ->

     

       56
       +
         ?attributes:(string * string) list ->

     

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

     

       58
       +
         unit -> t

     

       59
       +
       

     

       60
       +
       (** Create a row (horizontal flex) *)

     

       61
       +
       val row :

     

       62
       +
         ?gap:Tailwind.Size.t ->

     

       63
       +
         ?justify:Tailwind.Flexbox.justify ->

     

       64
       +
         ?align:Tailwind.Flexbox.align_items ->

     

       65
       +
         ?wrap:bool ->

     

       66
       +
         ?classes:Tailwind.t ->

     

       67
       +
         ?attributes:(string * string) list ->

     

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

     

       69
       +
         unit -> t

     

       70
       +
       

     

       71
       +
       (** Create a sidebar layout *)

     

       72
       +
       val sidebar :

     

       73
       +
         ?side:[`Left | `Right] ->

     

       74
       +
         ?width:Tailwind.Size.t ->

     

       75
       +
         ?collapsible:bool ->

     

       76
       +
         ?classes:Tailwind.t ->

     

       77
       +
         ?attributes:(string * string) list ->

     

       78
       +
         sidebar:Htmlit.El.html ->

     

       79
       +
         content:Htmlit.El.html ->

     

       80
       +
         unit -> t

     

       81
       +
       

     

       82
       +
       (** Create a header/main/footer layout *)

     

       83
       +
       val page :

     

       84
       +
         ?header:Htmlit.El.html ->

     

       85
       +
         ?footer:Htmlit.El.html ->

     

       86
       +
         ?sidebar:Htmlit.El.html ->

     

       87
       +
         ?classes:Tailwind.t ->

     

       88
       +
         ?attributes:(string * string) list ->

     

       89
       +
         main:Htmlit.El.html ->

     

       90
       +
         unit -> t

     

       91
       +
       

     

       92
       +
       (** Convert layout to Htmlit element *)

     

       93
       +
       val to_html : t -> Htmlit.El.html

     

       94
       +
       

     

       95
       +
       (** Create a spacer element *)

     

       96
       +
       val spacer : ?size:Tailwind.Size.t -> unit -> Htmlit.El.html

     

       97
       +
       

     

       98
       +
       (** Create a divider *)

     

       99
       +
       val divider :

     

       100
       +
         ?orientation:[`Horizontal | `Vertical] ->

     

       101
       +
         ?classes:Tailwind.t ->

     

       102
       +
         unit -> Htmlit.El.html

+41

lib/tailwind-html/tailwind_html.mli

···

       1
       +
       (** Main Tailwind-HTML integration module *)

     

       2
       +
       

     

       3
       +
       (** Apply Tailwind classes to an Htmlit element *)

     

       4
       +
       val with_classes : Tailwind.t -> Htmlit.El.html -> Htmlit.El.html

     

       5
       +
       

     

       6
       +
       (** Apply Tailwind classes conditionally *)

     

       7
       +
       val with_classes_if : bool -> Tailwind.t -> Htmlit.El.html -> Htmlit.El.html

     

       8
       +
       

     

       9
       +
       (** Create an element with Tailwind classes *)

     

       10
       +
       val el : 

     

       11
       +
         string -> (* tag name *)

     

       12
       +
         ?classes:Tailwind.t ->

     

       13
       +
         ?attributes:(string * string) list ->

     

       14
       +
         Htmlit.El.html list -> (* children *)

     

       15
       +
         Htmlit.El.html

     

       16
       +
       

     

       17
       +
       (** Common HTML elements with Tailwind support *)

     

       18
       +
       val div : ?classes:Tailwind.t -> ?attributes:(string * string) list -> Htmlit.El.html list -> Htmlit.El.html

     

       19
       +
       val span : ?classes:Tailwind.t -> ?attributes:(string * string) list -> Htmlit.El.html list -> Htmlit.El.html

     

       20
       +
       val p : ?classes:Tailwind.t -> ?attributes:(string * string) list -> Htmlit.El.html list -> Htmlit.El.html

     

       21
       +
       val a : ?classes:Tailwind.t -> ?attributes:(string * string) list -> href:string -> Htmlit.El.html list -> Htmlit.El.html

     

       22
       +
       val img : ?classes:Tailwind.t -> ?attributes:(string * string) list -> src:string -> alt:string -> unit -> Htmlit.El.html

     

       23
       +
       val h1 : ?classes:Tailwind.t -> ?attributes:(string * string) list -> Htmlit.El.html list -> Htmlit.El.html

     

       24
       +
       val h2 : ?classes:Tailwind.t -> ?attributes:(string * string) list -> Htmlit.El.html list -> Htmlit.El.html

     

       25
       +
       val h3 : ?classes:Tailwind.t -> ?attributes:(string * string) list -> Htmlit.El.html list -> Htmlit.El.html

     

       26
       +
       val h4 : ?classes:Tailwind.t -> ?attributes:(string * string) list -> Htmlit.El.html list -> Htmlit.El.html

     

       27
       +
       val h5 : ?classes:Tailwind.t -> ?attributes:(string * string) list -> Htmlit.El.html list -> Htmlit.El.html

     

       28
       +
       val h6 : ?classes:Tailwind.t -> ?attributes:(string * string) list -> Htmlit.El.html list -> Htmlit.El.html

     

       29
       +
       val ul : ?classes:Tailwind.t -> ?attributes:(string * string) list -> Htmlit.El.html list -> Htmlit.El.html

     

       30
       +
       val ol : ?classes:Tailwind.t -> ?attributes:(string * string) list -> Htmlit.El.html list -> Htmlit.El.html

     

       31
       +
       val li : ?classes:Tailwind.t -> ?attributes:(string * string) list -> Htmlit.El.html list -> Htmlit.El.html

     

       32
       +
       

     

       33
       +
       (** Text element with typography utilities *)

     

       34
       +
       val text :

     

       35
       +
         ?size:Tailwind.Typography.font_size ->

     

       36
       +
         ?weight:Tailwind.Typography.font_weight ->

     

       37
       +
         ?color:Tailwind.Color.t ->

     

       38
       +
         ?align:Tailwind.Typography.text_align ->

     

       39
       +
         ?classes:Tailwind.t ->

     

       40
       +
         string -> (* text content *)

     

       41
       +
         Htmlit.El.html

+93

lib/tailwind/color.ml

···

       1
       +
       type opacity =

     

       2
       +
         | Alpha of int

     

       3
       +
         | Fraction of int * int

     

       4
       +
       

     

       5
       +
       type variant =

     

       6
       +
         | V50 | V100 | V200 | V300 | V400 | V500

     

       7
       +
         | V600 | V700 | V800 | V900 | V950

     

       8
       +
       

     

       9
       +
       type base =

     

       10
       +
         | Slate | Gray | Zinc | Neutral | Stone

     

       11
       +
         | Red | Orange | Amber | Yellow | Lime | Green

     

       12
       +
         | Emerald | Teal | Cyan | Sky | Blue | Indigo

     

       13
       +
         | Violet | Purple | Fuchsia | Pink | Rose

     

       14
       +
         | Black | White | Transparent | Current | Inherit

     

       15
       +
       

     

       16
       +
       type t = {

     

       17
       +
         base: base;

     

       18
       +
         variant: variant option;

     

       19
       +
         opacity: opacity option;

     

       20
       +
       }

     

       21
       +
       

     

       22
       +
       let make base ?variant ?opacity () = { base; variant; opacity }

     

       23
       +
       

     

       24
       +
       let base_to_string = function

     

       25
       +
         | Slate -> "slate"

     

       26
       +
         | Gray -> "gray"

     

       27
       +
         | Zinc -> "zinc"

     

       28
       +
         | Neutral -> "neutral"

     

       29
       +
         | Stone -> "stone"

     

       30
       +
         | Red -> "red"

     

       31
       +
         | Orange -> "orange"

     

       32
       +
         | Amber -> "amber"

     

       33
       +
         | Yellow -> "yellow"

     

       34
       +
         | Lime -> "lime"

     

       35
       +
         | Green -> "green"

     

       36
       +
         | Emerald -> "emerald"

     

       37
       +
         | Teal -> "teal"

     

       38
       +
         | Cyan -> "cyan"

     

       39
       +
         | Sky -> "sky"

     

       40
       +
         | Blue -> "blue"

     

       41
       +
         | Indigo -> "indigo"

     

       42
       +
         | Violet -> "violet"

     

       43
       +
         | Purple -> "purple"

     

       44
       +
         | Fuchsia -> "fuchsia"

     

       45
       +
         | Pink -> "pink"

     

       46
       +
         | Rose -> "rose"

     

       47
       +
         | Black -> "black"

     

       48
       +
         | White -> "white"

     

       49
       +
         | Transparent -> "transparent"

     

       50
       +
         | Current -> "current"

     

       51
       +
         | Inherit -> "inherit"

     

       52
       +
       

     

       53
       +
       let variant_to_string = function

     

       54
       +
         | V50 -> "50"

     

       55
       +
         | V100 -> "100"

     

       56
       +
         | V200 -> "200"

     

       57
       +
         | V300 -> "300"

     

       58
       +
         | V400 -> "400"

     

       59
       +
         | V500 -> "500"

     

       60
       +
         | V600 -> "600"

     

       61
       +
         | V700 -> "700"

     

       62
       +
         | V800 -> "800"

     

       63
       +
         | V900 -> "900"

     

       64
       +
         | V950 -> "950"

     

       65
       +
       

     

       66
       +
       let opacity_to_string = function

     

       67
       +
         | Alpha n -> string_of_int n

     

       68
       +
         | Fraction (n, d) -> Printf.sprintf "%d/%d" n d

     

       69
       +
       

     

       70
       +
       let color_to_string prefix color =

     

       71
       +
         let base_str = base_to_string color.base in

     

       72
       +
         let color_part = match color.variant with

     

       73
       +
           | None -> base_str

     

       74
       +
           | Some v -> Printf.sprintf "%s-%s" base_str (variant_to_string v)

     

       75
       +
         in

     

       76
       +
         let class_name = match color.opacity with

     

       77
       +
           | None -> Printf.sprintf "%s-%s" prefix color_part

     

       78
       +
           | Some op -> Printf.sprintf "%s-%s/%s" prefix color_part (opacity_to_string op)

     

       79
       +
         in

     

       80
       +
         Css.make class_name

     

       81
       +
       

     

       82
       +
       let text t = color_to_string "text" t

     

       83
       +
       let bg t = color_to_string "bg" t

     

       84
       +
       let border t = color_to_string "border" t

     

       85
       +
       let ring t = color_to_string "ring" t

     

       86
       +
       let outline t = color_to_string "outline" t

     

       87
       +
       let fill t = color_to_string "fill" t

     

       88
       +
       let stroke t = color_to_string "stroke" t

     

       89
       +
       

     

       90
       +
       let black = make Black ()

     

       91
       +
       let white = make White ()

     

       92
       +
       let transparent = make Transparent ()

     

       93
       +
       let current = make Current ()

+52

lib/tailwind/color.mli

···

       1
       +
       (** Color system supporting Tailwind's color palette *)

     

       2
       +
       

     

       3
       +
       (** Represents a color value *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Opacity values *)

     

       7
       +
       type opacity =

     

       8
       +
         | Alpha of int (** Alpha value 0-100 *)

     

       9
       +
         | Fraction of int * int (** Fractional opacity like 1/2 *)

     

       10
       +
       

     

       11
       +
       (** Color intensity variants *)

     

       12
       +
       type variant =

     

       13
       +
         | V50 | V100 | V200 | V300 | V400 | V500

     

       14
       +
         | V600 | V700 | V800 | V900 | V950

     

       15
       +
       

     

       16
       +
       (** Base color names *)

     

       17
       +
       type base =

     

       18
       +
         | Slate | Gray | Zinc | Neutral | Stone

     

       19
       +
         | Red | Orange | Amber | Yellow | Lime | Green

     

       20
       +
         | Emerald | Teal | Cyan | Sky | Blue | Indigo

     

       21
       +
         | Violet | Purple | Fuchsia | Pink | Rose

     

       22
       +
         | Black | White | Transparent | Current | Inherit

     

       23
       +
       

     

       24
       +
       (** Create a color *)

     

       25
       +
       val make : base -> ?variant:variant -> ?opacity:opacity -> unit -> t

     

       26
       +
       

     

       27
       +
       (** Generate text color class *)

     

       28
       +
       val text : t -> Css.t

     

       29
       +
       

     

       30
       +
       (** Generate background color class *)

     

       31
       +
       val bg : t -> Css.t

     

       32
       +
       

     

       33
       +
       (** Generate border color class *)

     

       34
       +
       val border : t -> Css.t

     

       35
       +
       

     

       36
       +
       (** Generate ring color class *)

     

       37
       +
       val ring : t -> Css.t

     

       38
       +
       

     

       39
       +
       (** Generate outline color class *)

     

       40
       +
       val outline : t -> Css.t

     

       41
       +
       

     

       42
       +
       (** Generate fill color class (for SVG) *)

     

       43
       +
       val fill : t -> Css.t

     

       44
       +
       

     

       45
       +
       (** Generate stroke color class (for SVG) *)

     

       46
       +
       val stroke : t -> Css.t

     

       47
       +
       

     

       48
       +
       (** Common color constructors *)

     

       49
       +
       val black : t

     

       50
       +
       val white : t

     

       51
       +
       val transparent : t

     

       52
       +
       val current : t

+19

lib/tailwind/css.ml

···

       1
       +
       type t = string list

     

       2
       +
       

     

       3
       +
       let make s = [s]

     

       4
       +
       

     

       5
       +
       let to_string t = String.concat " " t

     

       6
       +
       

     

       7
       +
       let empty = []

     

       8
       +
       

     

       9
       +
       let combine t1 t2 = t1 @ t2

     

       10
       +
       

     

       11
       +
       let concat ts = List.concat ts

     

       12
       +
       

     

       13
       +
       let ( @+ ) = combine

     

       14
       +
       

     

       15
       +
       let is_empty = function

     

       16
       +
         | [] -> true

     

       17
       +
         | _ -> false

     

       18
       +
       

     

       19
       +
       let of_strings ss = ss

+28

lib/tailwind/css.mli

···

       1
       +
       (** Core CSS class management module *)

     

       2
       +
       

     

       3
       +
       (** Represents a single CSS class name *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Create a CSS class from a string *)

     

       7
       +
       val make : string -> t

     

       8
       +
       

     

       9
       +
       (** Convert a CSS class to a string *)

     

       10
       +
       val to_string : t -> string

     

       11
       +
       

     

       12
       +
       (** Empty CSS class *)

     

       13
       +
       val empty : t

     

       14
       +
       

     

       15
       +
       (** Combine two CSS classes *)

     

       16
       +
       val combine : t -> t -> t

     

       17
       +
       

     

       18
       +
       (** Combine multiple CSS classes *)

     

       19
       +
       val concat : t list -> t

     

       20
       +
       

     

       21
       +
       (** Infix operator for combining CSS classes *)

     

       22
       +
       val ( @+ ) : t -> t -> t

     

       23
       +
       

     

       24
       +
       (** Check if a CSS class is empty *)

     

       25
       +
       val is_empty : t -> bool

     

       26
       +
       

     

       27
       +
       (** Create CSS classes from a list of strings *)

     

       28
       +
       val of_strings : string list -> t

+45

lib/tailwind/display.ml

···

       1
       +
       type t =

     

       2
       +
         | Block

     

       3
       +
         | Inline_block

     

       4
       +
         | Inline

     

       5
       +
         | Flex

     

       6
       +
         | Inline_flex

     

       7
       +
         | Grid

     

       8
       +
         | Inline_grid

     

       9
       +
         | Table

     

       10
       +
         | Inline_table

     

       11
       +
         | Table_cell

     

       12
       +
         | Table_row

     

       13
       +
         | Contents

     

       14
       +
         | List_item

     

       15
       +
         | Hidden

     

       16
       +
         | None

     

       17
       +
       

     

       18
       +
       let display_to_string = function

     

       19
       +
         | Block -> "block"

     

       20
       +
         | Inline_block -> "inline-block"

     

       21
       +
         | Inline -> "inline"

     

       22
       +
         | Flex -> "flex"

     

       23
       +
         | Inline_flex -> "inline-flex"

     

       24
       +
         | Grid -> "grid"

     

       25
       +
         | Inline_grid -> "inline-grid"

     

       26
       +
         | Table -> "table"

     

       27
       +
         | Inline_table -> "inline-table"

     

       28
       +
         | Table_cell -> "table-cell"

     

       29
       +
         | Table_row -> "table-row"

     

       30
       +
         | Contents -> "contents"

     

       31
       +
         | List_item -> "list-item"

     

       32
       +
         | Hidden -> "hidden"

     

       33
       +
         | None -> "none"

     

       34
       +
       

     

       35
       +
       let to_class t = Css.make (display_to_string t)

     

       36
       +
       

     

       37
       +
       let block = to_class Block

     

       38
       +
       let inline_block = to_class Inline_block

     

       39
       +
       let inline = to_class Inline

     

       40
       +
       let flex = to_class Flex

     

       41
       +
       let inline_flex = to_class Inline_flex

     

       42
       +
       let grid = to_class Grid

     

       43
       +
       let inline_grid = to_class Inline_grid

     

       44
       +
       let hidden = to_class Hidden

     

       45
       +
       let none = to_class None

+33

lib/tailwind/display.mli

···

       1
       +
       (** Display utilities *)

     

       2
       +
       

     

       3
       +
       (** Display property values *)

     

       4
       +
       type t =

     

       5
       +
         | Block

     

       6
       +
         | Inline_block

     

       7
       +
         | Inline

     

       8
       +
         | Flex

     

       9
       +
         | Inline_flex

     

       10
       +
         | Grid

     

       11
       +
         | Inline_grid

     

       12
       +
         | Table

     

       13
       +
         | Inline_table

     

       14
       +
         | Table_cell

     

       15
       +
         | Table_row

     

       16
       +
         | Contents

     

       17
       +
         | List_item

     

       18
       +
         | Hidden

     

       19
       +
         | None

     

       20
       +
       

     

       21
       +
       (** Convert display value to CSS class *)

     

       22
       +
       val to_class : t -> Css.t

     

       23
       +
       

     

       24
       +
       (** Common display utilities *)

     

       25
       +
       val block : Css.t

     

       26
       +
       val inline_block : Css.t

     

       27
       +
       val inline : Css.t

     

       28
       +
       val flex : Css.t

     

       29
       +
       val inline_flex : Css.t

     

       30
       +
       val grid : Css.t

     

       31
       +
       val inline_grid : Css.t

     

       32
       +
       val hidden : Css.t

     

       33
       +
       val none : Css.t

lib/tailwind/dune

···

       1
       +
       (library

     

       2
       +
        (public_name tailwind)

     

       3
       +
        (name tailwind)

     

       4
       +
        (modules css color spacing size layout display flexbox grid position typography effects responsive variants tailwind))

+104

lib/tailwind/effects.ml

···

       1
       +
       type border_width = None | Px | Px2 | Px4 | Px8

     

       2
       +
       type border_style = Solid | Dashed | Dotted | Double | Hidden | None

     

       3
       +
       type border_radius = None | Sm | Base | Md | Lg | Xl | Xl2 | Xl3 | Full

     

       4
       +
       type shadow = None | Sm | Base | Md | Lg | Xl | Xl2 | Inner

     

       5
       +
       type opacity = int

     

       6
       +
       type transform_origin = Center | Top | Top_right | Right | Bottom_right | Bottom | Bottom_left | Left | Top_left

     

       7
       +
       

     

       8
       +
       type t =

     

       9
       +
         | Border_width of [`All | `X | `Y | `Top | `Right | `Bottom | `Left] * border_width

     

       10
       +
         | Border_style of border_style

     

       11
       +
         | Border_color of Color.t

     

       12
       +
         | Rounded of [`All | `Top | `Right | `Bottom | `Left | `Tl | `Tr | `Br | `Bl] * border_radius

     

       13
       +
         | Shadow of shadow

     

       14
       +
         | Opacity of opacity

     

       15
       +
         | Backdrop_blur of [`None | `Sm | `Base | `Md | `Lg | `Xl | `Xl2 | `Xl3]

     

       16
       +
         | Transform of [`None | `Gpu]

     

       17
       +
         | Transform_origin of transform_origin

     

       18
       +
         | Scale of [`All | `X | `Y] * int

     

       19
       +
         | Rotate of int

     

       20
       +
         | Translate of [`X | `Y] * Size.t

     

       21
       +
       

     

       22
       +
       let to_class = function

     

       23
       +
         | Border_width (`All, None) -> Css.make "border-0"

     

       24
       +
         | Border_width (`All, Px) -> Css.make "border"

     

       25
       +
         | Border_width (`All, Px2) -> Css.make "border-2"

     

       26
       +
         | Border_width (`All, Px4) -> Css.make "border-4"

     

       27
       +
         | Border_width (`All, Px8) -> Css.make "border-8"

     

       28
       +
         | Border_style Solid -> Css.make "border-solid"

     

       29
       +
         | Border_style Dashed -> Css.make "border-dashed"

     

       30
       +
         | Border_style Dotted -> Css.make "border-dotted"

     

       31
       +
         | Border_style Double -> Css.make "border-double"

     

       32
       +
         | Border_style Hidden -> Css.make "border-hidden"

     

       33
       +
         | Border_style None -> Css.make "border-none"

     

       34
       +
         | Border_color color -> Color.border color

     

       35
       +
         | Rounded (`All, None) -> Css.make "rounded-none"

     

       36
       +
         | Rounded (`All, Sm) -> Css.make "rounded-sm"

     

       37
       +
         | Rounded (`All, Base) -> Css.make "rounded"

     

       38
       +
         | Rounded (`All, Md) -> Css.make "rounded-md"

     

       39
       +
         | Rounded (`All, Lg) -> Css.make "rounded-lg"

     

       40
       +
         | Rounded (`All, Xl) -> Css.make "rounded-xl"

     

       41
       +
         | Rounded (`All, Xl2) -> Css.make "rounded-2xl"

     

       42
       +
         | Rounded (`All, Xl3) -> Css.make "rounded-3xl"

     

       43
       +
         | Rounded (`All, Full) -> Css.make "rounded-full"

     

       44
       +
         | Shadow None -> Css.make "shadow-none"

     

       45
       +
         | Shadow Sm -> Css.make "shadow-sm"

     

       46
       +
         | Shadow Base -> Css.make "shadow"

     

       47
       +
         | Shadow Md -> Css.make "shadow-md"

     

       48
       +
         | Shadow Lg -> Css.make "shadow-lg"

     

       49
       +
         | Shadow Xl -> Css.make "shadow-xl"

     

       50
       +
         | Shadow Xl2 -> Css.make "shadow-2xl"

     

       51
       +
         | Shadow Inner -> Css.make "shadow-inner"

     

       52
       +
         | Opacity n -> Css.make (Printf.sprintf "opacity-%d" n)

     

       53
       +
         | Transform `None -> Css.make "transform-none"

     

       54
       +
         | Transform `Gpu -> Css.make "transform-gpu"

     

       55
       +
         | Backdrop_blur `None -> Css.make "backdrop-blur-none"

     

       56
       +
         | Backdrop_blur `Sm -> Css.make "backdrop-blur-sm"

     

       57
       +
         | Backdrop_blur `Base -> Css.make "backdrop-blur"

     

       58
       +
         | Backdrop_blur `Md -> Css.make "backdrop-blur-md"

     

       59
       +
         | Backdrop_blur `Lg -> Css.make "backdrop-blur-lg"

     

       60
       +
         | Backdrop_blur `Xl -> Css.make "backdrop-blur-xl"

     

       61
       +
         | Backdrop_blur `Xl2 -> Css.make "backdrop-blur-2xl"

     

       62
       +
         | Backdrop_blur `Xl3 -> Css.make "backdrop-blur-3xl"

     

       63
       +
         | Transform_origin Center -> Css.make "origin-center"

     

       64
       +
         | Transform_origin Top -> Css.make "origin-top"

     

       65
       +
         | Transform_origin Top_right -> Css.make "origin-top-right"

     

       66
       +
         | Transform_origin Right -> Css.make "origin-right"

     

       67
       +
         | Transform_origin Bottom_right -> Css.make "origin-bottom-right"

     

       68
       +
         | Transform_origin Bottom -> Css.make "origin-bottom"

     

       69
       +
         | Transform_origin Bottom_left -> Css.make "origin-bottom-left"

     

       70
       +
         | Transform_origin Left -> Css.make "origin-left"

     

       71
       +
         | Transform_origin Top_left -> Css.make "origin-top-left"

     

       72
       +
         | Scale (dir, percent) ->

     

       73
       +
             let dir_str = match dir with `All -> "" | `X -> "-x" | `Y -> "-y" in

     

       74
       +
             Css.make (Printf.sprintf "scale%s-%d" dir_str percent)

     

       75
       +
         | Rotate degrees -> Css.make (Printf.sprintf "rotate-%d" degrees)

     

       76
       +
         | Translate (dir, size) ->

     

       77
       +
             let dir_str = match dir with `X -> "x" | `Y -> "y" in

     

       78
       +
             Css.make (Printf.sprintf "translate-%s-%s" dir_str (Size.to_string size))

     

       79
       +
         | Rounded (_, _) -> Css.empty (* This should be handled by the specific rounded patterns above *)

     

       80
       +
         | Border_width (_, _) -> Css.empty (* This should be handled by the specific border patterns above *)

     

       81
       +
       

     

       82
       +
       let border_width dir width = Border_width (dir, width)

     

       83
       +
       let border_style style = Border_style style

     

       84
       +
       let border_color color = Border_color color

     

       85
       +
       let rounded dir radius = Rounded (dir, radius)

     

       86
       +
       let shadow s = Shadow s

     

       87
       +
       let opacity o = Opacity o

     

       88
       +
       let backdrop_blur blur = Backdrop_blur blur

     

       89
       +
       let transform t = Transform t

     

       90
       +
       let transform_origin origin = Transform_origin origin

     

       91
       +
       let scale dir percent = Scale (dir, percent)

     

       92
       +
       let rotate degrees = Rotate degrees

     

       93
       +
       let translate dir size = Translate (dir, size)

     

       94
       +
       

     

       95
       +
       let border = Css.make "border"

     

       96
       +
       let border_2 = Css.make "border-2"

     

       97
       +
       let border_4 = Css.make "border-4"

     

       98
       +
       let rounded_sm = Css.make "rounded-sm"

     

       99
       +
       let rounded_md = Css.make "rounded-md"

     

       100
       +
       let rounded_lg = Css.make "rounded-lg"

     

       101
       +
       let rounded_full = Css.make "rounded-full"

     

       102
       +
       let shadow_sm = Css.make "shadow-sm"

     

       103
       +
       let shadow_md = Css.make "shadow-md"

     

       104
       +
       let shadow_lg = Css.make "shadow-lg"

+79

lib/tailwind/effects.mli

···

       1
       +
       (** Visual effects: borders, shadows, opacity, transforms *)

     

       2
       +
       

     

       3
       +
       (** Effects configuration *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Border width *)

     

       7
       +
       type border_width =

     

       8
       +
         | None | Px | Px2 | Px4 | Px8

     

       9
       +
       

     

       10
       +
       (** Border style *)

     

       11
       +
       type border_style =

     

       12
       +
         | Solid | Dashed | Dotted | Double | Hidden | None

     

       13
       +
       

     

       14
       +
       (** Border radius *)

     

       15
       +
       type border_radius =

     

       16
       +
         | None | Sm | Base | Md | Lg | Xl | Xl2 | Xl3 | Full

     

       17
       +
       

     

       18
       +
       (** Shadow size *)

     

       19
       +
       type shadow =

     

       20
       +
         | None | Sm | Base | Md | Lg | Xl | Xl2 | Inner

     

       21
       +
       

     

       22
       +
       (** Opacity level *)

     

       23
       +
       type opacity = int (** 0-100 *)

     

       24
       +
       

     

       25
       +
       (** Transform origin *)

     

       26
       +
       type transform_origin =

     

       27
       +
         | Center | Top | Top_right | Right | Bottom_right

     

       28
       +
         | Bottom | Bottom_left | Left | Top_left

     

       29
       +
       

     

       30
       +
       (** Set border width *)

     

       31
       +
       val border_width : [`All | `X | `Y | `Top | `Right | `Bottom | `Left] -> border_width -> t

     

       32
       +
       

     

       33
       +
       (** Set border style *)

     

       34
       +
       val border_style : border_style -> t

     

       35
       +
       

     

       36
       +
       (** Set border color *)

     

       37
       +
       val border_color : Color.t -> t

     

       38
       +
       

     

       39
       +
       (** Set border radius *)

     

       40
       +
       val rounded : [`All | `Top | `Right | `Bottom | `Left | `Tl | `Tr | `Br | `Bl] -> border_radius -> t

     

       41
       +
       

     

       42
       +
       (** Set box shadow *)

     

       43
       +
       val shadow : shadow -> t

     

       44
       +
       

     

       45
       +
       (** Set opacity *)

     

       46
       +
       val opacity : opacity -> t

     

       47
       +
       

     

       48
       +
       (** Set backdrop blur *)

     

       49
       +
       val backdrop_blur : [`None | `Sm | `Base | `Md | `Lg | `Xl | `Xl2 | `Xl3] -> t

     

       50
       +
       

     

       51
       +
       (** Set transform *)

     

       52
       +
       val transform : [`None | `Gpu] -> t

     

       53
       +
       

     

       54
       +
       (** Set transform origin *)

     

       55
       +
       val transform_origin : transform_origin -> t

     

       56
       +
       

     

       57
       +
       (** Set scale (percentage) *)

     

       58
       +
       val scale : [`All | `X | `Y] -> int -> t

     

       59
       +
       

     

       60
       +
       (** Set rotate (degrees) *)

     

       61
       +
       val rotate : int -> t

     

       62
       +
       

     

       63
       +
       (** Set translate *)

     

       64
       +
       val translate : [`X | `Y] -> Size.t -> t

     

       65
       +
       

     

       66
       +
       (** Convert to CSS class *)

     

       67
       +
       val to_class : t -> Css.t

     

       68
       +
       

     

       69
       +
       (** Common border utilities *)

     

       70
       +
       val border : Css.t

     

       71
       +
       val border_2 : Css.t

     

       72
       +
       val border_4 : Css.t

     

       73
       +
       val rounded_sm : Css.t

     

       74
       +
       val rounded_md : Css.t

     

       75
       +
       val rounded_lg : Css.t

     

       76
       +
       val rounded_full : Css.t

     

       77
       +
       val shadow_sm : Css.t

     

       78
       +
       val shadow_md : Css.t

     

       79
       +
       val shadow_lg : Css.t

+119

lib/tailwind/flexbox.ml

···

       1
       +
       type direction =

     

       2
       +
         | Row

     

       3
       +
         | Row_reverse  

     

       4
       +
         | Col

     

       5
       +
         | Col_reverse

     

       6
       +
       

     

       7
       +
       type wrap =

     

       8
       +
         | Wrap

     

       9
       +
         | Wrap_reverse

     

       10
       +
         | Nowrap

     

       11
       +
       

     

       12
       +
       type justify =

     

       13
       +
         | Normal

     

       14
       +
         | Start

     

       15
       +
         | End

     

       16
       +
         | Center

     

       17
       +
         | Between

     

       18
       +
         | Around

     

       19
       +
         | Evenly

     

       20
       +
         | Stretch

     

       21
       +
       

     

       22
       +
       type align_items =

     

       23
       +
         | Start

     

       24
       +
         | End

     

       25
       +
         | Center

     

       26
       +
         | Baseline

     

       27
       +
         | Stretch

     

       28
       +
       

     

       29
       +
       type align_content =

     

       30
       +
         | Normal

     

       31
       +
         | Start

     

       32
       +
         | End

     

       33
       +
         | Center

     

       34
       +
         | Between

     

       35
       +
         | Around

     

       36
       +
         | Evenly

     

       37
       +
         | Stretch

     

       38
       +
         | Baseline

     

       39
       +
       

     

       40
       +
       type align_self =

     

       41
       +
         | Auto

     

       42
       +
         | Start

     

       43
       +
         | End  

     

       44
       +
         | Center

     

       45
       +
         | Stretch

     

       46
       +
         | Baseline

     

       47
       +
       

     

       48
       +
       type t = 

     

       49
       +
         | Direction of direction

     

       50
       +
         | Wrap_setting of wrap

     

       51
       +
         | Justify of justify

     

       52
       +
         | Align_items of align_items

     

       53
       +
         | Align_content of align_content

     

       54
       +
         | Align_self of align_self

     

       55
       +
         | Grow of int option

     

       56
       +
         | Shrink of int option

     

       57
       +
         | Basis of Size.t

     

       58
       +
         | Flex of [`Initial | `One | `Auto | `None]

     

       59
       +
       

     

       60
       +
       let to_class = function

     

       61
       +
         | Direction Row -> Css.make "flex-row"

     

       62
       +
         | Direction Row_reverse -> Css.make "flex-row-reverse"

     

       63
       +
         | Direction Col -> Css.make "flex-col"  

     

       64
       +
         | Direction Col_reverse -> Css.make "flex-col-reverse"

     

       65
       +
         | Wrap_setting Wrap -> Css.make "flex-wrap"

     

       66
       +
         | Wrap_setting Wrap_reverse -> Css.make "flex-wrap-reverse"

     

       67
       +
         | Wrap_setting Nowrap -> Css.make "flex-nowrap"

     

       68
       +
         | Justify Normal -> Css.make "justify-normal"

     

       69
       +
         | Justify Start -> Css.make "justify-start"

     

       70
       +
         | Justify End -> Css.make "justify-end"

     

       71
       +
         | Justify Center -> Css.make "justify-center"

     

       72
       +
         | Justify Between -> Css.make "justify-between"

     

       73
       +
         | Justify Around -> Css.make "justify-around"

     

       74
       +
         | Justify Evenly -> Css.make "justify-evenly"

     

       75
       +
         | Justify Stretch -> Css.make "justify-stretch"

     

       76
       +
         | Align_items Start -> Css.make "items-start"

     

       77
       +
         | Align_items End -> Css.make "items-end"

     

       78
       +
         | Align_items Center -> Css.make "items-center"

     

       79
       +
         | Align_items Baseline -> Css.make "items-baseline"

     

       80
       +
         | Align_items Stretch -> Css.make "items-stretch"

     

       81
       +
         | Align_content Normal -> Css.make "content-normal"

     

       82
       +
         | Align_content Start -> Css.make "content-start"

     

       83
       +
         | Align_content End -> Css.make "content-end"

     

       84
       +
         | Align_content Center -> Css.make "content-center"

     

       85
       +
         | Align_content Between -> Css.make "content-between"

     

       86
       +
         | Align_content Around -> Css.make "content-around"

     

       87
       +
         | Align_content Evenly -> Css.make "content-evenly"

     

       88
       +
         | Align_content Stretch -> Css.make "content-stretch"

     

       89
       +
         | Align_content Baseline -> Css.make "content-baseline"

     

       90
       +
         | Align_self Auto -> Css.make "self-auto"

     

       91
       +
         | Align_self Start -> Css.make "self-start"

     

       92
       +
         | Align_self End -> Css.make "self-end"

     

       93
       +
         | Align_self Center -> Css.make "self-center"

     

       94
       +
         | Align_self Stretch -> Css.make "self-stretch"

     

       95
       +
         | Align_self Baseline -> Css.make "self-baseline"

     

       96
       +
         | Grow None -> Css.make "grow-0"

     

       97
       +
         | Grow (Some 0) -> Css.make "grow-0" 

     

       98
       +
         | Grow (Some n) -> Css.make (Printf.sprintf "grow-%d" n)

     

       99
       +
         | Shrink None -> Css.make "shrink-0"

     

       100
       +
         | Shrink (Some 0) -> Css.make "shrink-0"

     

       101
       +
         | Shrink (Some n) -> Css.make (Printf.sprintf "shrink-%d" n)

     

       102
       +
         | Basis size -> Css.make (Printf.sprintf "basis-%s" (Size.to_string size))

     

       103
       +
         | Flex `Initial -> Css.make "flex-initial"

     

       104
       +
         | Flex `One -> Css.make "flex-1"

     

       105
       +
         | Flex `Auto -> Css.make "flex-auto"

     

       106
       +
         | Flex `None -> Css.make "flex-none"

     

       107
       +
       

     

       108
       +
       let direction d = Direction d

     

       109
       +
       let wrap w = Wrap_setting w  

     

       110
       +
       let justify j = Justify j

     

       111
       +
       let align_items a = Align_items a

     

       112
       +
       let align_content a = Align_content a

     

       113
       +
       let align_self a = Align_self a

     

       114
       +
       let grow g = Grow g

     

       115
       +
       let shrink s = Shrink s

     

       116
       +
       let basis b = Basis b

     

       117
       +
       let flex f = Flex f

     

       118
       +
       

     

       119
       +
       let combine ts = Css.concat (List.map to_class ts)

+93

lib/tailwind/flexbox.mli

···

       1
       +
       (** Flexbox layout utilities *)

     

       2
       +
       

     

       3
       +
       (** Flexbox configuration *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Flex direction values *)

     

       7
       +
       type direction =

     

       8
       +
         | Row

     

       9
       +
         | Row_reverse

     

       10
       +
         | Col

     

       11
       +
         | Col_reverse

     

       12
       +
       

     

       13
       +
       (** Flex wrap values *)

     

       14
       +
       type wrap =

     

       15
       +
         | Wrap

     

       16
       +
         | Wrap_reverse

     

       17
       +
         | Nowrap

     

       18
       +
       

     

       19
       +
       (** Justify content values *)

     

       20
       +
       type justify =

     

       21
       +
         | Normal

     

       22
       +
         | Start

     

       23
       +
         | End

     

       24
       +
         | Center

     

       25
       +
         | Between

     

       26
       +
         | Around

     

       27
       +
         | Evenly

     

       28
       +
         | Stretch

     

       29
       +
       

     

       30
       +
       (** Align items values *)

     

       31
       +
       type align_items =

     

       32
       +
         | Start

     

       33
       +
         | End

     

       34
       +
         | Center

     

       35
       +
         | Baseline

     

       36
       +
         | Stretch

     

       37
       +
       

     

       38
       +
       (** Align content values *)

     

       39
       +
       type align_content =

     

       40
       +
         | Normal

     

       41
       +
         | Start

     

       42
       +
         | End

     

       43
       +
         | Center

     

       44
       +
         | Between

     

       45
       +
         | Around

     

       46
       +
         | Evenly

     

       47
       +
         | Stretch

     

       48
       +
         | Baseline

     

       49
       +
       

     

       50
       +
       (** Align self values *)

     

       51
       +
       type align_self =

     

       52
       +
         | Auto

     

       53
       +
         | Start

     

       54
       +
         | End

     

       55
       +
         | Center

     

       56
       +
         | Stretch

     

       57
       +
         | Baseline

     

       58
       +
       

     

       59
       +
       (** Set flex direction *)

     

       60
       +
       val direction : direction -> t

     

       61
       +
       

     

       62
       +
       (** Set flex wrap *)

     

       63
       +
       val wrap : wrap -> t

     

       64
       +
       

     

       65
       +
       (** Set justify content *)

     

       66
       +
       val justify : justify -> t

     

       67
       +
       

     

       68
       +
       (** Set align items *)

     

       69
       +
       val align_items : align_items -> t

     

       70
       +
       

     

       71
       +
       (** Set align content *)

     

       72
       +
       val align_content : align_content -> t

     

       73
       +
       

     

       74
       +
       (** Set align self *)

     

       75
       +
       val align_self : align_self -> t

     

       76
       +
       

     

       77
       +
       (** Set flex grow *)

     

       78
       +
       val grow : int option -> t

     

       79
       +
       

     

       80
       +
       (** Set flex shrink *)

     

       81
       +
       val shrink : int option -> t

     

       82
       +
       

     

       83
       +
       (** Set flex basis *)

     

       84
       +
       val basis : Size.t -> t

     

       85
       +
       

     

       86
       +
       (** Set flex shorthand *)

     

       87
       +
       val flex : [`Initial | `One | `Auto | `None] -> t

     

       88
       +
       

     

       89
       +
       (** Convert to CSS class *)

     

       90
       +
       val to_class : t -> Css.t

     

       91
       +
       

     

       92
       +
       (** Combine multiple flex properties *)

     

       93
       +
       val combine : t list -> Css.t

+73

lib/tailwind/grid.ml

···

       1
       +
       type cols =

     

       2
       +
         | None

     

       3
       +
         | Subgrid

     

       4
       +
         | Cols of int

     

       5
       +
       

     

       6
       +
       type rows =

     

       7
       +
         | None

     

       8
       +
         | Subgrid

     

       9
       +
         | Rows of int

     

       10
       +
       

     

       11
       +
       type span =

     

       12
       +
         | Auto

     

       13
       +
         | Full

     

       14
       +
         | Span of int

     

       15
       +
         | Start of int

     

       16
       +
         | End of int

     

       17
       +
       

     

       18
       +
       type flow =

     

       19
       +
         | Row

     

       20
       +
         | Col

     

       21
       +
         | Dense

     

       22
       +
         | Row_dense

     

       23
       +
         | Col_dense

     

       24
       +
       

     

       25
       +
       type t = 

     

       26
       +
         | Template_cols of cols

     

       27
       +
         | Template_rows of rows

     

       28
       +
         | Col of span

     

       29
       +
         | Row of span

     

       30
       +
         | Auto_flow of flow

     

       31
       +
         | Auto_cols of [`Auto | `Min | `Max | `Fr of int]

     

       32
       +
         | Auto_rows of [`Auto | `Min | `Max | `Fr of int]

     

       33
       +
       

     

       34
       +
       let to_class = function

     

       35
       +
         | Template_cols None -> Css.make "grid-cols-none"

     

       36
       +
         | Template_cols Subgrid -> Css.make "grid-cols-subgrid"

     

       37
       +
         | Template_cols (Cols n) -> Css.make (Printf.sprintf "grid-cols-%d" n)

     

       38
       +
         | Template_rows None -> Css.make "grid-rows-none"

     

       39
       +
         | Template_rows Subgrid -> Css.make "grid-rows-subgrid"

     

       40
       +
         | Template_rows (Rows n) -> Css.make (Printf.sprintf "grid-rows-%d" n)

     

       41
       +
         | Col Auto -> Css.make "col-auto"

     

       42
       +
         | Col Full -> Css.make "col-full"

     

       43
       +
         | Col (Span n) -> Css.make (Printf.sprintf "col-span-%d" n)

     

       44
       +
         | Col (Start n) -> Css.make (Printf.sprintf "col-start-%d" n)

     

       45
       +
         | Col (End n) -> Css.make (Printf.sprintf "col-end-%d" n)

     

       46
       +
         | Row Auto -> Css.make "row-auto"

     

       47
       +
         | Row Full -> Css.make "row-full"

     

       48
       +
         | Row (Span n) -> Css.make (Printf.sprintf "row-span-%d" n)

     

       49
       +
         | Row (Start n) -> Css.make (Printf.sprintf "row-start-%d" n)

     

       50
       +
         | Row (End n) -> Css.make (Printf.sprintf "row-end-%d" n)

     

       51
       +
         | Auto_flow Row -> Css.make "grid-flow-row"

     

       52
       +
         | Auto_flow Col -> Css.make "grid-flow-col"

     

       53
       +
         | Auto_flow Dense -> Css.make "grid-flow-dense"

     

       54
       +
         | Auto_flow Row_dense -> Css.make "grid-flow-row-dense"

     

       55
       +
         | Auto_flow Col_dense -> Css.make "grid-flow-col-dense"

     

       56
       +
         | Auto_cols `Auto -> Css.make "auto-cols-auto"

     

       57
       +
         | Auto_cols `Min -> Css.make "auto-cols-min"

     

       58
       +
         | Auto_cols `Max -> Css.make "auto-cols-max"

     

       59
       +
         | Auto_cols (`Fr n) -> Css.make (Printf.sprintf "auto-cols-fr-%d" n)

     

       60
       +
         | Auto_rows `Auto -> Css.make "auto-rows-auto"

     

       61
       +
         | Auto_rows `Min -> Css.make "auto-rows-min"

     

       62
       +
         | Auto_rows `Max -> Css.make "auto-rows-max"

     

       63
       +
         | Auto_rows (`Fr n) -> Css.make (Printf.sprintf "auto-rows-fr-%d" n)

     

       64
       +
       

     

       65
       +
       let template_cols cols = Template_cols cols

     

       66
       +
       let template_rows rows = Template_rows rows

     

       67
       +
       let col span = Col span

     

       68
       +
       let row span = Row span

     

       69
       +
       let auto_flow flow = Auto_flow flow

     

       70
       +
       let auto_cols cols = Auto_cols cols

     

       71
       +
       let auto_rows rows = Auto_rows rows

     

       72
       +
       

     

       73
       +
       let combine ts = Css.concat (List.map to_class ts)

+59

lib/tailwind/grid.mli

···

       1
       +
       (** CSS Grid layout utilities *)

     

       2
       +
       

     

       3
       +
       (** Grid configuration *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Grid template columns *)

     

       7
       +
       type cols =

     

       8
       +
         | None

     

       9
       +
         | Subgrid

     

       10
       +
         | Cols of int (** 1-12 columns *)

     

       11
       +
       

     

       12
       +
       (** Grid template rows *)

     

       13
       +
       type rows =

     

       14
       +
         | None

     

       15
       +
         | Subgrid

     

       16
       +
         | Rows of int (** 1-12 rows *)

     

       17
       +
       

     

       18
       +
       (** Grid column/row span *)

     

       19
       +
       type span =

     

       20
       +
         | Auto

     

       21
       +
         | Full

     

       22
       +
         | Span of int

     

       23
       +
         | Start of int

     

       24
       +
         | End of int

     

       25
       +
       

     

       26
       +
       (** Grid auto flow *)

     

       27
       +
       type flow =

     

       28
       +
         | Row

     

       29
       +
         | Col

     

       30
       +
         | Dense

     

       31
       +
         | Row_dense

     

       32
       +
         | Col_dense

     

       33
       +
       

     

       34
       +
       (** Set grid template columns *)

     

       35
       +
       val template_cols : cols -> t

     

       36
       +
       

     

       37
       +
       (** Set grid template rows *)

     

       38
       +
       val template_rows : rows -> t

     

       39
       +
       

     

       40
       +
       (** Set grid column span *)

     

       41
       +
       val col : span -> t

     

       42
       +
       

     

       43
       +
       (** Set grid row span *)

     

       44
       +
       val row : span -> t

     

       45
       +
       

     

       46
       +
       (** Set grid auto flow *)

     

       47
       +
       val auto_flow : flow -> t

     

       48
       +
       

     

       49
       +
       (** Set grid auto columns *)

     

       50
       +
       val auto_cols : [`Auto | `Min | `Max | `Fr of int] -> t

     

       51
       +
       

     

       52
       +
       (** Set grid auto rows *)

     

       53
       +
       val auto_rows : [`Auto | `Min | `Max | `Fr of int] -> t

     

       54
       +
       

     

       55
       +
       (** Convert to CSS class *)

     

       56
       +
       val to_class : t -> Css.t

     

       57
       +
       

     

       58
       +
       (** Combine multiple grid properties *)

     

       59
       +
       val combine : t list -> Css.t

+99

lib/tailwind/layout.ml

···

       1
       +
       type overflow =

     

       2
       +
         | Auto

     

       3
       +
         | Hidden

     

       4
       +
         | Clip

     

       5
       +
         | Visible

     

       6
       +
         | Scroll

     

       7
       +
       

     

       8
       +
       type box_sizing =

     

       9
       +
         | Border_box

     

       10
       +
         | Content_box

     

       11
       +
       

     

       12
       +
       type object_fit =

     

       13
       +
         | Contain

     

       14
       +
         | Cover

     

       15
       +
         | Fill

     

       16
       +
         | None

     

       17
       +
         | Scale_down

     

       18
       +
       

     

       19
       +
       type object_position =

     

       20
       +
         | Bottom | Center | Left | Left_bottom | Left_top

     

       21
       +
         | Right | Right_bottom | Right_top | Top

     

       22
       +
       

     

       23
       +
       type t = 

     

       24
       +
         | Width of Size.t

     

       25
       +
         | Height of Size.t

     

       26
       +
         | Min_width of Size.t

     

       27
       +
         | Max_width of Size.t

     

       28
       +
         | Min_height of Size.t

     

       29
       +
         | Max_height of Size.t

     

       30
       +
         | Overflow of [`All | `X | `Y] * overflow

     

       31
       +
         | Box_sizing of box_sizing

     

       32
       +
         | Object_fit of object_fit

     

       33
       +
         | Object_position of object_position

     

       34
       +
         | Aspect of [`Auto | `Square | `Video | `Ratio of int * int]

     

       35
       +
       

     

       36
       +
       let to_class = function

     

       37
       +
         | Width size -> Css.make (Printf.sprintf "w-%s" (Size.to_string size))

     

       38
       +
         | Height size -> Css.make (Printf.sprintf "h-%s" (Size.to_string size))

     

       39
       +
         | Min_width size -> Css.make (Printf.sprintf "min-w-%s" (Size.to_string size))

     

       40
       +
         | Max_width size -> Css.make (Printf.sprintf "max-w-%s" (Size.to_string size))

     

       41
       +
         | Min_height size -> Css.make (Printf.sprintf "min-h-%s" (Size.to_string size))

     

       42
       +
         | Max_height size -> Css.make (Printf.sprintf "max-h-%s" (Size.to_string size))

     

       43
       +
         | Overflow (`All, Auto) -> Css.make "overflow-auto"

     

       44
       +
         | Overflow (`All, Hidden) -> Css.make "overflow-hidden"

     

       45
       +
         | Overflow (`All, Clip) -> Css.make "overflow-clip"

     

       46
       +
         | Overflow (`All, Visible) -> Css.make "overflow-visible"

     

       47
       +
         | Overflow (`All, Scroll) -> Css.make "overflow-scroll"

     

       48
       +
         | Overflow (`X, Auto) -> Css.make "overflow-x-auto"

     

       49
       +
         | Overflow (`X, Hidden) -> Css.make "overflow-x-hidden"

     

       50
       +
         | Overflow (`X, Clip) -> Css.make "overflow-x-clip"

     

       51
       +
         | Overflow (`X, Visible) -> Css.make "overflow-x-visible"

     

       52
       +
         | Overflow (`X, Scroll) -> Css.make "overflow-x-scroll"

     

       53
       +
         | Overflow (`Y, Auto) -> Css.make "overflow-y-auto"

     

       54
       +
         | Overflow (`Y, Hidden) -> Css.make "overflow-y-hidden"

     

       55
       +
         | Overflow (`Y, Clip) -> Css.make "overflow-y-clip"

     

       56
       +
         | Overflow (`Y, Visible) -> Css.make "overflow-y-visible"

     

       57
       +
         | Overflow (`Y, Scroll) -> Css.make "overflow-y-scroll"

     

       58
       +
         | Box_sizing Border_box -> Css.make "box-border"

     

       59
       +
         | Box_sizing Content_box -> Css.make "box-content"

     

       60
       +
         | Object_fit Contain -> Css.make "object-contain"

     

       61
       +
         | Object_fit Cover -> Css.make "object-cover"

     

       62
       +
         | Object_fit Fill -> Css.make "object-fill"

     

       63
       +
         | Object_fit None -> Css.make "object-none"

     

       64
       +
         | Object_fit Scale_down -> Css.make "object-scale-down"

     

       65
       +
         | Object_position Bottom -> Css.make "object-bottom"

     

       66
       +
         | Object_position Center -> Css.make "object-center"

     

       67
       +
         | Object_position Left -> Css.make "object-left"

     

       68
       +
         | Object_position Left_bottom -> Css.make "object-left-bottom"

     

       69
       +
         | Object_position Left_top -> Css.make "object-left-top"

     

       70
       +
         | Object_position Right -> Css.make "object-right"

     

       71
       +
         | Object_position Right_bottom -> Css.make "object-right-bottom"

     

       72
       +
         | Object_position Right_top -> Css.make "object-right-top"

     

       73
       +
         | Object_position Top -> Css.make "object-top"

     

       74
       +
         | Aspect `Auto -> Css.make "aspect-auto"

     

       75
       +
         | Aspect `Square -> Css.make "aspect-square"

     

       76
       +
         | Aspect `Video -> Css.make "aspect-video"

     

       77
       +
         | Aspect (`Ratio (w, h)) -> Css.make (Printf.sprintf "aspect-[%d/%d]" w h)

     

       78
       +
       

     

       79
       +
       let width size = Width size

     

       80
       +
       let height size = Height size

     

       81
       +
       let min_width size = Min_width size

     

       82
       +
       let max_width size = Max_width size

     

       83
       +
       let min_height size = Min_height size

     

       84
       +
       let max_height size = Max_height size

     

       85
       +
       let overflow dir overflow = Overflow (dir, overflow)

     

       86
       +
       let box_sizing bs = Box_sizing bs

     

       87
       +
       let object_fit of_ = Object_fit of_

     

       88
       +
       let object_position op = Object_position op

     

       89
       +
       let aspect a = Aspect a

     

       90
       +
       

     

       91
       +
       let w_full = Css.make "w-full"

     

       92
       +
       let w_screen = Css.make "w-screen"

     

       93
       +
       let w_auto = Css.make "w-auto"

     

       94
       +
       let w_fit = Css.make "w-fit"

     

       95
       +
       

     

       96
       +
       let h_full = Css.make "h-full"

     

       97
       +
       let h_screen = Css.make "h-screen"

     

       98
       +
       let h_auto = Css.make "h-auto"

     

       99
       +
       let h_fit = Css.make "h-fit"

+78

lib/tailwind/layout.mli

···

       1
       +
       (** Layout utilities combining display, position, and box model *)

     

       2
       +
       

     

       3
       +
       (** Layout configuration *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Overflow values *)

     

       7
       +
       type overflow =

     

       8
       +
         | Auto

     

       9
       +
         | Hidden

     

       10
       +
         | Clip

     

       11
       +
         | Visible

     

       12
       +
         | Scroll

     

       13
       +
       

     

       14
       +
       (** Box sizing *)

     

       15
       +
       type box_sizing =

     

       16
       +
         | Border_box

     

       17
       +
         | Content_box

     

       18
       +
       

     

       19
       +
       (** Object fit *)

     

       20
       +
       type object_fit =

     

       21
       +
         | Contain

     

       22
       +
         | Cover

     

       23
       +
         | Fill

     

       24
       +
         | None

     

       25
       +
         | Scale_down

     

       26
       +
       

     

       27
       +
       (** Object position *)

     

       28
       +
       type object_position =

     

       29
       +
         | Bottom | Center | Left | Left_bottom | Left_top

     

       30
       +
         | Right | Right_bottom | Right_top | Top

     

       31
       +
       

     

       32
       +
       (** Set width *)

     

       33
       +
       val width : Size.t -> t

     

       34
       +
       

     

       35
       +
       (** Set height *)

     

       36
       +
       val height : Size.t -> t

     

       37
       +
       

     

       38
       +
       (** Set min width *)

     

       39
       +
       val min_width : Size.t -> t

     

       40
       +
       

     

       41
       +
       (** Set max width *)

     

       42
       +
       val max_width : Size.t -> t

     

       43
       +
       

     

       44
       +
       (** Set min height *)

     

       45
       +
       val min_height : Size.t -> t

     

       46
       +
       

     

       47
       +
       (** Set max height *)

     

       48
       +
       val max_height : Size.t -> t

     

       49
       +
       

     

       50
       +
       (** Set overflow *)

     

       51
       +
       val overflow : [`All | `X | `Y] -> overflow -> t

     

       52
       +
       

     

       53
       +
       (** Set box sizing *)

     

       54
       +
       val box_sizing : box_sizing -> t

     

       55
       +
       

     

       56
       +
       (** Set object fit *)

     

       57
       +
       val object_fit : object_fit -> t

     

       58
       +
       

     

       59
       +
       (** Set object position *)

     

       60
       +
       val object_position : object_position -> t

     

       61
       +
       

     

       62
       +
       (** Set aspect ratio *)

     

       63
       +
       val aspect : [`Auto | `Square | `Video | `Ratio of int * int] -> t

     

       64
       +
       

     

       65
       +
       (** Convert to CSS class *)

     

       66
       +
       val to_class : t -> Css.t

     

       67
       +
       

     

       68
       +
       (** Common width utilities *)

     

       69
       +
       val w_full : Css.t

     

       70
       +
       val w_screen : Css.t

     

       71
       +
       val w_auto : Css.t

     

       72
       +
       val w_fit : Css.t

     

       73
       +
       

     

       74
       +
       (** Common height utilities *)

     

       75
       +
       val h_full : Css.t

     

       76
       +
       val h_screen : Css.t

     

       77
       +
       val h_auto : Css.t

     

       78
       +
       val h_fit : Css.t

+57

lib/tailwind/position.ml

···

       1
       +
       type position =

     

       2
       +
         | Static

     

       3
       +
         | Fixed

     

       4
       +
         | Absolute

     

       5
       +
         | Relative

     

       6
       +
         | Sticky

     

       7
       +
       

     

       8
       +
       type inset_dir =

     

       9
       +
         | All

     

       10
       +
         | X

     

       11
       +
         | Y

     

       12
       +
         | Top

     

       13
       +
         | Right

     

       14
       +
         | Bottom

     

       15
       +
         | Left

     

       16
       +
         | Start

     

       17
       +
         | End

     

       18
       +
       

     

       19
       +
       type t = 

     

       20
       +
         | Position of position

     

       21
       +
         | Inset of inset_dir * Size.t

     

       22
       +
         | Z_index of int option

     

       23
       +
       

     

       24
       +
       let to_class = function

     

       25
       +
         | Position Static -> Css.make "static"

     

       26
       +
         | Position Fixed -> Css.make "fixed"

     

       27
       +
         | Position Absolute -> Css.make "absolute"

     

       28
       +
         | Position Relative -> Css.make "relative"

     

       29
       +
         | Position Sticky -> Css.make "sticky"

     

       30
       +
         | Inset (All, size) -> Css.make (Printf.sprintf "inset-%s" (Size.to_string size))

     

       31
       +
         | Inset (X, size) -> Css.make (Printf.sprintf "inset-x-%s" (Size.to_string size))

     

       32
       +
         | Inset (Y, size) -> Css.make (Printf.sprintf "inset-y-%s" (Size.to_string size))

     

       33
       +
         | Inset (Top, size) -> Css.make (Printf.sprintf "top-%s" (Size.to_string size))

     

       34
       +
         | Inset (Right, size) -> Css.make (Printf.sprintf "right-%s" (Size.to_string size))

     

       35
       +
         | Inset (Bottom, size) -> Css.make (Printf.sprintf "bottom-%s" (Size.to_string size))

     

       36
       +
         | Inset (Left, size) -> Css.make (Printf.sprintf "left-%s" (Size.to_string size))

     

       37
       +
         | Inset (Start, size) -> Css.make (Printf.sprintf "start-%s" (Size.to_string size))

     

       38
       +
         | Inset (End, size) -> Css.make (Printf.sprintf "end-%s" (Size.to_string size))

     

       39
       +
         | Z_index None -> Css.make "z-auto"

     

       40
       +
         | Z_index (Some n) -> Css.make (Printf.sprintf "z-%d" n)

     

       41
       +
       

     

       42
       +
       let position p = Position p

     

       43
       +
       let inset dir size = Inset (dir, size)

     

       44
       +
       let z_index z = Z_index z

     

       45
       +
       

     

       46
       +
       let static = Css.make "static"

     

       47
       +
       let fixed = Css.make "fixed"

     

       48
       +
       let absolute = Css.make "absolute"

     

       49
       +
       let relative = Css.make "relative"

     

       50
       +
       let sticky = Css.make "sticky"

     

       51
       +
       

     

       52
       +
       let top size = inset Top size

     

       53
       +
       let right size = inset Right size

     

       54
       +
       let bottom size = inset Bottom size

     

       55
       +
       let left size = inset Left size

     

       56
       +
       let inset_x size = inset X size

     

       57
       +
       let inset_y size = inset Y size

+51

lib/tailwind/position.mli

···

       1
       +
       (** Position and placement utilities *)

     

       2
       +
       

     

       3
       +
       (** Position configuration *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Position values *)

     

       7
       +
       type position =

     

       8
       +
         | Static

     

       9
       +
         | Fixed

     

       10
       +
         | Absolute

     

       11
       +
         | Relative

     

       12
       +
         | Sticky

     

       13
       +
       

     

       14
       +
       (** Inset direction *)

     

       15
       +
       type inset_dir =

     

       16
       +
         | All

     

       17
       +
         | X

     

       18
       +
         | Y

     

       19
       +
         | Top

     

       20
       +
         | Right

     

       21
       +
         | Bottom

     

       22
       +
         | Left

     

       23
       +
         | Start

     

       24
       +
         | End

     

       25
       +
       

     

       26
       +
       (** Set position type *)

     

       27
       +
       val position : position -> t

     

       28
       +
       

     

       29
       +
       (** Set inset (top/right/bottom/left) *)

     

       30
       +
       val inset : inset_dir -> Size.t -> t

     

       31
       +
       

     

       32
       +
       (** Z-index values *)

     

       33
       +
       val z_index : int option -> t

     

       34
       +
       

     

       35
       +
       (** Convert to CSS class *)

     

       36
       +
       val to_class : t -> Css.t

     

       37
       +
       

     

       38
       +
       (** Common position utilities *)

     

       39
       +
       val static : Css.t

     

       40
       +
       val fixed : Css.t

     

       41
       +
       val absolute : Css.t

     

       42
       +
       val relative : Css.t

     

       43
       +
       val sticky : Css.t

     

       44
       +
       

     

       45
       +
       (** Inset shortcuts *)

     

       46
       +
       val top : Size.t -> t

     

       47
       +
       val right : Size.t -> t

     

       48
       +
       val bottom : Size.t -> t

     

       49
       +
       val left : Size.t -> t

     

       50
       +
       val inset_x : Size.t -> t

     

       51
       +
       val inset_y : Size.t -> t

+60

lib/tailwind/responsive.ml

···

       1
       +
       type breakpoint = Sm | Md | Lg | Xl | Xl2

     

       2
       +
       type container_size = Xs | Sm | Md | Lg | Xl | Xl2 | Xl3 | Xl4 | Xl5 | Xl6 | Xl7

     

       3
       +
       type media_feature = Dark | Light | Motion_safe | Motion_reduce | Contrast_more | Contrast_less | Portrait | Landscape | Print | Screen

     

       4
       +
       

     

       5
       +
       type t =

     

       6
       +
         | At_breakpoint of breakpoint * Css.t

     

       7
       +
         | Max_breakpoint of breakpoint * Css.t

     

       8
       +
         | At_container of container_size * Css.t

     

       9
       +
         | Media of media_feature * Css.t

     

       10
       +
         | Container of [`Normal | `Size | `Inline_size] option

     

       11
       +
       

     

       12
       +
       let to_class = function

     

       13
       +
         | At_breakpoint (Sm, classes) -> Css.make ("sm:" ^ Css.to_string classes)

     

       14
       +
         | At_breakpoint (Md, classes) -> Css.make ("md:" ^ Css.to_string classes)

     

       15
       +
         | At_breakpoint (Lg, classes) -> Css.make ("lg:" ^ Css.to_string classes)

     

       16
       +
         | At_breakpoint (Xl, classes) -> Css.make ("xl:" ^ Css.to_string classes)

     

       17
       +
         | At_breakpoint (Xl2, classes) -> Css.make ("2xl:" ^ Css.to_string classes)

     

       18
       +
         | Max_breakpoint (Sm, classes) -> Css.make ("max-sm:" ^ Css.to_string classes)

     

       19
       +
         | Max_breakpoint (Md, classes) -> Css.make ("max-md:" ^ Css.to_string classes)

     

       20
       +
         | Max_breakpoint (Lg, classes) -> Css.make ("max-lg:" ^ Css.to_string classes)

     

       21
       +
         | Max_breakpoint (Xl, classes) -> Css.make ("max-xl:" ^ Css.to_string classes)

     

       22
       +
         | Max_breakpoint (Xl2, classes) -> Css.make ("max-2xl:" ^ Css.to_string classes)

     

       23
       +
         | Media (Dark, classes) -> Css.make ("dark:" ^ Css.to_string classes)

     

       24
       +
         | Media (Light, classes) -> Css.make ("light:" ^ Css.to_string classes)

     

       25
       +
         | Media (Motion_safe, classes) -> Css.make ("motion-safe:" ^ Css.to_string classes)

     

       26
       +
         | Media (Motion_reduce, classes) -> Css.make ("motion-reduce:" ^ Css.to_string classes)

     

       27
       +
         | Media (Contrast_more, classes) -> Css.make ("contrast-more:" ^ Css.to_string classes)

     

       28
       +
         | Media (Contrast_less, classes) -> Css.make ("contrast-less:" ^ Css.to_string classes)

     

       29
       +
         | Media (Portrait, classes) -> Css.make ("portrait:" ^ Css.to_string classes)

     

       30
       +
         | Media (Landscape, classes) -> Css.make ("landscape:" ^ Css.to_string classes)

     

       31
       +
         | Media (Print, classes) -> Css.make ("print:" ^ Css.to_string classes)

     

       32
       +
         | Media (Screen, classes) -> Css.make ("screen:" ^ Css.to_string classes)

     

       33
       +
         | Container None -> Css.make "container"

     

       34
       +
         | Container (Some `Normal) -> Css.make "container"

     

       35
       +
         | Container (Some `Size) -> Css.make "@container"

     

       36
       +
         | Container (Some `Inline_size) -> Css.make "@container/inline-size"

     

       37
       +
         | At_container (size, classes) ->

     

       38
       +
           let size_str = match size with

     

       39
       +
             | Xs -> "@xs"

     

       40
       +
             | Sm -> "@sm" 

     

       41
       +
             | Md -> "@md"

     

       42
       +
             | Lg -> "@lg"

     

       43
       +
             | Xl -> "@xl"

     

       44
       +
             | Xl2 -> "@2xl"

     

       45
       +
             | Xl3 -> "@3xl"

     

       46
       +
             | Xl4 -> "@4xl"

     

       47
       +
             | Xl5 -> "@5xl"

     

       48
       +
             | Xl6 -> "@6xl"

     

       49
       +
             | Xl7 -> "@7xl"

     

       50
       +
           in

     

       51
       +
           Css.make (size_str ^ ":" ^ Css.to_string classes)

     

       52
       +
       

     

       53
       +
       let at_breakpoint bp classes = At_breakpoint (bp, classes)

     

       54
       +
       let max_breakpoint bp classes = Max_breakpoint (bp, classes)

     

       55
       +
       let at_container size classes = At_container (size, classes)

     

       56
       +
       let media feature classes = Media (feature, classes)

     

       57
       +
       let container container_type = Container container_type

     

       58
       +
       

     

       59
       +
       let apply responsive_t classes = 

     

       60
       +
         Css.combine (to_class responsive_t) classes

+60

lib/tailwind/responsive.mli

···

       1
       +
       (** Responsive design utilities *)

     

       2
       +
       

     

       3
       +
       (** Responsive modifier *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Breakpoint sizes *)

     

       7
       +
       type breakpoint =

     

       8
       +
         | Sm  (** 640px *)

     

       9
       +
         | Md  (** 768px *)

     

       10
       +
         | Lg  (** 1024px *)

     

       11
       +
         | Xl  (** 1280px *)

     

       12
       +
         | Xl2 (** 1536px *)

     

       13
       +
       

     

       14
       +
       (** Container query sizes *)

     

       15
       +
       type container_size =

     

       16
       +
         | Xs  (** 20rem *)

     

       17
       +
         | Sm  (** 24rem *)

     

       18
       +
         | Md  (** 28rem *)

     

       19
       +
         | Lg  (** 32rem *)

     

       20
       +
         | Xl  (** 36rem *)

     

       21
       +
         | Xl2 (** 42rem *)

     

       22
       +
         | Xl3 (** 48rem *)

     

       23
       +
         | Xl4 (** 56rem *)

     

       24
       +
         | Xl5 (** 64rem *)

     

       25
       +
         | Xl6 (** 72rem *)

     

       26
       +
         | Xl7 (** 80rem *)

     

       27
       +
       

     

       28
       +
       (** Media features *)

     

       29
       +
       type media_feature =

     

       30
       +
         | Dark

     

       31
       +
         | Light

     

       32
       +
         | Motion_safe

     

       33
       +
         | Motion_reduce

     

       34
       +
         | Contrast_more

     

       35
       +
         | Contrast_less

     

       36
       +
         | Portrait

     

       37
       +
         | Landscape

     

       38
       +
         | Print

     

       39
       +
         | Screen

     

       40
       +
       

     

       41
       +
       (** Apply classes at a breakpoint *)

     

       42
       +
       val at_breakpoint : breakpoint -> Css.t -> t

     

       43
       +
       

     

       44
       +
       (** Apply classes up to a breakpoint *)

     

       45
       +
       val max_breakpoint : breakpoint -> Css.t -> t

     

       46
       +
       

     

       47
       +
       (** Apply classes at a container query size *)

     

       48
       +
       val at_container : container_size -> Css.t -> t

     

       49
       +
       

     

       50
       +
       (** Apply classes for a media feature *)

     

       51
       +
       val media : media_feature -> Css.t -> t

     

       52
       +
       

     

       53
       +
       (** Container utilities *)

     

       54
       +
       val container : [`Normal | `Size | `Inline_size] option -> t

     

       55
       +
       

     

       56
       +
       (** Convert to CSS class *)

     

       57
       +
       val to_class : t -> Css.t

     

       58
       +
       

     

       59
       +
       (** Apply responsive modifier to classes *)

     

       60
       +
       val apply : t -> Css.t -> Css.t

+44

lib/tailwind/size.ml

···

       1
       +
       type t =

     

       2
       +
         | Px

     

       3
       +
         | Zero

     

       4
       +
         | Auto

     

       5
       +
         | Rem of float

     

       6
       +
         | Fraction of int * int

     

       7
       +
         | Full

     

       8
       +
         | Screen

     

       9
       +
         | Min

     

       10
       +
         | Max

     

       11
       +
         | Fit

     

       12
       +
         | Viewport of [`W | `H] * [`S | `L | `D]

     

       13
       +
       

     

       14
       +
       let to_string = function

     

       15
       +
         | Px -> "px"

     

       16
       +
         | Zero -> "0"

     

       17
       +
         | Auto -> "auto"

     

       18
       +
         | Rem f ->

     

       19
       +
             let s = string_of_float f in

     

       20
       +
             if String.ends_with ~suffix:".0" s then

     

       21
       +
               String.sub s 0 (String.length s - 2)

     

       22
       +
             else if String.ends_with ~suffix:"." s then

     

       23
       +
               String.sub s 0 (String.length s - 1)

     

       24
       +
             else s

     

       25
       +
         | Fraction (n, d) -> Printf.sprintf "%d/%d" n d

     

       26
       +
         | Full -> "full"

     

       27
       +
         | Screen -> "screen"

     

       28
       +
         | Min -> "min"

     

       29
       +
         | Max -> "max"

     

       30
       +
         | Fit -> "fit"

     

       31
       +
         | Viewport (dir, size) ->

     

       32
       +
             let d = match dir with `W -> "w" | `H -> "h" in

     

       33
       +
             let s = match size with `S -> "s" | `L -> "l" | `D -> "d" in

     

       34
       +
             Printf.sprintf "%sv%s" s d

     

       35
       +
       

     

       36
       +
       let px = Px

     

       37
       +
       let zero = Zero

     

       38
       +
       let auto = Auto

     

       39
       +
       let full = Full

     

       40
       +
       let screen = Screen

     

       41
       +
       

     

       42
       +
       let rem f = Rem f

     

       43
       +
       

     

       44
       +
       let fraction n d = Fraction (n, d)

+31

lib/tailwind/size.mli

···

       1
       +
       (** Size and spacing units *)

     

       2
       +
       

     

       3
       +
       (** Represents a size value in Tailwind *)

     

       4
       +
       type t =

     

       5
       +
         | Px (** 1px *)

     

       6
       +
         | Zero (** 0 *)

     

       7
       +
         | Auto (** auto *)

     

       8
       +
         | Rem of float (** Rem-based sizes: 0.5, 1.0, 1.5, etc. *)

     

       9
       +
         | Fraction of int * int (** Fractions: 1/2, 1/3, 2/3, etc. *)

     

       10
       +
         | Full (** 100% *)

     

       11
       +
         | Screen (** 100vw or 100vh *)

     

       12
       +
         | Min (** min-content *)

     

       13
       +
         | Max (** max-content *)

     

       14
       +
         | Fit (** fit-content *)

     

       15
       +
         | Viewport of [`W | `H] * [`S | `L | `D] (** Viewport units: svw, lvh, dvh, etc. *)

     

       16
       +
       

     

       17
       +
       (** Convert a size to its Tailwind class suffix *)

     

       18
       +
       val to_string : t -> string

     

       19
       +
       

     

       20
       +
       (** Common size values *)

     

       21
       +
       val px : t

     

       22
       +
       val zero : t

     

       23
       +
       val auto : t

     

       24
       +
       val full : t

     

       25
       +
       val screen : t

     

       26
       +
       

     

       27
       +
       (** Create a rem-based size *)

     

       28
       +
       val rem : float -> t

     

       29
       +
       

     

       30
       +
       (** Create a fraction size *)

     

       31
       +
       val fraction : int -> int -> t

+77

lib/tailwind/spacing.ml

···

       1
       +
       type direction =

     

       2
       +
         | All

     

       3
       +
         | X

     

       4
       +
         | Y

     

       5
       +
         | Top

     

       6
       +
         | Right

     

       7
       +
         | Bottom

     

       8
       +
         | Left

     

       9
       +
         | Start

     

       10
       +
         | End

     

       11
       +
       

     

       12
       +
       type t = {

     

       13
       +
         property: string;

     

       14
       +
         direction: string;

     

       15
       +
         size: string;

     

       16
       +
       }

     

       17
       +
       

     

       18
       +
       let direction_to_string = function

     

       19
       +
         | All -> ""

     

       20
       +
         | X -> "x"

     

       21
       +
         | Y -> "y"

     

       22
       +
         | Top -> "t"

     

       23
       +
         | Right -> "r"

     

       24
       +
         | Bottom -> "b"

     

       25
       +
         | Left -> "l"

     

       26
       +
         | Start -> "s"

     

       27
       +
         | End -> "e"

     

       28
       +
       

     

       29
       +
       let make_spacing property direction size =

     

       30
       +
         let dir_str = direction_to_string direction in

     

       31
       +
         let size_str = Size.to_string size in

     

       32
       +
         { property; direction = dir_str; size = size_str }

     

       33
       +
       

     

       34
       +
       let padding direction size = make_spacing "p" direction size

     

       35
       +
       

     

       36
       +
       let margin direction size = make_spacing "m" direction size

     

       37
       +
       

     

       38
       +
       let gap gap_type size =

     

       39
       +
         let property = match gap_type with

     

       40
       +
           | `All -> "gap"

     

       41
       +
           | `X -> "gap-x"

     

       42
       +
           | `Y -> "gap-y"

     

       43
       +
         in

     

       44
       +
         let size_str = Size.to_string size in

     

       45
       +
         { property; direction = ""; size = size_str }

     

       46
       +
       

     

       47
       +
       let space space_type size =

     

       48
       +
         let property = match space_type with

     

       49
       +
           | `X -> "space-x"

     

       50
       +
           | `Y -> "space-y"

     

       51
       +
         in

     

       52
       +
         let size_str = Size.to_string size in

     

       53
       +
         { property; direction = ""; size = size_str }

     

       54
       +
       

     

       55
       +
       let to_class t =

     

       56
       +
         let class_name = 

     

       57
       +
           if t.direction = "" then Printf.sprintf "%s-%s" t.property t.size

     

       58
       +
           else Printf.sprintf "%s%s-%s" t.property t.direction t.size

     

       59
       +
         in

     

       60
       +
         Css.make class_name

     

       61
       +
       

     

       62
       +
       (* Shorthand constructors *)

     

       63
       +
       let p size = padding All size

     

       64
       +
       let px size = padding X size

     

       65
       +
       let py size = padding Y size

     

       66
       +
       let pt size = padding Top size

     

       67
       +
       let pr size = padding Right size

     

       68
       +
       let pb size = padding Bottom size

     

       69
       +
       let pl size = padding Left size

     

       70
       +
       

     

       71
       +
       let m size = margin All size

     

       72
       +
       let mx size = margin X size

     

       73
       +
       let my size = margin Y size

     

       74
       +
       let mt size = margin Top size

     

       75
       +
       let mr size = margin Right size

     

       76
       +
       let mb size = margin Bottom size

     

       77
       +
       let ml size = margin Left size

+75

lib/tailwind/spacing.mli

···

       1
       +
       (** Spacing utilities for padding, margin, gap, and space *)

     

       2
       +
       

     

       3
       +
       (** Represents spacing configuration *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Direction for spacing *)

     

       7
       +
       type direction =

     

       8
       +
         | All (** All sides *)

     

       9
       +
         | X (** Horizontal (left and right) *)

     

       10
       +
         | Y (** Vertical (top and bottom) *)

     

       11
       +
         | Top (** Top only *)

     

       12
       +
         | Right (** Right only *)

     

       13
       +
         | Bottom (** Bottom only *)

     

       14
       +
         | Left (** Left only *)

     

       15
       +
         | Start (** Inline start (logical) *)

     

       16
       +
         | End (** Inline end (logical) *)

     

       17
       +
       

     

       18
       +
       (** Create padding classes *)

     

       19
       +
       val padding : direction -> Size.t -> t

     

       20
       +
       

     

       21
       +
       (** Create margin classes *)

     

       22
       +
       val margin : direction -> Size.t -> t

     

       23
       +
       

     

       24
       +
       (** Create gap classes for flexbox/grid *)

     

       25
       +
       val gap : [`All | `X | `Y] -> Size.t -> t

     

       26
       +
       

     

       27
       +
       (** Create space-between classes *)

     

       28
       +
       val space : [`X | `Y] -> Size.t -> t

     

       29
       +
       

     

       30
       +
       (** Convert spacing to CSS class *)

     

       31
       +
       val to_class : t -> Css.t

     

       32
       +
       

     

       33
       +
       (** Shorthand constructors *)

     

       34
       +
       

     

       35
       +
       (** Padding all sides *)

     

       36
       +
       val p : Size.t -> t

     

       37
       +
       

     

       38
       +
       (** Padding horizontal *)

     

       39
       +
       val px : Size.t -> t

     

       40
       +
       

     

       41
       +
       (** Padding vertical *)

     

       42
       +
       val py : Size.t -> t

     

       43
       +
       

     

       44
       +
       (** Padding top *)

     

       45
       +
       val pt : Size.t -> t

     

       46
       +
       

     

       47
       +
       (** Padding right *)

     

       48
       +
       val pr : Size.t -> t

     

       49
       +
       

     

       50
       +
       (** Padding bottom *)

     

       51
       +
       val pb : Size.t -> t

     

       52
       +
       

     

       53
       +
       (** Padding left *)

     

       54
       +
       val pl : Size.t -> t

     

       55
       +
       

     

       56
       +
       (** Margin all sides *)

     

       57
       +
       val m : Size.t -> t

     

       58
       +
       

     

       59
       +
       (** Margin horizontal *)

     

       60
       +
       val mx : Size.t -> t

     

       61
       +
       

     

       62
       +
       (** Margin vertical *)

     

       63
       +
       val my : Size.t -> t

     

       64
       +
       

     

       65
       +
       (** Margin top *)

     

       66
       +
       val mt : Size.t -> t

     

       67
       +
       

     

       68
       +
       (** Margin right *)

     

       69
       +
       val mr : Size.t -> t

     

       70
       +
       

     

       71
       +
       (** Margin bottom *)

     

       72
       +
       val mb : Size.t -> t

     

       73
       +
       

     

       74
       +
       (** Margin left *)

     

       75
       +
       val ml : Size.t -> t

+157

lib/tailwind/tailwind.ml

···

       1
       +
       type t = Css.t

     

       2
       +
       

     

       3
       +
       (* Module aliases *)

     

       4
       +
       module Css = Css

     

       5
       +
       module Color = Color

     

       6
       +
       module Size = Size

     

       7
       +
       module Spacing = Spacing

     

       8
       +
       module Display = Display

     

       9
       +
       module Flexbox = Flexbox

     

       10
       +
       module Grid = Grid

     

       11
       +
       module Position = Position

     

       12
       +
       module Layout = Layout

     

       13
       +
       module Typography = Typography

     

       14
       +
       module Effects = Effects

     

       15
       +
       module Responsive = Responsive

     

       16
       +
       module Variants = Variants

     

       17
       +
       

     

       18
       +
       let tw classes = Css.concat classes

     

       19
       +
       

     

       20
       +
       let class_list pairs =

     

       21
       +
         List.fold_left (fun acc (classes, condition) ->

     

       22
       +
           if condition then Css.combine acc classes else acc

     

       23
       +
         ) Css.empty pairs

     

       24
       +
       

     

       25
       +
       let to_string = Css.to_string

     

       26
       +
       

     

       27
       +
       (* Common utility patterns *)

     

       28
       +
       let flex_center = 

     

       29
       +
         tw [

     

       30
       +
           Display.to_class Flex;

     

       31
       +
           Flexbox.(to_class (justify Center));

     

       32
       +
           Flexbox.(to_class (align_items Center));

     

       33
       +
         ]

     

       34
       +
       

     

       35
       +
       let absolute_center =

     

       36
       +
         tw [

     

       37
       +
           Css.make "absolute";

     

       38
       +
           Css.make "top-1/2";

     

       39
       +
           Css.make "left-1/2";

     

       40
       +
           Css.make "-translate-x-1/2";

     

       41
       +
           Css.make "-translate-y-1/2";

     

       42
       +
         ]

     

       43
       +
       

     

       44
       +
       let sr_only =

     

       45
       +
         tw [

     

       46
       +
           Css.make "sr-only";

     

       47
       +
         ]

     

       48
       +
       

     

       49
       +
       let focus_ring ?color ?width () =

     

       50
       +
         let base_classes = [

     

       51
       +
           Css.make "focus:outline-none";

     

       52
       +
           Css.make "focus:ring-2";

     

       53
       +
           Css.make "focus:ring-offset-2";

     

       54
       +
         ] in

     

       55
       +
         let color_class = match color with

     

       56
       +
           | Some c -> [Color.ring c]

     

       57
       +
           | None -> [Css.make "focus:ring-blue-500"]

     

       58
       +
         in

     

       59
       +
         let width_class = match width with

     

       60
       +
           | Some _ -> [] (* Could implement width variations *)

     

       61
       +
           | None -> []

     

       62
       +
         in

     

       63
       +
         tw (base_classes @ color_class @ width_class)

     

       64
       +
       

     

       65
       +
       let container ?center () =

     

       66
       +
         let base = Css.make "container" in

     

       67
       +
         let center_class = match center with

     

       68
       +
           | Some true -> Css.make "mx-auto"

     

       69
       +
           | _ -> Css.empty

     

       70
       +
         in

     

       71
       +
         Css.combine base center_class

     

       72
       +
       

     

       73
       +
       let button_reset =

     

       74
       +
         tw [

     

       75
       +
           Css.make "border-0";

     

       76
       +
           Css.make "bg-transparent"; 

     

       77
       +
           Css.make "p-0";

     

       78
       +
           Css.make "cursor-pointer";

     

       79
       +
         ]

     

       80
       +
       

     

       81
       +
       let input_reset =

     

       82
       +
         tw [

     

       83
       +
           Css.make "border-0";

     

       84
       +
           Css.make "outline-none";

     

       85
       +
           Css.make "bg-transparent";

     

       86
       +
           Css.make "appearance-none";

     

       87
       +
         ]

     

       88
       +
       

     

       89
       +
       let transition transition_type =

     

       90
       +
         let class_name = match transition_type with

     

       91
       +
           | `None -> "transition-none"

     

       92
       +
           | `All -> "transition-all"

     

       93
       +
           | `Colors -> "transition-colors"

     

       94
       +
           | `Opacity -> "transition-opacity"

     

       95
       +
           | `Shadow -> "transition-shadow"

     

       96
       +
           | `Transform -> "transition-transform"

     

       97
       +
         in

     

       98
       +
         Css.make class_name

     

       99
       +
       

     

       100
       +
       let duration ms = Css.make (Printf.sprintf "duration-%d" ms)

     

       101
       +
       

     

       102
       +
       let ease timing =

     

       103
       +
         let class_name = match timing with

     

       104
       +
           | `Linear -> "ease-linear"

     

       105
       +
           | `In -> "ease-in"

     

       106
       +
           | `Out -> "ease-out"

     

       107
       +
           | `In_out -> "ease-in-out"

     

       108
       +
         in

     

       109
       +
         Css.make class_name

     

       110
       +
       

     

       111
       +
       module V4 = struct

     

       112
       +
         let container_query size classes =

     

       113
       +
           let container_class = match size with

     

       114
       +
             | Responsive.Xs -> "@xs:"

     

       115
       +
             | Responsive.Sm -> "@sm:"

     

       116
       +
             | Responsive.Md -> "@md:"

     

       117
       +
             | Responsive.Lg -> "@lg:"

     

       118
       +
             | Responsive.Xl -> "@xl:"

     

       119
       +
             | Responsive.Xl2 -> "@2xl:"

     

       120
       +
             | Responsive.Xl3 -> "@3xl:"

     

       121
       +
             | Responsive.Xl4 -> "@4xl:"

     

       122
       +
             | Responsive.Xl5 -> "@5xl:"

     

       123
       +
             | Responsive.Xl6 -> "@6xl:"

     

       124
       +
             | Responsive.Xl7 -> "@7xl:"

     

       125
       +
           in

     

       126
       +
           Css.make (container_class ^ Css.to_string classes)

     

       127
       +
           

     

       128
       +
         let starting_style classes =

     

       129
       +
           Css.make ("@starting-style " ^ Css.to_string classes)

     

       130
       +
           

     

       131
       +
         let text_shadow shadow_size =

     

       132
       +
           let class_name = match shadow_size with

     

       133
       +
             | `None -> "text-shadow-none"

     

       134
       +
             | `Sm -> "text-shadow-sm"

     

       135
       +
             | `Base -> "text-shadow"

     

       136
       +
             | `Lg -> "text-shadow-lg"

     

       137
       +
             | `Xl -> "text-shadow-xl"

     

       138
       +
           in

     

       139
       +
           Css.make class_name

     

       140
       +
           

     

       141
       +
         let mask mask_type =

     

       142
       +
           let class_name = match mask_type with

     

       143
       +
             | `Auto -> "mask-auto"

     

       144
       +
             | `Cover -> "mask-cover"

     

       145
       +
             | `Contain -> "mask-contain"

     

       146
       +
           in

     

       147
       +
           Css.make class_name

     

       148
       +
           

     

       149
       +
         let perspective perspective_type =

     

       150
       +
           let class_name = match perspective_type with

     

       151
       +
             | `None -> "perspective-none"

     

       152
       +
             | `Distant -> "perspective-distant"

     

       153
       +
             | `Normal -> "perspective-normal"

     

       154
       +
             | `Near -> "perspective-near"

     

       155
       +
           in

     

       156
       +
           Css.make class_name

     

       157
       +
       end

+78

lib/tailwind/tailwind.mli

···

       1
       +
       (** Main Tailwind API module *)

     

       2
       +
       

     

       3
       +
       (** The main type representing a collection of Tailwind classes *)

     

       4
       +
       type t = Css.t

     

       5
       +
       

     

       6
       +
       (** Module aliases for accessing individual utilities *)

     

       7
       +
       module Css = Css

     

       8
       +
       module Color = Color

     

       9
       +
       module Size = Size

     

       10
       +
       module Spacing = Spacing

     

       11
       +
       module Display = Display

     

       12
       +
       module Flexbox = Flexbox

     

       13
       +
       module Grid = Grid

     

       14
       +
       module Position = Position

     

       15
       +
       module Layout = Layout

     

       16
       +
       module Typography = Typography

     

       17
       +
       module Effects = Effects

     

       18
       +
       module Responsive = Responsive

     

       19
       +
       module Variants = Variants

     

       20
       +
       

     

       21
       +
       (** Combine multiple CSS classes *)

     

       22
       +
       val tw : Css.t list -> Css.t

     

       23
       +
       

     

       24
       +
       (** Conditionally include classes *)

     

       25
       +
       val class_list : (Css.t * bool) list -> Css.t

     

       26
       +
       

     

       27
       +
       (** Convert CSS classes to string *)

     

       28
       +
       val to_string : t -> string

     

       29
       +
       

     

       30
       +
       (** Common utility patterns *)

     

       31
       +
       

     

       32
       +
       (** Centers content using flexbox *)

     

       33
       +
       val flex_center : t

     

       34
       +
       

     

       35
       +
       (** Centers content absolutely *)

     

       36
       +
       val absolute_center : t

     

       37
       +
       

     

       38
       +
       (** Screen reader only (visually hidden but accessible) *)

     

       39
       +
       val sr_only : t

     

       40
       +
       

     

       41
       +
       (** Focus ring utility *)

     

       42
       +
       val focus_ring : ?color:Color.t -> ?width:Effects.border_width -> unit -> t

     

       43
       +
       

     

       44
       +
       (** Container with responsive max-widths *)

     

       45
       +
       val container : ?center:bool -> unit -> t

     

       46
       +
       

     

       47
       +
       (** Reset styles for buttons *)

     

       48
       +
       val button_reset : t

     

       49
       +
       

     

       50
       +
       (** Reset styles for inputs *)

     

       51
       +
       val input_reset : t

     

       52
       +
       

     

       53
       +
       (** Common transition utilities *)

     

       54
       +
       val transition : [`None | `All | `Colors | `Opacity | `Shadow | `Transform] -> t

     

       55
       +
       

     

       56
       +
       (** Duration utilities (in ms) *)

     

       57
       +
       val duration : int -> t

     

       58
       +
       

     

       59
       +
       (** Ease timing functions *)

     

       60
       +
       val ease : [`Linear | `In | `Out | `In_out] -> t

     

       61
       +
       

     

       62
       +
       (** V4 specific features *)

     

       63
       +
       module V4 : sig

     

       64
       +
         (** Container query support *)

     

       65
       +
         val container_query : Responsive.container_size -> t -> t

     

       66
       +
         

     

       67
       +
         (** Starting style animation *)

     

       68
       +
         val starting_style : t -> t

     

       69
       +
         

     

       70
       +
         (** Text shadow utilities *)

     

       71
       +
         val text_shadow : [`None | `Sm | `Base | `Lg | `Xl] -> t

     

       72
       +
         

     

       73
       +
         (** Mask utilities *)

     

       74
       +
         val mask : [`Auto | `Cover | `Contain] -> t

     

       75
       +
         

     

       76
       +
         (** 3D perspective *)

     

       77
       +
         val perspective : [`None | `Distant | `Normal | `Near] -> t

     

       78
       +
       end

+102

lib/tailwind/typography.ml

···

       1
       +
       type font_family = Sans | Serif | Mono

     

       2
       +
       type font_size = Xs | Sm | Base | Lg | Xl | Xl2 | Xl3 | Xl4 | Xl5 | Xl6 | Xl7 | Xl8 | Xl9

     

       3
       +
       type font_weight = Thin | Extralight | Light | Normal | Medium | Semibold | Bold | Extrabold | Black

     

       4
       +
       type font_style = Italic | Not_italic

     

       5
       +
       type letter_spacing = Tighter | Tight | Normal | Wide | Wider | Widest

     

       6
       +
       type line_height = None | Tight | Snug | Normal | Relaxed | Loose | Rem of float

     

       7
       +
       type text_align = Left | Center | Right | Justify | Start | End

     

       8
       +
       type text_decoration = Underline | Overline | Line_through | No_underline

     

       9
       +
       type text_transform = Uppercase | Lowercase | Capitalize | Normal_case

     

       10
       +
       

     

       11
       +
       type t = 

     

       12
       +
         | Font_family of font_family

     

       13
       +
         | Font_size of font_size  

     

       14
       +
         | Font_weight of font_weight

     

       15
       +
         | Font_style of font_style

     

       16
       +
         | Letter_spacing of letter_spacing

     

       17
       +
         | Line_height of line_height

     

       18
       +
         | Text_align of text_align

     

       19
       +
         | Text_decoration of text_decoration

     

       20
       +
         | Text_transform of text_transform

     

       21
       +
         | Text_color of Color.t

     

       22
       +
       

     

       23
       +
       let to_class = function

     

       24
       +
         | Font_family Sans -> Css.make "font-sans"

     

       25
       +
         | Font_family Serif -> Css.make "font-serif"

     

       26
       +
         | Font_family Mono -> Css.make "font-mono"

     

       27
       +
         | Font_size Xs -> Css.make "text-xs"

     

       28
       +
         | Font_size Sm -> Css.make "text-sm"

     

       29
       +
         | Font_size Base -> Css.make "text-base"

     

       30
       +
         | Font_size Lg -> Css.make "text-lg"

     

       31
       +
         | Font_size Xl -> Css.make "text-xl"

     

       32
       +
         | Font_size Xl2 -> Css.make "text-2xl"

     

       33
       +
         | Font_size Xl3 -> Css.make "text-3xl"

     

       34
       +
         | Font_size Xl4 -> Css.make "text-4xl"

     

       35
       +
         | Font_size Xl5 -> Css.make "text-5xl"

     

       36
       +
         | Font_size Xl6 -> Css.make "text-6xl"

     

       37
       +
         | Font_size Xl7 -> Css.make "text-7xl"

     

       38
       +
         | Font_size Xl8 -> Css.make "text-8xl"

     

       39
       +
         | Font_size Xl9 -> Css.make "text-9xl"

     

       40
       +
         | Font_weight Thin -> Css.make "font-thin"

     

       41
       +
         | Font_weight Extralight -> Css.make "font-extralight"

     

       42
       +
         | Font_weight Light -> Css.make "font-light"

     

       43
       +
         | Font_weight Normal -> Css.make "font-normal"

     

       44
       +
         | Font_weight Medium -> Css.make "font-medium"

     

       45
       +
         | Font_weight Semibold -> Css.make "font-semibold"

     

       46
       +
         | Font_weight Bold -> Css.make "font-bold"

     

       47
       +
         | Font_weight Extrabold -> Css.make "font-extrabold"

     

       48
       +
         | Font_weight Black -> Css.make "font-black"

     

       49
       +
         | Font_style Italic -> Css.make "italic"

     

       50
       +
         | Font_style Not_italic -> Css.make "not-italic"

     

       51
       +
         | Letter_spacing Tighter -> Css.make "tracking-tighter"

     

       52
       +
         | Letter_spacing Tight -> Css.make "tracking-tight"

     

       53
       +
         | Letter_spacing Normal -> Css.make "tracking-normal"

     

       54
       +
         | Letter_spacing Wide -> Css.make "tracking-wide"

     

       55
       +
         | Letter_spacing Wider -> Css.make "tracking-wider"

     

       56
       +
         | Letter_spacing Widest -> Css.make "tracking-widest"

     

       57
       +
         | Line_height None -> Css.make "leading-none"

     

       58
       +
         | Line_height Tight -> Css.make "leading-tight"

     

       59
       +
         | Line_height Snug -> Css.make "leading-snug"

     

       60
       +
         | Line_height Normal -> Css.make "leading-normal"

     

       61
       +
         | Line_height Relaxed -> Css.make "leading-relaxed"

     

       62
       +
         | Line_height Loose -> Css.make "leading-loose"

     

       63
       +
         | Line_height (Rem f) -> Css.make (Printf.sprintf "leading-[%.1frem]" f)

     

       64
       +
         | Text_align Left -> Css.make "text-left"

     

       65
       +
         | Text_align Center -> Css.make "text-center"

     

       66
       +
         | Text_align Right -> Css.make "text-right"

     

       67
       +
         | Text_align Justify -> Css.make "text-justify"

     

       68
       +
         | Text_align Start -> Css.make "text-start"

     

       69
       +
         | Text_align End -> Css.make "text-end"

     

       70
       +
         | Text_decoration Underline -> Css.make "underline"

     

       71
       +
         | Text_decoration Overline -> Css.make "overline"

     

       72
       +
         | Text_decoration Line_through -> Css.make "line-through"

     

       73
       +
         | Text_decoration No_underline -> Css.make "no-underline"

     

       74
       +
         | Text_transform Uppercase -> Css.make "uppercase"

     

       75
       +
         | Text_transform Lowercase -> Css.make "lowercase"

     

       76
       +
         | Text_transform Capitalize -> Css.make "capitalize"

     

       77
       +
         | Text_transform Normal_case -> Css.make "normal-case"

     

       78
       +
         | Text_color color -> Color.text color

     

       79
       +
       

     

       80
       +
       let font_family ff = Font_family ff

     

       81
       +
       let font_size fs = Font_size fs

     

       82
       +
       let font_weight fw = Font_weight fw

     

       83
       +
       let font_style fs = Font_style fs

     

       84
       +
       let letter_spacing ls = Letter_spacing ls

     

       85
       +
       let line_height lh = Line_height lh

     

       86
       +
       let text_align ta = Text_align ta

     

       87
       +
       let text_decoration td = Text_decoration td

     

       88
       +
       let text_transform tt = Text_transform tt

     

       89
       +
       let text_color c = Text_color c

     

       90
       +
       

     

       91
       +
       let text_xs = Css.make "text-xs"

     

       92
       +
       let text_sm = Css.make "text-sm"

     

       93
       +
       let text_base = Css.make "text-base"

     

       94
       +
       let text_lg = Css.make "text-lg"

     

       95
       +
       let text_xl = Css.make "text-xl"

     

       96
       +
       let font_bold = Css.make "font-bold"

     

       97
       +
       let font_normal = Css.make "font-normal"

     

       98
       +
       let italic = Css.make "italic"

     

       99
       +
       let underline = Css.make "underline"

     

       100
       +
       let uppercase = Css.make "uppercase"

     

       101
       +
       let lowercase = Css.make "lowercase"

     

       102
       +
       let capitalize = Css.make "capitalize"

+94

lib/tailwind/typography.mli

···

       1
       +
       (** Typography utilities *)

     

       2
       +
       

     

       3
       +
       (** Typography configuration *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Font family *)

     

       7
       +
       type font_family =

     

       8
       +
         | Sans

     

       9
       +
         | Serif

     

       10
       +
         | Mono

     

       11
       +
       

     

       12
       +
       (** Font size *)

     

       13
       +
       type font_size =

     

       14
       +
         | Xs | Sm | Base | Lg | Xl

     

       15
       +
         | Xl2 | Xl3 | Xl4 | Xl5 | Xl6

     

       16
       +
         | Xl7 | Xl8 | Xl9

     

       17
       +
       

     

       18
       +
       (** Font weight *)

     

       19
       +
       type font_weight =

     

       20
       +
         | Thin | Extralight | Light | Normal | Medium

     

       21
       +
         | Semibold | Bold | Extrabold | Black

     

       22
       +
       

     

       23
       +
       (** Font style *)

     

       24
       +
       type font_style =

     

       25
       +
         | Italic

     

       26
       +
         | Not_italic

     

       27
       +
       

     

       28
       +
       (** Letter spacing *)

     

       29
       +
       type letter_spacing =

     

       30
       +
         | Tighter | Tight | Normal | Wide | Wider | Widest

     

       31
       +
       

     

       32
       +
       (** Line height *)

     

       33
       +
       type line_height =

     

       34
       +
         | None | Tight | Snug | Normal | Relaxed | Loose

     

       35
       +
         | Rem of float

     

       36
       +
       

     

       37
       +
       (** Text alignment *)

     

       38
       +
       type text_align =

     

       39
       +
         | Left | Center | Right | Justify | Start | End

     

       40
       +
       

     

       41
       +
       (** Text decoration *)

     

       42
       +
       type text_decoration =

     

       43
       +
         | Underline | Overline | Line_through | No_underline

     

       44
       +
       

     

       45
       +
       (** Text transform *)

     

       46
       +
       type text_transform =

     

       47
       +
         | Uppercase | Lowercase | Capitalize | Normal_case

     

       48
       +
       

     

       49
       +
       (** Set font family *)

     

       50
       +
       val font_family : font_family -> t

     

       51
       +
       

     

       52
       +
       (** Set font size *)

     

       53
       +
       val font_size : font_size -> t

     

       54
       +
       

     

       55
       +
       (** Set font weight *)

     

       56
       +
       val font_weight : font_weight -> t

     

       57
       +
       

     

       58
       +
       (** Set font style *)

     

       59
       +
       val font_style : font_style -> t

     

       60
       +
       

     

       61
       +
       (** Set letter spacing *)

     

       62
       +
       val letter_spacing : letter_spacing -> t

     

       63
       +
       

     

       64
       +
       (** Set line height *)

     

       65
       +
       val line_height : line_height -> t

     

       66
       +
       

     

       67
       +
       (** Set text alignment *)

     

       68
       +
       val text_align : text_align -> t

     

       69
       +
       

     

       70
       +
       (** Set text decoration *)

     

       71
       +
       val text_decoration : text_decoration -> t

     

       72
       +
       

     

       73
       +
       (** Set text transform *)

     

       74
       +
       val text_transform : text_transform -> t

     

       75
       +
       

     

       76
       +
       (** Set text color (delegates to Color module) *)

     

       77
       +
       val text_color : Color.t -> t

     

       78
       +
       

     

       79
       +
       (** Convert to CSS class *)

     

       80
       +
       val to_class : t -> Css.t

     

       81
       +
       

     

       82
       +
       (** Common text utilities *)

     

       83
       +
       val text_xs : Css.t

     

       84
       +
       val text_sm : Css.t

     

       85
       +
       val text_base : Css.t

     

       86
       +
       val text_lg : Css.t

     

       87
       +
       val text_xl : Css.t

     

       88
       +
       val font_bold : Css.t

     

       89
       +
       val font_normal : Css.t

     

       90
       +
       val italic : Css.t

     

       91
       +
       val underline : Css.t

     

       92
       +
       val uppercase : Css.t

     

       93
       +
       val lowercase : Css.t

     

       94
       +
       val capitalize : Css.t

+100

lib/tailwind/variants.ml

···

       1
       +
       type pseudo = Hover | Focus | Focus_within | Focus_visible | Active | Visited | Target 

     

       2
       +
         | Disabled | Enabled | Checked | Indeterminate | Default | Required | Valid | Invalid

     

       3
       +
         | In_range | Out_of_range | Placeholder_shown | Autofill | Read_only

     

       4
       +
       

     

       5
       +
       type pseudo_element = Before | After | First_line | First_letter | Marker | Selection | File | Backdrop | Placeholder

     

       6
       +
       

     

       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
       +
       

     

       9
       +
       type group = Group of pseudo | Peer of pseudo

     

       10
       +
       

     

       11
       +
       type special = Not of pseudo | Has of string | Where of string | Is of string | Starting_style | Inert | Open | In of string

     

       12
       +
       

     

       13
       +
       type t = 

     

       14
       +
         | Pseudo of pseudo * Css.t

     

       15
       +
         | Pseudo_element of pseudo_element * Css.t

     

       16
       +
         | Structural of structural * Css.t

     

       17
       +
         | Group of group * Css.t

     

       18
       +
         | Special of special * Css.t

     

       19
       +
       

     

       20
       +
       let pseudo_to_string = function

     

       21
       +
         | Hover -> "hover"

     

       22
       +
         | Focus -> "focus"

     

       23
       +
         | Focus_within -> "focus-within"

     

       24
       +
         | Focus_visible -> "focus-visible"

     

       25
       +
         | Active -> "active"

     

       26
       +
         | Visited -> "visited"

     

       27
       +
         | Target -> "target"

     

       28
       +
         | Disabled -> "disabled"

     

       29
       +
         | Enabled -> "enabled"

     

       30
       +
         | Checked -> "checked"

     

       31
       +
         | Indeterminate -> "indeterminate"

     

       32
       +
         | Default -> "default"

     

       33
       +
         | Required -> "required"

     

       34
       +
         | Valid -> "valid"

     

       35
       +
         | Invalid -> "invalid"

     

       36
       +
         | In_range -> "in-range"

     

       37
       +
         | Out_of_range -> "out-of-range"

     

       38
       +
         | Placeholder_shown -> "placeholder-shown"

     

       39
       +
         | Autofill -> "autofill"

     

       40
       +
         | Read_only -> "read-only"

     

       41
       +
       

     

       42
       +
       let to_class = function

     

       43
       +
         | Pseudo (pseudo, classes) -> 

     

       44
       +
           let prefix = pseudo_to_string pseudo in

     

       45
       +
           Css.make (prefix ^ ":" ^ Css.to_string classes)

     

       46
       +
         | Pseudo_element (Before, classes) -> Css.make ("before:" ^ Css.to_string classes)

     

       47
       +
         | Pseudo_element (After, classes) -> Css.make ("after:" ^ Css.to_string classes)

     

       48
       +
         | Pseudo_element (First_line, classes) -> Css.make ("first-line:" ^ Css.to_string classes)

     

       49
       +
         | Pseudo_element (First_letter, classes) -> Css.make ("first-letter:" ^ Css.to_string classes)

     

       50
       +
         | Pseudo_element (Marker, classes) -> Css.make ("marker:" ^ Css.to_string classes)

     

       51
       +
         | Pseudo_element (Selection, classes) -> Css.make ("selection:" ^ Css.to_string classes)

     

       52
       +
         | Pseudo_element (File, classes) -> Css.make ("file:" ^ Css.to_string classes)

     

       53
       +
         | Pseudo_element (Backdrop, classes) -> Css.make ("backdrop:" ^ Css.to_string classes)

     

       54
       +
         | Pseudo_element (Placeholder, classes) -> Css.make ("placeholder:" ^ Css.to_string classes)

     

       55
       +
         | Structural (First, classes) -> Css.make ("first:" ^ Css.to_string classes)

     

       56
       +
         | Structural (Last, classes) -> Css.make ("last:" ^ Css.to_string classes)

     

       57
       +
         | Structural (Only, classes) -> Css.make ("only:" ^ Css.to_string classes)

     

       58
       +
         | Structural (Odd, classes) -> Css.make ("odd:" ^ Css.to_string classes)

     

       59
       +
         | Structural (Even, classes) -> Css.make ("even:" ^ Css.to_string classes)

     

       60
       +
         | Structural (First_of_type, classes) -> Css.make ("first-of-type:" ^ Css.to_string classes)

     

       61
       +
         | Structural (Last_of_type, classes) -> Css.make ("last-of-type:" ^ Css.to_string classes)

     

       62
       +
         | Structural (Only_of_type, classes) -> Css.make ("only-of-type:" ^ Css.to_string classes)

     

       63
       +
         | Structural (Empty, classes) -> Css.make ("empty:" ^ Css.to_string classes)

     

       64
       +
         | Structural (Root, classes) -> Css.make ("root:" ^ Css.to_string classes)

     

       65
       +
         | Structural (Nth n, classes) -> Css.make (Printf.sprintf "nth-child(%d):" n ^ Css.to_string classes)

     

       66
       +
         | Structural (Nth_last n, classes) -> Css.make (Printf.sprintf "nth-last-child(%d):" n ^ Css.to_string classes)

     

       67
       +
         | Group (Group pseudo, classes) -> 

     

       68
       +
           let prefix = pseudo_to_string pseudo in

     

       69
       +
           Css.make ("group-" ^ prefix ^ ":" ^ Css.to_string classes)

     

       70
       +
         | Group (Peer pseudo, classes) -> 

     

       71
       +
           let prefix = pseudo_to_string pseudo in

     

       72
       +
           Css.make ("peer-" ^ prefix ^ ":" ^ Css.to_string classes)

     

       73
       +
         | Special (Not pseudo, classes) -> 

     

       74
       +
           let prefix = pseudo_to_string pseudo in

     

       75
       +
           Css.make ("not-" ^ prefix ^ ":" ^ Css.to_string classes)

     

       76
       +
         | Special (Has selector, classes) -> Css.make ("has-[" ^ selector ^ "]:" ^ Css.to_string classes)

     

       77
       +
         | Special (Where selector, classes) -> Css.make ("where-[" ^ selector ^ "]:" ^ Css.to_string classes)

     

       78
       +
         | Special (Is selector, classes) -> Css.make ("is-[" ^ selector ^ "]:" ^ Css.to_string classes)

     

       79
       +
         | Special (Starting_style, classes) -> Css.make ("@starting-style:" ^ Css.to_string classes)

     

       80
       +
         | Special (Inert, classes) -> Css.make ("inert:" ^ Css.to_string classes)

     

       81
       +
         | Special (Open, classes) -> Css.make ("open:" ^ Css.to_string classes)

     

       82
       +
         | Special (In variant, classes) -> Css.make ("in-" ^ variant ^ ":" ^ Css.to_string classes)

     

       83
       +
       

     

       84
       +
       let pseudo p classes = Pseudo (p, classes)

     

       85
       +
       let pseudo_element pe classes = Pseudo_element (pe, classes)

     

       86
       +
       let structural s classes = Structural (s, classes)

     

       87
       +
       let group g classes = Group (g, classes)

     

       88
       +
       let special s classes = Special (s, classes)

     

       89
       +
       

     

       90
       +
       let apply variant_t classes =

     

       91
       +
         Css.combine (to_class variant_t) classes

     

       92
       +
       

     

       93
       +
       let hover classes = Css.make ("hover:" ^ Css.to_string classes)

     

       94
       +
       let focus classes = Css.make ("focus:" ^ Css.to_string classes)

     

       95
       +
       let active classes = Css.make ("active:" ^ Css.to_string classes)

     

       96
       +
       let disabled classes = Css.make ("disabled:" ^ Css.to_string classes)

     

       97
       +
       let first classes = Css.make ("first:" ^ Css.to_string classes)

     

       98
       +
       let last classes = Css.make ("last:" ^ Css.to_string classes)

     

       99
       +
       let odd classes = Css.make ("odd:" ^ Css.to_string classes)

     

       100
       +
       let even classes = Css.make ("even:" ^ Css.to_string classes)

+101

lib/tailwind/variants.mli

···

       1
       +
       (** State variants and pseudo-classes *)

     

       2
       +
       

     

       3
       +
       (** Variant modifier *)

     

       4
       +
       type t

     

       5
       +
       

     

       6
       +
       (** Pseudo-class states *)

     

       7
       +
       type pseudo =

     

       8
       +
         | Hover

     

       9
       +
         | Focus

     

       10
       +
         | Focus_within

     

       11
       +
         | Focus_visible

     

       12
       +
         | Active

     

       13
       +
         | Visited

     

       14
       +
         | Target

     

       15
       +
         | Disabled

     

       16
       +
         | Enabled

     

       17
       +
         | Checked

     

       18
       +
         | Indeterminate

     

       19
       +
         | Default

     

       20
       +
         | Required

     

       21
       +
         | Valid

     

       22
       +
         | Invalid

     

       23
       +
         | In_range

     

       24
       +
         | Out_of_range

     

       25
       +
         | Placeholder_shown

     

       26
       +
         | Autofill

     

       27
       +
         | Read_only

     

       28
       +
       

     

       29
       +
       (** Pseudo-element states *)

     

       30
       +
       type pseudo_element =

     

       31
       +
         | Before

     

       32
       +
         | After

     

       33
       +
         | First_line

     

       34
       +
         | First_letter

     

       35
       +
         | Marker

     

       36
       +
         | Selection

     

       37
       +
         | File

     

       38
       +
         | Backdrop

     

       39
       +
         | Placeholder

     

       40
       +
       

     

       41
       +
       (** Structural pseudo-classes *)

     

       42
       +
       type structural =

     

       43
       +
         | First

     

       44
       +
         | Last

     

       45
       +
         | Only

     

       46
       +
         | Odd

     

       47
       +
         | Even

     

       48
       +
         | First_of_type

     

       49
       +
         | Last_of_type

     

       50
       +
         | Only_of_type

     

       51
       +
         | Empty

     

       52
       +
         | Root

     

       53
       +
         | Nth of int

     

       54
       +
         | Nth_last of int

     

       55
       +
       

     

       56
       +
       (** Group and peer variants *)

     

       57
       +
       type group =

     

       58
       +
         | Group of pseudo

     

       59
       +
         | Peer of pseudo

     

       60
       +
       

     

       61
       +
       (** Special variants *)

     

       62
       +
       type special =

     

       63
       +
         | Not of pseudo

     

       64
       +
         | Has of string

     

       65
       +
         | Where of string

     

       66
       +
         | Is of string

     

       67
       +
         | Starting_style

     

       68
       +
         | Inert

     

       69
       +
         | Open

     

       70
       +
         | In of string

     

       71
       +
       

     

       72
       +
       (** Apply pseudo-class variant *)

     

       73
       +
       val pseudo : pseudo -> Css.t -> t

     

       74
       +
       

     

       75
       +
       (** Apply pseudo-element variant *)

     

       76
       +
       val pseudo_element : pseudo_element -> Css.t -> t

     

       77
       +
       

     

       78
       +
       (** Apply structural variant *)

     

       79
       +
       val structural : structural -> Css.t -> t

     

       80
       +
       

     

       81
       +
       (** Apply group variant *)

     

       82
       +
       val group : group -> Css.t -> t

     

       83
       +
       

     

       84
       +
       (** Apply special variant *)

     

       85
       +
       val special : special -> Css.t -> t

     

       86
       +
       

     

       87
       +
       (** Convert to CSS class *)

     

       88
       +
       val to_class : t -> Css.t

     

       89
       +
       

     

       90
       +
       (** Apply variant to classes *)

     

       91
       +
       val apply : t -> Css.t -> Css.t

     

       92
       +
       

     

       93
       +
       (** Common variants *)

     

       94
       +
       val hover : Css.t -> Css.t

     

       95
       +
       val focus : Css.t -> Css.t

     

       96
       +
       val active : Css.t -> Css.t

     

       97
       +
       val disabled : Css.t -> Css.t

     

       98
       +
       val first : Css.t -> Css.t

     

       99
       +
       val last : Css.t -> Css.t

     

       100
       +
       val odd : Css.t -> Css.t

     

       101
       +
       val even : Css.t -> Css.t

+32

tailwind-html.opam

···

       1
       +
       # This file is generated by dune, edit dune-project instead

     

       2
       +
       opam-version: "2.0"

     

       3
       +
       synopsis: "Tailwind CSS integration with Htmlit"

     

       4
       +
       description: "High-level component library using Tailwind CSS with Htmlit"

     

       5
       +
       maintainer: ["Your Name"]

     

       6
       +
       authors: ["Your Name"]

     

       7
       +
       license: "MIT"

     

       8
       +
       homepage: "https://github.com/yourusername/tailwind-ocaml"

     

       9
       +
       doc: "https://yourusername.github.io/tailwind-ocaml/"

     

       10
       +
       bug-reports: "https://github.com/yourusername/tailwind-ocaml/issues"

     

       11
       +
       depends: [

     

       12
       +
         "ocaml"

     

       13
       +
         "dune" {>= "3.0" & >= "3.0"}

     

       14
       +
         "tailwind"

     

       15
       +
         "htmlit" {>= "0.1.0"}

     

       16
       +
         "odoc" {with-doc}

     

       17
       +
       ]

     

       18
       +
       build: [

     

       19
       +
         ["dune" "subst"] {dev}

     

       20
       +
         [

     

       21
       +
           "dune"

     

       22
       +
           "build"

     

       23
       +
           "-p"

     

       24
       +
           name

     

       25
       +
           "-j"

     

       26
       +
           jobs

     

       27
       +
           "@install"

     

       28
       +
           "@runtest" {with-test}

     

       29
       +
           "@doc" {with-doc}

     

       30
       +
         ]

     

       31
       +
       ]

     

       32
       +
       dev-repo: "git+https://github.com/yourusername/tailwind-ocaml.git"

+1422

tailwind-llms.txt

···

       1
       +
       # Tailwind CSS v4 LLM Development Guidelines

     

       2
       +
       

     

       3
       +
       You are an expert web developer specializing in Tailwind CSS v4. Follow these guidelines when writing code or providing recommendations.

     

       4
       +
       

     

       5
       +
       ## Core Principles

     

       6
       +
       

     

       7
       +
       Tailwind CSS v4 is a complete rewrite with a new high-performance Oxide engine, CSS-first configuration, and modern web platform features. It requires modern browsers (Safari 16.4+, Chrome 111+, Firefox 128+) and is NOT compatible with older browsers.

     

       8
       +
       

     

       9
       +
       ## Installation & Setup

     

       10
       +
       

     

       11
       +
       ### Basic Setup

     

       12
       +
       ```css

     

       13
       +
       /* styles.css */

     

       14
       +
       @import "tailwindcss";

     

       15
       +
       ```

     

       16
       +
       

     

       17
       +
       ### With Vite

     

       18
       +
       ```js

     

       19
       +
       // vite.config.js

     

       20
       +
       import { defineConfig } from 'vite'

     

       21
       +
       import tailwindcss from '@tailwindcss/vite'

     

       22
       +
       

     

       23
       +
       export default defineConfig({

     

       24
       +
         plugins: [tailwindcss()]

     

       25
       +
       })

     

       26
       +
       ```

     

       27
       +
       

     

       28
       +
       ### Package Installation

     

       29
       +
       ```bash

     

       30
       +
       npm install tailwindcss@next @tailwindcss/vite@next

     

       31
       +
       ```

     

       32
       +
       

     

       33
       +
       ## Configuration (CSS-First)

     

       34
       +
       

     

       35
       +
       **IMPORTANT**: v4 uses CSS-first configuration, NOT JavaScript config files. Use the `@theme` directive in your CSS file:

     

       36
       +
       

     

       37
       +
       ```css

     

       38
       +
       @import "tailwindcss";

     

       39
       +
       

     

       40
       +
       @theme {

     

       41
       +
         /* Colors (use OKLCH for wider gamut) */

     

       42
       +
         --color-brand-50: oklch(0.98 0.01 142.12);

     

       43
       +
         --color-brand-500: oklch(0.64 0.15 142.12);

     

       44
       +
         --color-brand-900: oklch(0.25 0.08 142.12);

     

       45
       +
         

     

       46
       +
         /* Typography */

     

       47
       +
         --font-display: "Satoshi", "Inter", sans-serif;

     

       48
       +
         --font-body: "Inter", system-ui, sans-serif;

     

       49
       +
         

     

       50
       +
         /* Spacing */

     

       51
       +
         --spacing-18: 4.5rem;

     

       52
       +
         --spacing-72: 18rem;

     

       53
       +
         

     

       54
       +
         /* Breakpoints */

     

       55
       +
         --breakpoint-3xl: 1920px;

     

       56
       +
         --breakpoint-4xl: 2560px;

     

       57
       +
         

     

       58
       +
         /* Shadows */

     

       59
       +
         --shadow-brutal: 8px 8px 0px 0px #000;

     

       60
       +
         

     

       61
       +
         /* Animation */

     

       62
       +
         --animate-wiggle: wiggle 1s ease-in-out infinite;

     

       63
       +
       }

     

       64
       +
       

     

       65
       +
       /* Define keyframes for animations */

     

       66
       +
       @keyframes wiggle {

     

       67
       +
         0%, 100% { transform: rotate(-3deg); }

     

       68
       +
         50% { transform: rotate(3deg); }

     

       69
       +
       }

     

       70
       +
       ```

     

       71
       +
       

     

       72
       +
       ### Legacy Config Support (if needed)

     

       73
       +
       ```css

     

       74
       +
       @import "tailwindcss";

     

       75
       +
       @config "./tailwind.config.js";

     

       76
       +
       ```

     

       77
       +
       

     

       78
       +
       ## Breaking Changes from v3

     

       79
       +
       

     

       80
       +
       ### Import Changes

     

       81
       +
       - ❌ `@tailwind base; @tailwind components; @tailwind utilities;`

     

       82
       +
       - ✅ `@import "tailwindcss";`

     

       83
       +
       

     

       84
       +
       ### Removed Utilities

     

       85
       +
       - `text-opacity-*` → Use `text-{color}/{opacity}` instead

     

       86
       +
       - `bg-opacity-*` → Use `bg-{color}/{opacity}` instead

     

       87
       +
       - `border-opacity-*` → Use `border-{color}/{opacity}` instead

     

       88
       +
       - `flex-grow-*` → Use `grow-*`

     

       89
       +
       - `flex-shrink-*` → Use `shrink-*`

     

       90
       +
       - `decoration-slice` → Use `box-decoration-slice`

     

       91
       +
       

     

       92
       +
       ### Renamed Utilities

     

       93
       +
       - `shadow-sm` → `shadow-xs`

     

       94
       +
       - `rounded-sm` → `rounded-xs`

     

       95
       +
       - `blur-sm` → `blur-xs`

     

       96
       +
       - `bg-gradient-*` → `bg-linear-*`

     

       97
       +
       

     

       98
       +
       ### Default Behavior Changes

     

       99
       +
       - **Border**: No longer defaults to gray-200, uses `currentColor`

     

       100
       +
       - **Ring**: Changed from 3px blue to 1px `currentColor`

     

       101
       +
       - **Outline**: Now 1px by default for consistency

     

       102
       +
       

     

       103
       +
       ## Custom Utilities

     

       104
       +
       

     

       105
       +
       Use the `@utility` directive instead of `@layer utilities`:

     

       106
       +
       

     

       107
       +
       ```css

     

       108
       +
       @utility btn {

     

       109
       +
         padding: 0.5rem 1rem;

     

       110
       +
         border-radius: 0.375rem;

     

       111
       +
         font-weight: 500;

     

       112
       +
         transition: all 0.2s;

     

       113
       +
       }

     

       114
       +
       

     

       115
       +
       @utility btn-primary {

     

       116
       +
         background: var(--color-blue-600);

     

       117
       +
         color: white;

     

       118
       +
         

     

       119
       +
         &:hover {

     

       120
       +
           background: var(--color-blue-700);

     

       121
       +
         }

     

       122
       +
       }

     

       123
       +
       

     

       124
       +
       /* Functional utilities with parameters */

     

       125
       +
       @utility margin-auto {

     

       126
       +
         margin: auto;

     

       127
       +
       }

     

       128
       +
       

     

       129
       +
       @utility flex-center {

     

       130
       +
         display: flex;

     

       131
       +
         justify-content: center;

     

       132
       +
         align-items: center;

     

       133
       +
       }

     

       134
       +
       ```

     

       135
       +
       

     

       136
       +
       ## Custom Variants

     

       137
       +
       

     

       138
       +
       ```css

     

       139
       +
       @custom-variant theme-dark {

     

       140
       +
         &:where([data-theme="dark"] *) {

     

       141
       +
           @slot;

     

       142
       +
         }

     

       143
       +
       }

     

       144
       +
       

     

       145
       +
       @custom-variant any-hover {

     

       146
       +
         @media (any-hover: hover) {

     

       147
       +
           &:hover {

     

       148
       +
             @slot;

     

       149
       +
           }

     

       150
       +
         }

     

       151
       +
       }

     

       152
       +
       ```

     

       153
       +
       

     

       154
       +
       ## New Features in v4

     

       155
       +
       

     

       156
       +
       ### Container Queries (Built-in)

     

       157
       +
       ```html

     

       158
       +
       <div class="@container">

     

       159
       +
         <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3">

     

       160
       +
           <div class="@min-w-64:text-lg @max-w-96:bg-blue-100">

     

       161
       +
             Responsive to container size

     

       162
       +
           </div>

     

       163
       +
         </div>

     

       164
       +
       </div>

     

       165
       +
       ```

     

       166
       +
       

     

       167
       +
       ### 3D Transforms

     

       168
       +
       ```html

     

       169
       +
       <div class="perspective-1000">

     

       170
       +
         <div class="rotate-x-45 rotate-y-12 scale-z-110 translate-z-24 transform-3d">

     

       171
       +
           3D transformed element

     

       172
       +
         </div>

     

       173
       +
       </div>

     

       174
       +
       ```

     

       175
       +
       

     

       176
       +
       ### Enhanced Gradients

     

       177
       +
       ```html

     

       178
       +
       <!-- Linear gradients with angles -->

     

       179
       +
       <div class="bg-linear-45 from-blue-500 to-purple-500"></div>

     

       180
       +
       

     

       181
       +
       <!-- Radial gradients -->

     

       182
       +
       <div class="bg-radial from-red-500 via-yellow-500 to-orange-500"></div>

     

       183
       +
       

     

       184
       +
       <!-- Conic gradients -->

     

       185
       +
       <div class="bg-conic from-pink-500 via-blue-500 to-green-500"></div>

     

       186
       +
       ```

     

       187
       +
       

     

       188
       +
       ### Text Shadows

     

       189
       +
       ```html

     

       190
       +
       <h1 class="text-shadow-lg text-shadow-blue-500/50">

     

       191
       +
         Text with colored shadow

     

       192
       +
       </h1>

     

       193
       +
       ```

     

       194
       +
       

     

       195
       +
       ### Mask Utilities

     

       196
       +
       ```html

     

       197
       +
       <div class="mask-radial mask-cover">

     

       198
       +
         <img src="image.jpg" alt="Masked image" />

     

       199
       +
       </div>

     

       200
       +
       ```

     

       201
       +
       

     

       202
       +
       ### New Variants

     

       203
       +
       

     

       204
       +
       #### @starting-style (for animations)

     

       205
       +
       ```html

     

       206
       +
       <div class="opacity-100 @starting-style:opacity-0 transition-opacity">

     

       207
       +
         Animates in on mount

     

       208
       +
       </div>

     

       209
       +
       ```

     

       210
       +
       

     

       211
       +
       #### not-* variant

     

       212
       +
       ```html

     

       213
       +
       <div class="bg-blue-500 not-hover:bg-gray-500">

     

       214
       +
         Blue except when hovering

     

       215
       +
       </div>

     

       216
       +
       ```

     

       217
       +
       

     

       218
       +
       #### nth-* variants

     

       219
       +
       ```html

     

       220
       +
       <div class="nth-2:bg-red-500 nth-odd:bg-blue-500">

     

       221
       +
         Nth child styling

     

       222
       +
       </div>

     

       223
       +
       ```

     

       224
       +
       

     

       225
       +
       #### inert variant

     

       226
       +
       ```html

     

       227
       +
       <div class="inert:opacity-50 inert:pointer-events-none">

     

       228
       +
         Styled when inert

     

       229
       +
       </div>

     

       230
       +
       ```

     

       231
       +
       

     

       232
       +
       #### in-* variant (like group-* but without group class)

     

       233
       +
       ```html

     

       234
       +
       <article>

     

       235
       +
         <h2 class="in-article:text-lg">Styled when inside article</h2>

     

       236
       +
       </article>

     

       237
       +
       ```

     

       238
       +
       

     

       239
       +
       ### Modern Color System

     

       240
       +
       v4 uses OKLCH color space for wider gamut support:

     

       241
       +
       

     

       242
       +
       ```css

     

       243
       +
       @theme {

     

       244
       +
         --color-brand-primary: oklch(0.7 0.15 180);

     

       245
       +
         --color-brand-accent: oklch(0.8 0.2 45);

     

       246
       +
       }

     

       247
       +
       ```

     

       248
       +
       

     

       249
       +
       ## Multi-Theme Strategy

     

       250
       +
       

     

       251
       +
       ```css

     

       252
       +
       @import "tailwindcss";

     

       253
       +
       

     

       254
       +
       @theme {

     

       255
       +
         --color-primary: oklch(0.5 0.2 240);

     

       256
       +
         --color-background: oklch(0.98 0.01 240);

     

       257
       +
       }

     

       258
       +
       

     

       259
       +
       @layer base {

     

       260
       +
         [data-theme='dark'] {

     

       261
       +
           --color-primary: oklch(0.7 0.2 240);

     

       262
       +
           --color-background: oklch(0.15 0.02 240);

     

       263
       +
         }

     

       264
       +
         

     

       265
       +
         [data-theme='high-contrast'] {

     

       266
       +
           --color-primary: oklch(0.0 0 0);

     

       267
       +
           --color-background: oklch(1.0 0 0);

     

       268
       +
         }

     

       269
       +
       }

     

       270
       +
       ```

     

       271
       +
       

     

       272
       +
       ## Best Practices

     

       273
       +
       

     

       274
       +
       ### 1. Use CSS Variables for Dynamic Values

     

       275
       +
       ```html

     

       276
       +
       <div class="bg-[var(--dynamic-color)] text-[var(--dynamic-size)]">

     

       277
       +
         Dynamic styling

     

       278
       +
       </div>

     

       279
       +
       ```

     

       280
       +
       

     

       281
       +
       ### 2. Leverage the New Color System

     

       282
       +
       ```html

     

       283
       +
       <!-- Better contrast and vibrancy with OKLCH -->

     

       284
       +
       <div class="bg-blue-500 text-white">

     

       285
       +
         Vivid colors on modern displays

     

       286
       +
       </div>

     

       287
       +
       ```

     

       288
       +
       

     

       289
       +
       ### 3. Container Queries for True Responsive Design

     

       290
       +
       ```html

     

       291
       +
       <div class="@container">

     

       292
       +
         <div class="p-4 @lg:p-8 @xl:p-12">

     

       293
       +
           Responds to container, not viewport

     

       294
       +
         </div>

     

       295
       +
       </div>

     

       296
       +
       ```

     

       297
       +
       

     

       298
       +
       ### 4. Modern CSS Features

     

       299
       +
       ```html

     

       300
       +
       <!-- Native cascade layers -->

     

       301
       +
       <div class="layer-[utilities]:z-10">

     

       302
       +
         Proper layer management

     

       303
       +
       </div>

     

       304
       +
       

     

       305
       +
       <!-- Color mixing -->

     

       306
       +
       <div class="bg-blue-500/50">

     

       307
       +
         Uses color-mix() under the hood

     

       308
       +
       </div>

     

       309
       +
       ```

     

       310
       +
       

     

       311
       +
       ## Performance Optimizations

     

       312
       +
       

     

       313
       +
       v4's Oxide engine provides:

     

       314
       +
       - 5x faster full builds

     

       315
       +
       - 100x faster incremental builds

     

       316
       +
       - Automatic content detection

     

       317
       +
       - Built-in import handling

     

       318
       +
       - Native vendor prefixing

     

       319
       +
       

     

       320
       +
       ## File Organization

     

       321
       +
       

     

       322
       +
       ```

     

       323
       +
       src/

     

       324
       +
       ├── styles/

     

       325
       +
       │   ├── main.css          # @import "tailwindcss" + @theme

     

       326
       +
       │   ├── components.css    # @utility definitions

     

       327
       +
       │   └── utilities.css     # Additional @utility definitions

     

       328
       +
       └── components/

     

       329
       +
           └── *.vue/jsx/html    # Your components

     

       330
       +
       ```

     

       331
       +
       

     

       332
       +
       ## Common Patterns

     

       333
       +
       

     

       334
       +
       ### Theme-aware Components

     

       335
       +
       ```css

     

       336
       +
       @utility card {

     

       337
       +
         background: var(--color-background);

     

       338
       +
         border: 1px solid var(--color-border);

     

       339
       +
         border-radius: 0.5rem;

     

       340
       +
         padding: 1.5rem;

     

       341
       +
         box-shadow: var(--shadow-sm);

     

       342
       +
       }

     

       343
       +
       ```

     

       344
       +
       

     

       345
       +
       ### Responsive Typography

     

       346
       +
       ```html

     

       347
       +
       <h1 class="text-2xl @sm:text-3xl @lg:text-4xl @xl:text-5xl">

     

       348
       +
         Container-responsive heading

     

       349
       +
       </h1>

     

       350
       +
       ```

     

       351
       +
       

     

       352
       +
       ### Animation with @starting-style

     

       353
       +
       ```html

     

       354
       +
       <div class="translate-y-0 @starting-style:translate-y-full transition-transform duration-500">

     

       355
       +
         Slides up on mount

     

       356
       +
       </div>

     

       357
       +
       ```

     

       358
       +
       

     

       359
       +
       ## Debugging Tips

     

       360
       +
       

     

       361
       +
       1. **Use browser dev tools** to inspect CSS variables

     

       362
       +
       2. **Check cascade layers** in dev tools

     

       363
       +
       3. **Verify modern browser support** for OKLCH colors

     

       364
       +
       4. **Use @reference** for CSS modules/component styles

     

       365
       +
       5. **Restart dev server** after major theme changes

     

       366
       +
       

     

       367
       +
       ## Migration from v3

     

       368
       +
       

     

       369
       +
       1. Replace `@tailwind` directives with `@import "tailwindcss"`

     

       370
       +
       2. Move config from JS to CSS using `@theme`

     

       371
       +
       3. Update deprecated utility classes

     

       372
       +
       4. Replace `@layer utilities` with `@utility`

     

       373
       +
       5. Test in modern browsers only

     

       374
       +
       6. Use the official upgrade tool: `npx @tailwindcss/upgrade@next`

     

       375
       +
       

     

       376
       +
       ## Complete Utility Class Reference

     

       377
       +
       

     

       378
       +
       ### Layout

     

       379
       +
       

     

       380
       +
       #### Display

     

       381
       +
       ```

     

       382
       +
       block, inline-block, inline, flex, inline-flex, table, inline-table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, table-row, flow-root, grid, inline-grid, contents, list-item, hidden

     

       383
       +
       ```

     

       384
       +
       

     

       385
       +
       #### Position

     

       386
       +
       ```

     

       387
       +
       static, fixed, absolute, relative, sticky

     

       388
       +
       ```

     

       389
       +
       

     

       390
       +
       #### Top/Right/Bottom/Left

     

       391
       +
       ```

     

       392
       +
       inset-0, inset-x-0, inset-y-0, start-0, end-0, top-0, right-0, bottom-0, left-0

     

       393
       +
       inset-px, inset-x-px, inset-y-px, start-px, end-px, top-px, right-px, bottom-px, left-px

     

       394
       +
       inset-0.5, inset-1, inset-1.5, inset-2, inset-2.5, inset-3, inset-3.5, inset-4, inset-5, inset-6, inset-7, inset-8, inset-9, inset-10, inset-11, inset-12, inset-14, inset-16, inset-20, inset-24, inset-28, inset-32, inset-36, inset-40, inset-44, inset-48, inset-52, inset-56, inset-60, inset-64, inset-72, inset-80, inset-96

     

       395
       +
       inset-auto, inset-1/2, inset-1/3, inset-2/3, inset-1/4, inset-2/4, inset-3/4, inset-full

     

       396
       +
       ```

     

       397
       +
       

     

       398
       +
       #### Visibility & Z-Index

     

       399
       +
       ```

     

       400
       +
       visible, invisible, collapse

     

       401
       +
       z-0, z-10, z-20, z-30, z-40, z-50, z-auto

     

       402
       +
       ```

     

       403
       +
       

     

       404
       +
       #### Overflow

     

       405
       +
       ```

     

       406
       +
       overflow-auto, overflow-hidden, overflow-clip, overflow-visible, overflow-scroll

     

       407
       +
       overflow-x-auto, overflow-x-hidden, overflow-x-clip, overflow-x-visible, overflow-x-scroll

     

       408
       +
       overflow-y-auto, overflow-y-hidden, overflow-y-clip, overflow-y-visible, overflow-y-scroll

     

       409
       +
       ```

     

       410
       +
       

     

       411
       +
       ### Flexbox & Grid

     

       412
       +
       

     

       413
       +
       #### Flex Direction

     

       414
       +
       ```

     

       415
       +
       flex-row, flex-row-reverse, flex-col, flex-col-reverse

     

       416
       +
       ```

     

       417
       +
       

     

       418
       +
       #### Flex Wrap

     

       419
       +
       ```

     

       420
       +
       flex-wrap, flex-wrap-reverse, flex-nowrap

     

       421
       +
       ```

     

       422
       +
       

     

       423
       +
       #### Flex

     

       424
       +
       ```

     

       425
       +
       flex-1, flex-auto, flex-initial, flex-none

     

       426
       +
       ```

     

       427
       +
       

     

       428
       +
       #### Grow & Shrink

     

       429
       +
       ```

     

       430
       +
       grow, grow-0, shrink, shrink-0

     

       431
       +
       ```

     

       432
       +
       

     

       433
       +
       #### Order

     

       434
       +
       ```

     

       435
       +
       order-1, order-2, order-3, order-4, order-5, order-6, order-7, order-8, order-9, order-10, order-11, order-12, order-first, order-last, order-none

     

       436
       +
       ```

     

       437
       +
       

     

       438
       +
       #### Grid Template Columns

     

       439
       +
       ```

     

       440
       +
       grid-cols-1, grid-cols-2, grid-cols-3, grid-cols-4, grid-cols-5, grid-cols-6, grid-cols-7, grid-cols-8, grid-cols-9, grid-cols-10, grid-cols-11, grid-cols-12, grid-cols-none, grid-cols-subgrid

     

       441
       +
       ```

     

       442
       +
       

     

       443
       +
       #### Grid Column Start/End

     

       444
       +
       ```

     

       445
       +
       col-auto, col-span-1, col-span-2, col-span-3, col-span-4, col-span-5, col-span-6, col-span-7, col-span-8, col-span-9, col-span-10, col-span-11, col-span-12, col-span-full

     

       446
       +
       col-start-1, col-start-2, col-start-3, col-start-4, col-start-5, col-start-6, col-start-7, col-start-8, col-start-9, col-start-10, col-start-11, col-start-12, col-start-13, col-start-auto

     

       447
       +
       col-end-1, col-end-2, col-end-3, col-end-4, col-end-5, col-end-6, col-end-7, col-end-8, col-end-9, col-end-10, col-end-11, col-end-12, col-end-13, col-end-auto

     

       448
       +
       ```

     

       449
       +
       

     

       450
       +
       #### Grid Template Rows

     

       451
       +
       ```

     

       452
       +
       grid-rows-1, grid-rows-2, grid-rows-3, grid-rows-4, grid-rows-5, grid-rows-6, grid-rows-7, grid-rows-8, grid-rows-9, grid-rows-10, grid-rows-11, grid-rows-12, grid-rows-none, grid-rows-subgrid

     

       453
       +
       ```

     

       454
       +
       

     

       455
       +
       #### Grid Row Start/End

     

       456
       +
       ```

     

       457
       +
       row-auto, row-span-1, row-span-2, row-span-3, row-span-4, row-span-5, row-span-6, row-span-7, row-span-8, row-span-9, row-span-10, row-span-11, row-span-12, row-span-full

     

       458
       +
       row-start-1, row-start-2, row-start-3, row-start-4, row-start-5, row-start-6, row-start-7, row-start-8, row-start-9, row-start-10, row-start-11, row-start-12, row-start-13, row-start-auto

     

       459
       +
       row-end-1, row-end-2, row-end-3, row-end-4, row-end-5, row-end-6, row-end-7, row-end-8, row-end-9, row-end-10, row-end-11, row-end-12, row-end-13, row-end-auto

     

       460
       +
       ```

     

       461
       +
       

     

       462
       +
       #### Gap

     

       463
       +
       ```

     

       464
       +
       gap-0, gap-x-0, gap-y-0, gap-px, gap-x-px, gap-y-px

     

       465
       +
       gap-0.5, gap-1, gap-1.5, gap-2, gap-2.5, gap-3, gap-3.5, gap-4, gap-5, gap-6, gap-7, gap-8, gap-9, gap-10, gap-11, gap-12, gap-14, gap-16, gap-20, gap-24, gap-28, gap-32, gap-36, gap-40, gap-44, gap-48, gap-52, gap-56, gap-60, gap-64, gap-72, gap-80, gap-96

     

       466
       +
       ```

     

       467
       +
       

     

       468
       +
       #### Justify & Align

     

       469
       +
       ```

     

       470
       +
       justify-normal, justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly, justify-stretch

     

       471
       +
       justify-items-start, justify-items-end, justify-items-center, justify-items-stretch

     

       472
       +
       justify-self-auto, justify-self-start, justify-self-end, justify-self-center, justify-self-stretch

     

       473
       +
       align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch

     

       474
       +
       align-content-normal, align-content-center, align-content-start, align-content-end, align-content-between, align-content-around, align-content-evenly, align-content-baseline, align-content-stretch

     

       475
       +
       align-self-auto, align-self-start, align-self-end, align-self-center, align-self-stretch, align-self-baseline

     

       476
       +
       place-content-center, place-content-start, place-content-end, place-content-between, place-content-around, place-content-evenly, place-content-baseline, place-content-stretch

     

       477
       +
       place-items-start, place-items-end, place-items-center, place-items-baseline, place-items-stretch

     

       478
       +
       place-self-auto, place-self-start, place-self-end, place-self-center, place-self-stretch

     

       479
       +
       ```

     

       480
       +
       

     

       481
       +
       ### Spacing

     

       482
       +
       

     

       483
       +
       #### Padding

     

       484
       +
       ```

     

       485
       +
       p-0, p-px, p-0.5, p-1, p-1.5, p-2, p-2.5, p-3, p-3.5, p-4, p-5, p-6, p-7, p-8, p-9, p-10, p-11, p-12, p-14, p-16, p-20, p-24, p-28, p-32, p-36, p-40, p-44, p-48, p-52, p-56, p-60, p-64, p-72, p-80, p-96

     

       486
       +
       px-0, py-0, pl-0, pr-0, pt-0, pb-0, ps-0, pe-0

     

       487
       +
       ```

     

       488
       +
       

     

       489
       +
       #### Margin

     

       490
       +
       ```

     

       491
       +
       m-0, m-px, m-0.5, m-1, m-1.5, m-2, m-2.5, m-3, m-3.5, m-4, m-5, m-6, m-7, m-8, m-9, m-10, m-11, m-12, m-14, m-16, m-20, m-24, m-28, m-32, m-36, m-40, m-44, m-48, m-52, m-56, m-60, m-64, m-72, m-80, m-96, m-auto

     

       492
       +
       mx-0, my-0, ml-0, mr-0, mt-0, mb-0, ms-0, me-0

     

       493
       +
       -m-0, -m-px, -m-0.5, -m-1, -m-1.5, -m-2, -m-2.5, -m-3, -m-3.5, -m-4, -m-5, -m-6, -m-7, -m-8, -m-9, -m-10, -m-11, -m-12, -m-14, -m-16, -m-20, -m-24, -m-28, -m-32, -m-36, -m-40, -m-44, -m-48, -m-52, -m-56, -m-60, -m-64, -m-72, -m-80, -m-96

     

       494
       +
       ```

     

       495
       +
       

     

       496
       +
       #### Space Between

     

       497
       +
       ```

     

       498
       +
       space-x-0, space-x-px, space-x-0.5, space-x-1, space-x-1.5, space-x-2, space-x-2.5, space-x-3, space-x-3.5, space-x-4, space-x-5, space-x-6, space-x-7, space-x-8, space-x-9, space-x-10, space-x-11, space-x-12, space-x-14, space-x-16, space-x-20, space-x-24, space-x-28, space-x-32, space-x-36, space-x-40, space-x-44, space-x-48, space-x-52, space-x-56, space-x-60, space-x-64, space-x-72, space-x-80, space-x-96, space-x-reverse

     

       499
       +
       space-y-0, space-y-px, space-y-0.5, space-y-1, space-y-1.5, space-y-2, space-y-2.5, space-y-3, space-y-3.5, space-y-4, space-y-5, space-y-6, space-y-7, space-y-8, space-y-9, space-y-10, space-y-11, space-y-12, space-y-14, space-y-16, space-y-20, space-y-24, space-y-28, space-y-32, space-y-36, space-y-40, space-y-44, space-y-48, space-y-52, space-y-56, space-y-60, space-y-64, space-y-72, space-y-80, space-y-96, space-y-reverse

     

       500
       +
       ```

     

       501
       +
       

     

       502
       +
       ### Sizing

     

       503
       +
       

     

       504
       +
       #### Width

     

       505
       +
       ```

     

       506
       +
       w-0, w-px, w-0.5, w-1, w-1.5, w-2, w-2.5, w-3, w-3.5, w-4, w-5, w-6, w-7, w-8, w-9, w-10, w-11, w-12, w-14, w-16, w-20, w-24, w-28, w-32, w-36, w-40, w-44, w-48, w-52, w-56, w-60, w-64, w-72, w-80, w-96, w-auto, w-1/2, w-1/3, w-2/3, w-1/4, w-2/4, w-3/4, w-1/5, w-2/5, w-3/5, w-4/5, w-1/6, w-2/6, w-3/6, w-4/6, w-5/6, w-1/12, w-2/12, w-3/12, w-4/12, w-5/12, w-6/12, w-7/12, w-8/12, w-9/12, w-10/12, w-11/12, w-full, w-screen, w-svw, w-lvw, w-dvw, w-min, w-max, w-fit

     

       507
       +
       ```

     

       508
       +
       

     

       509
       +
       #### Height

     

       510
       +
       ```

     

       511
       +
       h-0, h-px, h-0.5, h-1, h-1.5, h-2, h-2.5, h-3, h-3.5, h-4, h-5, h-6, h-7, h-8, h-9, h-10, h-11, h-12, h-14, h-16, h-20, h-24, h-28, h-32, h-36, h-40, h-44, h-48, h-52, h-56, h-60, h-64, h-72, h-80, h-96, h-auto, h-1/2, h-1/3, h-2/3, h-1/4, h-2/4, h-3/4, h-1/5, h-2/5, h-3/5, h-4/5, h-1/6, h-2/6, h-3/6, h-4/6, h-5/6, h-full, h-screen, h-svh, h-lvh, h-dvh, h-min, h-max, h-fit

     

       512
       +
       ```

     

       513
       +
       

     

       514
       +
       #### Size (Width + Height)

     

       515
       +
       ```

     

       516
       +
       size-0, size-px, size-0.5, size-1, size-1.5, size-2, size-2.5, size-3, size-3.5, size-4, size-5, size-6, size-7, size-8, size-9, size-10, size-11, size-12, size-14, size-16, size-20, size-24, size-28, size-32, size-36, size-40, size-44, size-48, size-52, size-56, size-60, size-64, size-72, size-80, size-96, size-auto, size-1/2, size-1/3, size-2/3, size-1/4, size-2/4, size-3/4, size-1/5, size-2/5, size-3/5, size-4/5, size-1/6, size-2/6, size-3/6, size-4/6, size-5/6, size-1/12, size-2/12, size-3/12, size-4/12, size-5/12, size-6/12, size-7/12, size-8/12, size-9/12, size-10/12, size-11/12, size-full, size-min, size-max, size-fit

     

       517
       +
       ```

     

       518
       +
       

     

       519
       +
       #### Min/Max Width

     

       520
       +
       ```

     

       521
       +
       min-w-0, min-w-full, min-w-min, min-w-max, min-w-fit

     

       522
       +
       max-w-0, max-w-xs, max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl, max-w-3xl, max-w-4xl, max-w-5xl, max-w-6xl, max-w-7xl, max-w-full, max-w-min, max-w-max, max-w-fit, max-w-prose, max-w-screen-sm, max-w-screen-md, max-w-screen-lg, max-w-screen-xl, max-w-screen-2xl

     

       523
       +
       ```

     

       524
       +
       

     

       525
       +
       #### Min/Max Height

     

       526
       +
       ```

     

       527
       +
       min-h-0, min-h-full, min-h-screen, min-h-svh, min-h-lvh, min-h-dvh, min-h-min, min-h-max, min-h-fit

     

       528
       +
       max-h-0, max-h-px, max-h-0.5, max-h-1, max-h-1.5, max-h-2, max-h-2.5, max-h-3, max-h-3.5, max-h-4, max-h-5, max-h-6, max-h-7, max-h-8, max-h-9, max-h-10, max-h-11, max-h-12, max-h-14, max-h-16, max-h-20, max-h-24, max-h-28, max-h-32, max-h-36, max-h-40, max-h-44, max-h-48, max-h-52, max-h-56, max-h-60, max-h-64, max-h-72, max-h-80, max-h-96, max-h-full, max-h-screen, max-h-svh, max-h-lvh, max-h-dvh, max-h-min, max-h-max, max-h-fit

     

       529
       +
       ```

     

       530
       +
       

     

       531
       +
       ### Typography

     

       532
       +
       

     

       533
       +
       #### Font Family

     

       534
       +
       ```

     

       535
       +
       font-sans, font-serif, font-mono

     

       536
       +
       ```

     

       537
       +
       

     

       538
       +
       #### Font Size

     

       539
       +
       ```

     

       540
       +
       text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, text-7xl, text-8xl, text-9xl

     

       541
       +
       ```

     

       542
       +
       

     

       543
       +
       #### Font Weight

     

       544
       +
       ```

     

       545
       +
       font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black

     

       546
       +
       ```

     

       547
       +
       

     

       548
       +
       #### Font Style

     

       549
       +
       ```

     

       550
       +
       italic, not-italic

     

       551
       +
       ```

     

       552
       +
       

     

       553
       +
       #### Font Variant Numeric

     

       554
       +
       ```

     

       555
       +
       normal-nums, ordinal, slashed-zero, lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions

     

       556
       +
       ```

     

       557
       +
       

     

       558
       +
       #### Font Stretch (NEW in v4)

     

       559
       +
       ```

     

       560
       +
       font-stretch-ultra-condensed, font-stretch-extra-condensed, font-stretch-condensed, font-stretch-semi-condensed, font-stretch-normal, font-stretch-semi-expanded, font-stretch-expanded, font-stretch-extra-expanded, font-stretch-ultra-expanded

     

       561
       +
       ```

     

       562
       +
       

     

       563
       +
       #### Letter Spacing

     

       564
       +
       ```

     

       565
       +
       tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest

     

       566
       +
       ```

     

       567
       +
       

     

       568
       +
       #### Line Clamp

     

       569
       +
       ```

     

       570
       +
       line-clamp-1, line-clamp-2, line-clamp-3, line-clamp-4, line-clamp-5, line-clamp-6, line-clamp-none

     

       571
       +
       ```

     

       572
       +
       

     

       573
       +
       #### Line Height

     

       574
       +
       ```

     

       575
       +
       leading-3, leading-4, leading-5, leading-6, leading-7, leading-8, leading-9, leading-10, leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose

     

       576
       +
       ```

     

       577
       +
       

     

       578
       +
       #### List Style

     

       579
       +
       ```

     

       580
       +
       list-none, list-disc, list-decimal, list-inside, list-outside

     

       581
       +
       ```

     

       582
       +
       

     

       583
       +
       #### Text Align

     

       584
       +
       ```

     

       585
       +
       text-left, text-center, text-right, text-justify, text-start, text-end

     

       586
       +
       ```

     

       587
       +
       

     

       588
       +
       #### Text Color

     

       589
       +
       ```

     

       590
       +
       text-inherit, text-current, text-transparent, text-black, text-white

     

       591
       +
       text-slate-50, text-slate-100, text-slate-200, text-slate-300, text-slate-400, text-slate-500, text-slate-600, text-slate-700, text-slate-800, text-slate-900, text-slate-950

     

       592
       +
       text-gray-50, text-gray-100, text-gray-200, text-gray-300, text-gray-400, text-gray-500, text-gray-600, text-gray-700, text-gray-800, text-gray-900, text-gray-950

     

       593
       +
       text-zinc-50, text-zinc-100, text-zinc-200, text-zinc-300, text-zinc-400, text-zinc-500, text-zinc-600, text-zinc-700, text-zinc-800, text-zinc-900, text-zinc-950

     

       594
       +
       text-neutral-50, text-neutral-100, text-neutral-200, text-neutral-300, text-neutral-400, text-neutral-500, text-neutral-600, text-neutral-700, text-neutral-800, text-neutral-900, text-neutral-950

     

       595
       +
       text-stone-50, text-stone-100, text-stone-200, text-stone-300, text-stone-400, text-stone-500, text-stone-600, text-stone-700, text-stone-800, text-stone-900, text-stone-950

     

       596
       +
       text-red-50, text-red-100, text-red-200, text-red-300, text-red-400, text-red-500, text-red-600, text-red-700, text-red-800, text-red-900, text-red-950

     

       597
       +
       text-orange-50, text-orange-100, text-orange-200, text-orange-300, text-orange-400, text-orange-500, text-orange-600, text-orange-700, text-orange-800, text-orange-900, text-orange-950

     

       598
       +
       text-amber-50, text-amber-100, text-amber-200, text-amber-300, text-amber-400, text-amber-500, text-amber-600, text-amber-700, text-amber-800, text-amber-900, text-amber-950

     

       599
       +
       text-yellow-50, text-yellow-100, text-yellow-200, text-yellow-300, text-yellow-400, text-yellow-500, text-yellow-600, text-yellow-700, text-yellow-800, text-yellow-900, text-yellow-950

     

       600
       +
       text-lime-50, text-lime-100, text-lime-200, text-lime-300, text-lime-400, text-lime-500, text-lime-600, text-lime-700, text-lime-800, text-lime-900, text-lime-950

     

       601
       +
       text-green-50, text-green-100, text-green-200, text-green-300, text-green-400, text-green-500, text-green-600, text-green-700, text-green-800, text-green-900, text-green-950

     

       602
       +
       text-emerald-50, text-emerald-100, text-emerald-200, text-emerald-300, text-emerald-400, text-emerald-500, text-emerald-600, text-emerald-700, text-emerald-800, text-emerald-900, text-emerald-950

     

       603
       +
       text-teal-50, text-teal-100, text-teal-200, text-teal-300, text-teal-400, text-teal-500, text-teal-600, text-teal-700, text-teal-800, text-teal-900, text-teal-950

     

       604
       +
       text-cyan-50, text-cyan-100, text-cyan-200, text-cyan-300, text-cyan-400, text-cyan-500, text-cyan-600, text-cyan-700, text-cyan-800, text-cyan-900, text-cyan-950

     

       605
       +
       text-sky-50, text-sky-100, text-sky-200, text-sky-300, text-sky-400, text-sky-500, text-sky-600, text-sky-700, text-sky-800, text-sky-900, text-sky-950

     

       606
       +
       text-blue-50, text-blue-100, text-blue-200, text-blue-300, text-blue-400, text-blue-500, text-blue-600, text-blue-700, text-blue-800, text-blue-900, text-blue-950

     

       607
       +
       text-indigo-50, text-indigo-100, text-indigo-200, text-indigo-300, text-indigo-400, text-indigo-500, text-indigo-600, text-indigo-700, text-indigo-800, text-indigo-900, text-indigo-950

     

       608
       +
       text-violet-50, text-violet-100, text-violet-200, text-violet-300, text-violet-400, text-violet-500, text-violet-600, text-violet-700, text-violet-800, text-violet-900, text-violet-950

     

       609
       +
       text-purple-50, text-purple-100, text-purple-200, text-purple-300, text-purple-400, text-purple-500, text-purple-600, text-purple-700, text-purple-800, text-purple-900, text-purple-950

     

       610
       +
       text-fuchsia-50, text-fuchsia-100, text-fuchsia-200, text-fuchsia-300, text-fuchsia-400, text-fuchsia-500, text-fuchsia-600, text-fuchsia-700, text-fuchsia-800, text-fuchsia-900, text-fuchsia-950

     

       611
       +
       text-pink-50, text-pink-100, text-pink-200, text-pink-300, text-pink-400, text-pink-500, text-pink-600, text-pink-700, text-pink-800, text-pink-900, text-pink-950

     

       612
       +
       text-rose-50, text-rose-100, text-rose-200, text-rose-300, text-rose-400, text-rose-500, text-rose-600, text-rose-700, text-rose-800, text-rose-900, text-rose-950

     

       613
       +
       ```

     

       614
       +
       

     

       615
       +
       #### Text Decoration

     

       616
       +
       ```

     

       617
       +
       underline, overline, line-through, no-underline

     

       618
       +
       decoration-solid, decoration-double, decoration-dotted, decoration-dashed, decoration-wavy

     

       619
       +
       decoration-auto, decoration-from-font, decoration-0, decoration-1, decoration-2, decoration-4, decoration-8

     

       620
       +
       underline-offset-auto, underline-offset-0, underline-offset-1, underline-offset-2, underline-offset-4, underline-offset-8

     

       621
       +
       ```

     

       622
       +
       

     

       623
       +
       #### Text Transform

     

       624
       +
       ```

     

       625
       +
       uppercase, lowercase, capitalize, normal-case

     

       626
       +
       ```

     

       627
       +
       

     

       628
       +
       #### Text Overflow

     

       629
       +
       ```

     

       630
       +
       truncate, text-ellipsis, text-clip

     

       631
       +
       ```

     

       632
       +
       

     

       633
       +
       #### Text Shadow (NEW in v4)

     

       634
       +
       ```

     

       635
       +
       text-shadow-sm, text-shadow, text-shadow-lg, text-shadow-xl, text-shadow-none

     

       636
       +
       ```

     

       637
       +
       

     

       638
       +
       #### Overflow Wrap (NEW in v4)

     

       639
       +
       ```

     

       640
       +
       overflow-wrap-normal, overflow-wrap-break-word, overflow-wrap-anywhere

     

       641
       +
       ```

     

       642
       +
       

     

       643
       +
       #### Vertical Align

     

       644
       +
       ```

     

       645
       +
       align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom, align-sub, align-super

     

       646
       +
       ```

     

       647
       +
       

     

       648
       +
       #### Whitespace

     

       649
       +
       ```

     

       650
       +
       whitespace-normal, whitespace-nowrap, whitespace-pre, whitespace-pre-line, whitespace-pre-wrap, whitespace-break-spaces

     

       651
       +
       ```

     

       652
       +
       

     

       653
       +
       #### Word Break

     

       654
       +
       ```

     

       655
       +
       break-normal, break-words, break-all, break-keep

     

       656
       +
       ```

     

       657
       +
       

     

       658
       +
       #### Hyphens

     

       659
       +
       ```

     

       660
       +
       hyphens-none, hyphens-manual, hyphens-auto

     

       661
       +
       ```

     

       662
       +
       

     

       663
       +
       #### Content

     

       664
       +
       ```

     

       665
       +
       content-none

     

       666
       +
       ```

     

       667
       +
       

     

       668
       +
       ### Backgrounds

     

       669
       +
       

     

       670
       +
       #### Background Attachment

     

       671
       +
       ```

     

       672
       +
       bg-fixed, bg-local, bg-scroll

     

       673
       +
       ```

     

       674
       +
       

     

       675
       +
       #### Background Clip

     

       676
       +
       ```

     

       677
       +
       bg-clip-border, bg-clip-padding, bg-clip-content, bg-clip-text

     

       678
       +
       ```

     

       679
       +
       

     

       680
       +
       #### Background Color

     

       681
       +
       All color utilities work with `bg-` prefix (same as text colors above)

     

       682
       +
       

     

       683
       +
       #### Background Origin

     

       684
       +
       ```

     

       685
       +
       bg-origin-border, bg-origin-padding, bg-origin-content

     

       686
       +
       ```

     

       687
       +
       

     

       688
       +
       #### Background Position

     

       689
       +
       ```

     

       690
       +
       bg-bottom, bg-center, bg-left, bg-left-bottom, bg-left-top, bg-right, bg-right-bottom, bg-right-top, bg-top

     

       691
       +
       ```

     

       692
       +
       

     

       693
       +
       #### Background Repeat

     

       694
       +
       ```

     

       695
       +
       bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round, bg-repeat-space

     

       696
       +
       ```

     

       697
       +
       

     

       698
       +
       #### Background Size

     

       699
       +
       ```

     

       700
       +
       bg-auto, bg-cover, bg-contain

     

       701
       +
       ```

     

       702
       +
       

     

       703
       +
       #### Background Image

     

       704
       +
       ```

     

       705
       +
       bg-none

     

       706
       +
       bg-linear-to-t, bg-linear-to-tr, bg-linear-to-r, bg-linear-to-br, bg-linear-to-b, bg-linear-to-bl, bg-linear-to-l, bg-linear-to-tl

     

       707
       +
       ```

     

       708
       +
       

     

       709
       +
       #### Enhanced Gradients (NEW in v4)

     

       710
       +
       ```

     

       711
       +
       bg-linear-0, bg-linear-45, bg-linear-90, bg-linear-135, bg-linear-180, bg-linear-225, bg-linear-270, bg-linear-315

     

       712
       +
       bg-radial, bg-radial-at-t, bg-radial-at-tr, bg-radial-at-r, bg-radial-at-br, bg-radial-at-b, bg-radial-at-bl, bg-radial-at-l, bg-radial-at-tl, bg-radial-at-c

     

       713
       +
       bg-conic, bg-conic-at-t, bg-conic-at-tr, bg-conic-at-r, bg-conic-at-br, bg-conic-at-b, bg-conic-at-bl, bg-conic-at-l, bg-conic-at-tl, bg-conic-at-c

     

       714
       +
       ```

     

       715
       +
       

     

       716
       +
       #### Gradient Color Stops

     

       717
       +
       ```

     

       718
       +
       from-inherit, from-current, from-transparent, from-black, from-white, from-{color}

     

       719
       +
       via-inherit, via-current, via-transparent, via-black, via-white, via-{color}

     

       720
       +
       to-inherit, to-current, to-transparent, to-black, to-white, to-{color}

     

       721
       +
       ```

     

       722
       +
       

     

       723
       +
       ### Borders

     

       724
       +
       

     

       725
       +
       #### Border Radius

     

       726
       +
       ```

     

       727
       +
       rounded-none, rounded-xs, rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-full

     

       728
       +
       rounded-s-none, rounded-s-xs, rounded-s-sm, rounded-s, rounded-s-md, rounded-s-lg, rounded-s-xl, rounded-s-2xl, rounded-s-3xl

     

       729
       +
       rounded-e-none, rounded-e-xs, rounded-e-sm, rounded-e, rounded-e-md, rounded-e-lg, rounded-e-xl, rounded-e-2xl, rounded-e-3xl

     

       730
       +
       rounded-t-none, rounded-t-xs, rounded-t-sm, rounded-t, rounded-t-md, rounded-t-lg, rounded-t-xl, rounded-t-2xl, rounded-t-3xl

     

       731
       +
       rounded-r-none, rounded-r-xs, rounded-r-sm, rounded-r, rounded-r-md, rounded-r-lg, rounded-r-xl, rounded-r-2xl, rounded-r-3xl

     

       732
       +
       rounded-b-none, rounded-b-xs, rounded-b-sm, rounded-b, rounded-b-md, rounded-b-lg, rounded-b-xl, rounded-b-2xl, rounded-b-3xl

     

       733
       +
       rounded-l-none, rounded-l-xs, rounded-l-sm, rounded-l, rounded-l-md, rounded-l-lg, rounded-l-xl, rounded-l-2xl, rounded-l-3xl

     

       734
       +
       rounded-ss-none, rounded-ss-xs, rounded-ss-sm, rounded-ss, rounded-ss-md, rounded-ss-lg, rounded-ss-xl, rounded-ss-2xl, rounded-ss-3xl

     

       735
       +
       rounded-se-none, rounded-se-xs, rounded-se-sm, rounded-se, rounded-se-md, rounded-se-lg, rounded-se-xl, rounded-se-2xl, rounded-se-3xl

     

       736
       +
       rounded-ee-none, rounded-ee-xs, rounded-ee-sm, rounded-ee, rounded-ee-md, rounded-ee-lg, rounded-ee-xl, rounded-ee-2xl, rounded-ee-3xl

     

       737
       +
       rounded-es-none, rounded-es-xs, rounded-es-sm, rounded-es, rounded-es-md, rounded-es-lg, rounded-es-xl, rounded-es-2xl, rounded-es-3xl

     

       738
       +
       rounded-tl-none, rounded-tl-xs, rounded-tl-sm, rounded-tl, rounded-tl-md, rounded-tl-lg, rounded-tl-xl, rounded-tl-2xl, rounded-tl-3xl

     

       739
       +
       rounded-tr-none, rounded-tr-xs, rounded-tr-sm, rounded-tr, rounded-tr-md, rounded-tr-lg, rounded-tr-xl, rounded-tr-2xl, rounded-tr-3xl

     

       740
       +
       rounded-br-none, rounded-br-xs, rounded-br-sm, rounded-br, rounded-br-md, rounded-br-lg, rounded-br-xl, rounded-br-2xl, rounded-br-3xl

     

       741
       +
       rounded-bl-none, rounded-bl-xs, rounded-bl-sm, rounded-bl, rounded-bl-md, rounded-bl-lg, rounded-bl-xl, rounded-bl-2xl, rounded-bl-3xl

     

       742
       +
       ```

     

       743
       +
       

     

       744
       +
       #### Border Width

     

       745
       +
       ```

     

       746
       +
       border-0, border-2, border-4, border-8, border, border-x, border-y, border-s, border-e, border-t, border-r, border-b, border-l

     

       747
       +
       ```

     

       748
       +
       

     

       749
       +
       #### Border Color

     

       750
       +
       All color utilities work with `border-` prefix (same as text/bg colors)

     

       751
       +
       

     

       752
       +
       #### Border Style

     

       753
       +
       ```

     

       754
       +
       border-solid, border-dashed, border-dotted, border-double, border-hidden, border-none

     

       755
       +
       ```

     

       756
       +
       

     

       757
       +
       #### Divide Width

     

       758
       +
       ```

     

       759
       +
       divide-x-0, divide-x-2, divide-x-4, divide-x-8, divide-x, divide-y-0, divide-y-2, divide-y-4, divide-y-8, divide-y, divide-x-reverse, divide-y-reverse

     

       760
       +
       ```

     

       761
       +
       

     

       762
       +
       #### Divide Color

     

       763
       +
       All color utilities work with `divide-` prefix

     

       764
       +
       

     

       765
       +
       #### Divide Style

     

       766
       +
       ```

     

       767
       +
       divide-solid, divide-dashed, divide-dotted, divide-double, divide-none

     

       768
       +
       ```

     

       769
       +
       

     

       770
       +
       #### Outline Width

     

       771
       +
       ```

     

       772
       +
       outline-0, outline-1, outline-2, outline-4, outline-8

     

       773
       +
       ```

     

       774
       +
       

     

       775
       +
       #### Outline Color

     

       776
       +
       All color utilities work with `outline-` prefix

     

       777
       +
       

     

       778
       +
       #### Outline Style

     

       779
       +
       ```

     

       780
       +
       outline-none, outline, outline-dashed, outline-dotted, outline-double

     

       781
       +
       ```

     

       782
       +
       

     

       783
       +
       #### Outline Offset

     

       784
       +
       ```

     

       785
       +
       outline-offset-0, outline-offset-1, outline-offset-2, outline-offset-4, outline-offset-8

     

       786
       +
       ```

     

       787
       +
       

     

       788
       +
       #### Ring Width

     

       789
       +
       ```

     

       790
       +
       ring-0, ring-1, ring-2, ring, ring-4, ring-8, ring-inset

     

       791
       +
       ```

     

       792
       +
       

     

       793
       +
       #### Ring Color

     

       794
       +
       All color utilities work with `ring-` prefix

     

       795
       +
       

     

       796
       +
       #### Ring Offset Width

     

       797
       +
       ```

     

       798
       +
       ring-offset-0, ring-offset-1, ring-offset-2, ring-offset-4, ring-offset-8

     

       799
       +
       ```

     

       800
       +
       

     

       801
       +
       #### Ring Offset Color

     

       802
       +
       All color utilities work with `ring-offset-` prefix

     

       803
       +
       

     

       804
       +
       ### Effects

     

       805
       +
       

     

       806
       +
       #### Box Shadow

     

       807
       +
       ```

     

       808
       +
       shadow-xs, shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-none

     

       809
       +
       ```

     

       810
       +
       

     

       811
       +
       #### Box Shadow Color

     

       812
       +
       All color utilities work with `shadow-` prefix

     

       813
       +
       

     

       814
       +
       #### Drop Shadow (NEW colored support in v4)

     

       815
       +
       ```

     

       816
       +
       drop-shadow-sm, drop-shadow, drop-shadow-md, drop-shadow-lg, drop-shadow-xl, drop-shadow-2xl, drop-shadow-none

     

       817
       +
       ```

     

       818
       +
       

     

       819
       +
       #### Opacity

     

       820
       +
       ```

     

       821
       +
       opacity-0, opacity-5, opacity-10, opacity-15, opacity-20, opacity-25, opacity-30, opacity-35, opacity-40, opacity-45, opacity-50, opacity-55, opacity-60, opacity-65, opacity-70, opacity-75, opacity-80, opacity-85, opacity-90, opacity-95, opacity-100

     

       822
       +
       ```

     

       823
       +
       

     

       824
       +
       #### Mix Blend Mode

     

       825
       +
       ```

     

       826
       +
       mix-blend-normal, mix-blend-multiply, mix-blend-screen, mix-blend-overlay, mix-blend-darken, mix-blend-lighten, mix-blend-color-dodge, mix-blend-color-burn, mix-blend-hard-light, mix-blend-soft-light, mix-blend-difference, mix-blend-exclusion, mix-blend-hue, mix-blend-saturation, mix-blend-color, mix-blend-luminosity, mix-blend-plus-darker, mix-blend-plus-lighter

     

       827
       +
       ```

     

       828
       +
       

     

       829
       +
       #### Background Blend Mode

     

       830
       +
       ```

     

       831
       +
       bg-blend-normal, bg-blend-multiply, bg-blend-screen, bg-blend-overlay, bg-blend-darken, bg-blend-lighten, bg-blend-color-dodge, bg-blend-color-burn, bg-blend-hard-light, bg-blend-soft-light, bg-blend-difference, bg-blend-exclusion, bg-blend-hue, bg-blend-saturation, bg-blend-color, bg-blend-luminosity

     

       832
       +
       ```

     

       833
       +
       

     

       834
       +
       ### Filters

     

       835
       +
       

     

       836
       +
       #### Blur

     

       837
       +
       ```

     

       838
       +
       blur-none, blur-xs, blur-sm, blur, blur-md, blur-lg, blur-xl, blur-2xl, blur-3xl

     

       839
       +
       ```

     

       840
       +
       

     

       841
       +
       #### Brightness

     

       842
       +
       ```

     

       843
       +
       brightness-0, brightness-50, brightness-75, brightness-90, brightness-95, brightness-100, brightness-105, brightness-110, brightness-125, brightness-150, brightness-200

     

       844
       +
       ```

     

       845
       +
       

     

       846
       +
       #### Contrast

     

       847
       +
       ```

     

       848
       +
       contrast-0, contrast-50, contrast-75, contrast-100, contrast-125, contrast-150, contrast-200

     

       849
       +
       ```

     

       850
       +
       

     

       851
       +
       #### Grayscale

     

       852
       +
       ```

     

       853
       +
       grayscale-0, grayscale

     

       854
       +
       ```

     

       855
       +
       

     

       856
       +
       #### Hue Rotate

     

       857
       +
       ```

     

       858
       +
       hue-rotate-0, hue-rotate-15, hue-rotate-30, hue-rotate-60, hue-rotate-90, hue-rotate-180, -hue-rotate-180, -hue-rotate-90, -hue-rotate-60, -hue-rotate-30, -hue-rotate-15

     

       859
       +
       ```

     

       860
       +
       

     

       861
       +
       #### Invert

     

       862
       +
       ```

     

       863
       +
       invert-0, invert

     

       864
       +
       ```

     

       865
       +
       

     

       866
       +
       #### Saturate

     

       867
       +
       ```

     

       868
       +
       saturate-0, saturate-50, saturate-100, saturate-150, saturate-200

     

       869
       +
       ```

     

       870
       +
       

     

       871
       +
       #### Sepia

     

       872
       +
       ```

     

       873
       +
       sepia-0, sepia

     

       874
       +
       ```

     

       875
       +
       

     

       876
       +
       #### Backdrop Blur

     

       877
       +
       ```

     

       878
       +
       backdrop-blur-none, backdrop-blur-xs, backdrop-blur-sm, backdrop-blur, backdrop-blur-md, backdrop-blur-lg, backdrop-blur-xl, backdrop-blur-2xl, backdrop-blur-3xl

     

       879
       +
       ```

     

       880
       +
       

     

       881
       +
       #### Backdrop Brightness

     

       882
       +
       ```

     

       883
       +
       backdrop-brightness-0, backdrop-brightness-50, backdrop-brightness-75, backdrop-brightness-90, backdrop-brightness-95, backdrop-brightness-100, backdrop-brightness-105, backdrop-brightness-110, backdrop-brightness-125, backdrop-brightness-150, backdrop-brightness-200

     

       884
       +
       ```

     

       885
       +
       

     

       886
       +
       #### Backdrop Contrast

     

       887
       +
       ```

     

       888
       +
       backdrop-contrast-0, backdrop-contrast-50, backdrop-contrast-75, backdrop-contrast-100, backdrop-contrast-125, backdrop-contrast-150, backdrop-contrast-200

     

       889
       +
       ```

     

       890
       +
       

     

       891
       +
       #### Backdrop Grayscale

     

       892
       +
       ```

     

       893
       +
       backdrop-grayscale-0, backdrop-grayscale

     

       894
       +
       ```

     

       895
       +
       

     

       896
       +
       #### Backdrop Hue Rotate

     

       897
       +
       ```

     

       898
       +
       backdrop-hue-rotate-0, backdrop-hue-rotate-15, backdrop-hue-rotate-30, backdrop-hue-rotate-60, backdrop-hue-rotate-90, backdrop-hue-rotate-180, -backdrop-hue-rotate-180, -backdrop-hue-rotate-90, -backdrop-hue-rotate-60, -backdrop-hue-rotate-30, -backdrop-hue-rotate-15

     

       899
       +
       ```

     

       900
       +
       

     

       901
       +
       #### Backdrop Invert

     

       902
       +
       ```

     

       903
       +
       backdrop-invert-0, backdrop-invert

     

       904
       +
       ```

     

       905
       +
       

     

       906
       +
       #### Backdrop Saturate

     

       907
       +
       ```

     

       908
       +
       backdrop-saturate-0, backdrop-saturate-50, backdrop-saturate-100, backdrop-saturate-150, backdrop-saturate-200

     

       909
       +
       ```

     

       910
       +
       

     

       911
       +
       #### Backdrop Sepia

     

       912
       +
       ```

     

       913
       +
       backdrop-sepia-0, backdrop-sepia

     

       914
       +
       ```

     

       915
       +
       

     

       916
       +
       ### Masks (NEW in v4)

     

       917
       +
       

     

       918
       +
       #### Mask Image

     

       919
       +
       ```

     

       920
       +
       mask-none

     

       921
       +
       ```

     

       922
       +
       

     

       923
       +
       #### Mask Size

     

       924
       +
       ```

     

       925
       +
       mask-auto, mask-cover, mask-contain

     

       926
       +
       ```

     

       927
       +
       

     

       928
       +
       #### Mask Repeat

     

       929
       +
       ```

     

       930
       +
       mask-repeat, mask-no-repeat, mask-repeat-x, mask-repeat-y, mask-repeat-round, mask-repeat-space

     

       931
       +
       ```

     

       932
       +
       

     

       933
       +
       #### Mask Position

     

       934
       +
       ```

     

       935
       +
       mask-bottom, mask-center, mask-left, mask-left-bottom, mask-left-top, mask-right, mask-right-bottom, mask-right-top, mask-top

     

       936
       +
       ```

     

       937
       +
       

     

       938
       +
       #### Mask Origin

     

       939
       +
       ```

     

       940
       +
       mask-origin-border, mask-origin-padding, mask-origin-content

     

       941
       +
       ```

     

       942
       +
       

     

       943
       +
       #### Mask Clip

     

       944
       +
       ```

     

       945
       +
       mask-clip-border, mask-clip-padding, mask-clip-content

     

       946
       +
       ```

     

       947
       +
       

     

       948
       +
       #### Mask Composite

     

       949
       +
       ```

     

       950
       +
       mask-composite-add, mask-composite-subtract, mask-composite-intersect, mask-composite-exclude

     

       951
       +
       ```

     

       952
       +
       

     

       953
       +
       #### Mask Mode

     

       954
       +
       ```

     

       955
       +
       mask-mode-match-source, mask-mode-luminance, mask-mode-alpha

     

       956
       +
       ```

     

       957
       +
       

     

       958
       +
       #### Mask Type

     

       959
       +
       ```

     

       960
       +
       mask-type-luminance, mask-type-alpha

     

       961
       +
       ```

     

       962
       +
       

     

       963
       +
       ### Tables

     

       964
       +
       

     

       965
       +
       #### Border Collapse

     

       966
       +
       ```

     

       967
       +
       border-collapse, border-separate

     

       968
       +
       ```

     

       969
       +
       

     

       970
       +
       #### Border Spacing

     

       971
       +
       ```

     

       972
       +
       border-spacing-0, border-spacing-px, border-spacing-0.5, border-spacing-1, border-spacing-1.5, border-spacing-2, border-spacing-2.5, border-spacing-3, border-spacing-3.5, border-spacing-4, border-spacing-5, border-spacing-6, border-spacing-7, border-spacing-8, border-spacing-9, border-spacing-10, border-spacing-11, border-spacing-12, border-spacing-14, border-spacing-16, border-spacing-20, border-spacing-24, border-spacing-28, border-spacing-32, border-spacing-36, border-spacing-40, border-spacing-44, border-spacing-48, border-spacing-52, border-spacing-56, border-spacing-60, border-spacing-64, border-spacing-72, border-spacing-80, border-spacing-96

     

       973
       +
       border-spacing-x-0, border-spacing-y-0 (and all other spacing values)

     

       974
       +
       ```

     

       975
       +
       

     

       976
       +
       #### Table Layout

     

       977
       +
       ```

     

       978
       +
       table-auto, table-fixed

     

       979
       +
       ```

     

       980
       +
       

     

       981
       +
       #### Caption Side

     

       982
       +
       ```

     

       983
       +
       caption-top, caption-bottom

     

       984
       +
       ```

     

       985
       +
       

     

       986
       +
       ### Transforms

     

       987
       +
       

     

       988
       +
       #### Scale

     

       989
       +
       ```

     

       990
       +
       scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150

     

       991
       +
       scale-x-0, scale-x-50, scale-x-75, scale-x-90, scale-x-95, scale-x-100, scale-x-105, scale-x-110, scale-x-125, scale-x-150

     

       992
       +
       scale-y-0, scale-y-50, scale-y-75, scale-y-90, scale-y-95, scale-y-100, scale-y-105, scale-y-110, scale-y-125, scale-y-150

     

       993
       +
       ```

     

       994
       +
       

     

       995
       +
       #### Scale Z (NEW in v4)

     

       996
       +
       ```

     

       997
       +
       scale-z-0, scale-z-50, scale-z-75, scale-z-90, scale-z-95, scale-z-100, scale-z-105, scale-z-110, scale-z-125, scale-z-150

     

       998
       +
       ```

     

       999
       +
       

     

       1000
       +
       #### Rotate

     

       1001
       +
       ```

     

       1002
       +
       rotate-0, rotate-1, rotate-2, rotate-3, rotate-6, rotate-12, rotate-45, rotate-90, rotate-180, -rotate-180, -rotate-90, -rotate-45, -rotate-12, -rotate-6, -rotate-3, -rotate-2, -rotate-1

     

       1003
       +
       ```

     

       1004
       +
       

     

       1005
       +
       #### Rotate X/Y (NEW in v4)

     

       1006
       +
       ```

     

       1007
       +
       rotate-x-0, rotate-x-1, rotate-x-2, rotate-x-3, rotate-x-6, rotate-x-12, rotate-x-45, rotate-x-90, rotate-x-180, -rotate-x-180, -rotate-x-90, -rotate-x-45, -rotate-x-12, -rotate-x-6, -rotate-x-3, -rotate-x-2, -rotate-x-1

     

       1008
       +
       rotate-y-0, rotate-y-1, rotate-y-2, rotate-y-3, rotate-y-6, rotate-y-12, rotate-y-45, rotate-y-90, rotate-y-180, -rotate-y-180, -rotate-y-90, -rotate-y-45, -rotate-y-12, -rotate-y-6, -rotate-y-3, -rotate-y-2, -rotate-y-1

     

       1009
       +
       ```

     

       1010
       +
       

     

       1011
       +
       #### Translate

     

       1012
       +
       ```

     

       1013
       +
       translate-x-0, translate-x-px, translate-x-0.5, translate-x-1, translate-x-1.5, translate-x-2, translate-x-2.5, translate-x-3, translate-x-3.5, translate-x-4, translate-x-5, translate-x-6, translate-x-7, translate-x-8, translate-x-9, translate-x-10, translate-x-11, translate-x-12, translate-x-14, translate-x-16, translate-x-20, translate-x-24, translate-x-28, translate-x-32, translate-x-36, translate-x-40, translate-x-44, translate-x-48, translate-x-52, translate-x-56, translate-x-60, translate-x-64, translate-x-72, translate-x-80, translate-x-96, translate-x-1/2, translate-x-1/3, translate-x-2/3, translate-x-1/4, translate-x-2/4, translate-x-3/4, translate-x-full

     

       1014
       +
       translate-y-0, translate-y-px, translate-y-0.5, translate-y-1, translate-y-1.5, translate-y-2, translate-y-2.5, translate-y-3, translate-y-3.5, translate-y-4, translate-y-5, translate-y-6, translate-y-7, translate-y-8, translate-y-9, translate-y-10, translate-y-11, translate-y-12, translate-y-14, translate-y-16, translate-y-20, translate-y-24, translate-y-28, translate-y-32, translate-y-36, translate-y-40, translate-y-44, translate-y-48, translate-y-52, translate-y-56, translate-y-60, translate-y-64, translate-y-72, translate-y-80, translate-y-96, translate-y-1/2, translate-y-1/3, translate-y-2/3, translate-y-1/4, translate-y-2/4, translate-y-3/4, translate-y-full

     

       1015
       +
       ```

     

       1016
       +
       

     

       1017
       +
       #### Translate Z (NEW in v4)

     

       1018
       +
       ```

     

       1019
       +
       translate-z-0, translate-z-px, translate-z-0.5, translate-z-1, translate-z-1.5, translate-z-2, translate-z-2.5, translate-z-3, translate-z-3.5, translate-z-4, translate-z-5, translate-z-6, translate-z-7, translate-z-8, translate-z-9, translate-z-10, translate-z-11, translate-z-12, translate-z-14, translate-z-16, translate-z-20, translate-z-24, translate-z-28, translate-z-32, translate-z-36, translate-z-40, translate-z-44, translate-z-48, translate-z-52, translate-z-56, translate-z-60, translate-z-64, translate-z-72, translate-z-80, translate-z-96

     

       1020
       +
       ```

     

       1021
       +
       

     

       1022
       +
       #### Skew

     

       1023
       +
       ```

     

       1024
       +
       skew-x-0, skew-x-1, skew-x-2, skew-x-3, skew-x-6, skew-x-12, -skew-x-12, -skew-x-6, -skew-x-3, -skew-x-2, -skew-x-1

     

       1025
       +
       skew-y-0, skew-y-1, skew-y-2, skew-y-3, skew-y-6, skew-y-12, -skew-y-12, -skew-y-6, -skew-y-3, -skew-y-2, -skew-y-1

     

       1026
       +
       ```

     

       1027
       +
       

     

       1028
       +
       #### Transform Origin

     

       1029
       +
       ```

     

       1030
       +
       origin-center, origin-top, origin-top-right, origin-right, origin-bottom-right, origin-bottom, origin-bottom-left, origin-left, origin-top-left

     

       1031
       +
       ```

     

       1032
       +
       

     

       1033
       +
       #### Transform Style (NEW in v4)

     

       1034
       +
       ```

     

       1035
       +
       transform-style-flat, transform-style-preserve-3d

     

       1036
       +
       ```

     

       1037
       +
       

     

       1038
       +
       #### Perspective (NEW in v4)

     

       1039
       +
       ```

     

       1040
       +
       perspective-none, perspective-250, perspective-500, perspective-750, perspective-1000, perspective-distant

     

       1041
       +
       ```

     

       1042
       +
       

     

       1043
       +
       #### Perspective Origin (NEW in v4)

     

       1044
       +
       ```

     

       1045
       +
       perspective-origin-center, perspective-origin-top, perspective-origin-top-right, perspective-origin-right, perspective-origin-bottom-right, perspective-origin-bottom, perspective-origin-bottom-left, perspective-origin-left, perspective-origin-top-left

     

       1046
       +
       ```

     

       1047
       +
       

     

       1048
       +
       ### Interactivity

     

       1049
       +
       

     

       1050
       +
       #### Accent Color

     

       1051
       +
       ```

     

       1052
       +
       accent-auto, accent-inherit, accent-current, accent-transparent, accent-black, accent-white

     

       1053
       +
       accent-{color} (all color utilities work with accent- prefix)

     

       1054
       +
       ```

     

       1055
       +
       

     

       1056
       +
       #### Appearance

     

       1057
       +
       ```

     

       1058
       +
       appearance-none, appearance-auto

     

       1059
       +
       ```

     

       1060
       +
       

     

       1061
       +
       #### Cursor

     

       1062
       +
       ```

     

       1063
       +
       cursor-auto, cursor-default, cursor-pointer, cursor-wait, cursor-text, cursor-move, cursor-help, cursor-not-allowed, cursor-none, cursor-context-menu, cursor-progress, cursor-cell, cursor-crosshair, cursor-vertical-text, cursor-alias, cursor-copy, cursor-no-drop, cursor-grab, cursor-grabbing, cursor-all-scroll, cursor-col-resize, cursor-row-resize, cursor-n-resize, cursor-e-resize, cursor-s-resize, cursor-w-resize, cursor-ne-resize, cursor-nw-resize, cursor-se-resize, cursor-sw-resize, cursor-ew-resize, cursor-ns-resize, cursor-nesw-resize, cursor-nwse-resize, cursor-zoom-in, cursor-zoom-out

     

       1064
       +
       ```

     

       1065
       +
       

     

       1066
       +
       #### Caret Color

     

       1067
       +
       All color utilities work with `caret-` prefix

     

       1068
       +
       

     

       1069
       +
       #### Pointer Events

     

       1070
       +
       ```

     

       1071
       +
       pointer-events-none, pointer-events-auto

     

       1072
       +
       ```

     

       1073
       +
       

     

       1074
       +
       #### Resize

     

       1075
       +
       ```

     

       1076
       +
       resize-none, resize, resize-y, resize-x

     

       1077
       +
       ```

     

       1078
       +
       

     

       1079
       +
       #### Scroll Behavior

     

       1080
       +
       ```

     

       1081
       +
       scroll-auto, scroll-smooth

     

       1082
       +
       ```

     

       1083
       +
       

     

       1084
       +
       #### Scroll Margin

     

       1085
       +
       ```

     

       1086
       +
       scroll-m-0, scroll-m-px, scroll-m-0.5, scroll-m-1, scroll-m-1.5, scroll-m-2, scroll-m-2.5, scroll-m-3, scroll-m-3.5, scroll-m-4, scroll-m-5, scroll-m-6, scroll-m-7, scroll-m-8, scroll-m-9, scroll-m-10, scroll-m-11, scroll-m-12, scroll-m-14, scroll-m-16, scroll-m-20, scroll-m-24, scroll-m-28, scroll-m-32, scroll-m-36, scroll-m-40, scroll-m-44, scroll-m-48, scroll-m-52, scroll-m-56, scroll-m-60, scroll-m-64, scroll-m-72, scroll-m-80, scroll-m-96

     

       1087
       +
       scroll-mx-0, scroll-my-0, scroll-ms-0, scroll-me-0, scroll-mt-0, scroll-mr-0, scroll-mb-0, scroll-ml-0 (and all spacing values)

     

       1088
       +
       ```

     

       1089
       +
       

     

       1090
       +
       #### Scroll Padding

     

       1091
       +
       ```

     

       1092
       +
       scroll-p-0, scroll-p-px, scroll-p-0.5, scroll-p-1, scroll-p-1.5, scroll-p-2, scroll-p-2.5, scroll-p-3, scroll-p-3.5, scroll-p-4, scroll-p-5, scroll-p-6, scroll-p-7, scroll-p-8, scroll-p-9, scroll-p-10, scroll-p-11, scroll-p-12, scroll-p-14, scroll-p-16, scroll-p-20, scroll-p-24, scroll-p-28, scroll-p-32, scroll-p-36, scroll-p-40, scroll-p-44, scroll-p-48, scroll-p-52, scroll-p-56, scroll-p-60, scroll-p-64, scroll-p-72, scroll-p-80, scroll-p-96

     

       1093
       +
       scroll-px-0, scroll-py-0, scroll-ps-0, scroll-pe-0, scroll-pt-0, scroll-pr-0, scroll-pb-0, scroll-pl-0 (and all spacing values)

     

       1094
       +
       ```

     

       1095
       +
       

     

       1096
       +
       #### Scroll Snap Align

     

       1097
       +
       ```

     

       1098
       +
       snap-start, snap-end, snap-center, snap-align-none

     

       1099
       +
       ```

     

       1100
       +
       

     

       1101
       +
       #### Scroll Snap Stop

     

       1102
       +
       ```

     

       1103
       +
       snap-normal, snap-always

     

       1104
       +
       ```

     

       1105
       +
       

     

       1106
       +
       #### Scroll Snap Type

     

       1107
       +
       ```

     

       1108
       +
       snap-none, snap-x, snap-y, snap-both, snap-mandatory, snap-proximity

     

       1109
       +
       ```

     

       1110
       +
       

     

       1111
       +
       #### Touch Action

     

       1112
       +
       ```

     

       1113
       +
       touch-auto, touch-none, touch-pan-x, touch-pan-left, touch-pan-right, touch-pan-y, touch-pan-up, touch-pan-down, touch-pinch-zoom, touch-manipulation

     

       1114
       +
       ```

     

       1115
       +
       

     

       1116
       +
       #### User Select

     

       1117
       +
       ```

     

       1118
       +
       select-none, select-text, select-all, select-auto

     

       1119
       +
       ```

     

       1120
       +
       

     

       1121
       +
       #### Will Change

     

       1122
       +
       ```

     

       1123
       +
       will-change-auto, will-change-scroll, will-change-contents, will-change-transform

     

       1124
       +
       ```

     

       1125
       +
       

     

       1126
       +
       ### SVG

     

       1127
       +
       

     

       1128
       +
       #### Fill

     

       1129
       +
       ```

     

       1130
       +
       fill-none, fill-inherit, fill-current, fill-transparent, fill-black, fill-white

     

       1131
       +
       fill-{color} (all color utilities work with fill- prefix)

     

       1132
       +
       ```

     

       1133
       +
       

     

       1134
       +
       #### Stroke

     

       1135
       +
       ```

     

       1136
       +
       stroke-none, stroke-inherit, stroke-current, stroke-transparent, stroke-black, stroke-white

     

       1137
       +
       stroke-{color} (all color utilities work with stroke- prefix)

     

       1138
       +
       ```

     

       1139
       +
       

     

       1140
       +
       #### Stroke Width

     

       1141
       +
       ```

     

       1142
       +
       stroke-0, stroke-1, stroke-2

     

       1143
       +
       ```

     

       1144
       +
       

     

       1145
       +
       ### Accessibility

     

       1146
       +
       

     

       1147
       +
       #### Screen Readers

     

       1148
       +
       ```

     

       1149
       +
       sr-only, not-sr-only

     

       1150
       +
       ```

     

       1151
       +
       

     

       1152
       +
       #### Forced Color Adjust

     

       1153
       +
       ```

     

       1154
       +
       forced-color-adjust-auto, forced-color-adjust-none

     

       1155
       +
       ```

     

       1156
       +
       

     

       1157
       +
       ### Container Queries (NEW in v4)

     

       1158
       +
       

     

       1159
       +
       #### Container Type

     

       1160
       +
       ```

     

       1161
       +
       @container, @container-normal, @container-size, @container-inline-size

     

       1162
       +
       ```

     

       1163
       +
       

     

       1164
       +
       #### Container Query Variants

     

       1165
       +
       ```

     

       1166
       +
       @xs:, @sm:, @md:, @lg:, @xl:, @2xl:, @3xl:, @4xl:, @5xl:, @6xl:, @7xl:

     

       1167
       +
       @min-w-0:, @min-w-xs:, @min-w-sm:, @min-w-md:, @min-w-lg:, @min-w-xl:, @min-w-2xl:, @min-w-3xl:, @min-w-4xl:, @min-w-5xl:, @min-w-6xl:, @min-w-7xl:

     

       1168
       +
       @max-w-xs:, @max-w-sm:, @max-w-md:, @max-w-lg:, @max-w-xl:, @max-w-2xl:, @max-w-3xl:, @max-w-4xl:, @max-w-5xl:, @max-w-6xl:, @max-w-7xl:

     

       1169
       +
       @min-h-0:, @min-h-xs:, @min-h-sm:, @min-h-md:, @min-h-lg:, @min-h-xl:, @min-h-2xl:, @min-h-3xl:, @min-h-4xl:, @min-h-5xl:, @min-h-6xl:, @min-h-7xl:

     

       1170
       +
       @max-h-xs:, @max-h-sm:, @max-h-md:, @max-h-lg:, @max-h-xl:, @max-h-2xl:, @max-h-3xl:, @max-h-4xl:, @max-h-5xl:, @max-h-6xl:, @max-h-7xl:

     

       1171
       +
       ```

     

       1172
       +
       

     

       1173
       +
       ### Responsive Design

     

       1174
       +
       

     

       1175
       +
       #### Breakpoint Variants

     

       1176
       +
       ```

     

       1177
       +
       sm:, md:, lg:, xl:, 2xl:

     

       1178
       +
       max-sm:, max-md:, max-lg:, max-xl:, max-2xl:

     

       1179
       +
       ```

     

       1180
       +
       

     

       1181
       +
       ### State Variants

     

       1182
       +
       

     

       1183
       +
       #### Hover, Focus, etc.

     

       1184
       +
       ```

     

       1185
       +
       hover:, focus:, focus-within:, focus-visible:, active:, visited:, target:, disabled:, enabled:, checked:, indeterminate:, default:, required:, valid:, invalid:, in-range:, out-of-range:, placeholder-shown:, autofill:, read-only:

     

       1186
       +
       ```

     

       1187
       +
       

     

       1188
       +
       #### Group States

     

       1189
       +
       ```

     

       1190
       +
       group-hover:, group-focus:, group-focus-within:, group-focus-visible:, group-active:, group-visited:, group-target:, group-disabled:, group-enabled:, group-checked:, group-indeterminate:, group-default:, group-required:, group-valid:, group-invalid:, group-in-range:, group-out-of-range:, group-placeholder-shown:, group-autofill:, group-read-only:

     

       1191
       +
       ```

     

       1192
       +
       

     

       1193
       +
       #### Peer States

     

       1194
       +
       ```

     

       1195
       +
       peer-hover:, peer-focus:, peer-focus-within:, peer-focus-visible:, peer-active:, peer-visited:, peer-target:, peer-disabled:, peer-enabled:, peer-checked:, peer-indeterminate:, peer-default:, peer-required:, peer-valid:, peer-invalid:, peer-in-range:, peer-out-of-range:, peer-placeholder-shown:, peer-autofill:, peer-read-only:

     

       1196
       +
       ```

     

       1197
       +
       

     

       1198
       +
       #### NEW Variants in v4

     

       1199
       +
       ```

     

       1200
       +
       @starting-style:, not-*, nth-*, in-*, inert:, open: (for popovers)

     

       1201
       +
       ```

     

       1202
       +
       

     

       1203
       +
       ### Media Queries

     

       1204
       +
       

     

       1205
       +
       #### Dark Mode

     

       1206
       +
       ```

     

       1207
       +
       dark:

     

       1208
       +
       ```

     

       1209
       +
       

     

       1210
       +
       #### Motion

     

       1211
       +
       ```

     

       1212
       +
       motion-safe:, motion-reduce:

     

       1213
       +
       ```

     

       1214
       +
       

     

       1215
       +
       #### Contrast

     

       1216
       +
       ```

     

       1217
       +
       contrast-more:, contrast-less:

     

       1218
       +
       ```

     

       1219
       +
       

     

       1220
       +
       #### Print

     

       1221
       +
       ```

     

       1222
       +
       print:

     

       1223
       +
       ```

     

       1224
       +
       

     

       1225
       +
       #### Orientation

     

       1226
       +
       ```

     

       1227
       +
       portrait:, landscape:

     

       1228
       +
       ```

     

       1229
       +
       

     

       1230
       +
       ### Content

     

       1231
       +
       ```

     

       1232
       +
       content-none, content-['text']

     

       1233
       +
       ```

     

       1234
       +
       

     

       1235
       +
       ### Arbitrary Values

     

       1236
       +
       You can use arbitrary values with square brackets for any property:

     

       1237
       +
       ```

     

       1238
       +
       w-[123px], h-[456px], text-[#bada55], bg-[url('...')], top-[117px], left-[344px]

     

       1239
       +
       m-[12px], p-[24px], grid-cols-[200px_minmax(900px,_1fr)_100px]

     

       1240
       +
       ```

     

       1241
       +
       

     

       1242
       +
       ### Arbitrary Properties

     

       1243
       +
       ```

     

       1244
       +
       [mask-type:luminance], [tab-size:4], [@supports(backdrop-filter:blur(0))]:bg-white/75

     

       1245
       +
       ```

     

       1246
       +
       

     

       1247
       +
       ### Arbitrary Variants

     

       1248
       +
       ```

     

       1249
       +
       [&:nth-child(3)]:, [&:hover]:, [&_p]:, [@media(min-width:600px)]:

     

       1250
       +
       [@supports(backdrop-filter:blur(0))]:, [data-theme="dark"]:

     

       1251
       +
       ```

     

       1252
       +
       

     

       1253
       +
       ## Common v4 Pitfalls to Avoid

     

       1254
       +
       

     

       1255
       +
       ### Don't Use These Deprecated Patterns

     

       1256
       +
       - ❌ `@tailwind base; @tailwind components; @tailwind utilities;`

     

       1257
       +
       - ❌ `text-opacity-50` → Use `text-white/50` instead

     

       1258
       +
       - ❌ `bg-opacity-25` → Use `bg-blue-500/25` instead

     

       1259
       +
       - ❌ `border` without color (now uses currentColor, not gray-200)

     

       1260
       +
       - ❌ `ring` without explicit width (now 1px, was 3px)

     

       1261
       +
       - ❌ `@layer utilities` → Use `@utility` instead

     

       1262
       +
       - ❌ JavaScript config for new projects → Use CSS `@theme`

     

       1263
       +
       

     

       1264
       +
       ### Modern v4 Alternatives

     

       1265
       +
       - ✅ `@import "tailwindcss";`

     

       1266
       +
       - ✅ `text-white/50` for semi-transparent text

     

       1267
       +
       - ✅ `bg-blue-500/25` for semi-transparent backgrounds

     

       1268
       +
       - ✅ `border border-gray-200` for explicit border color

     

       1269
       +
       - ✅ `ring-3` for 3px ring width

     

       1270
       +
       - ✅ `@utility` for custom utilities

     

       1271
       +
       - ✅ `@theme` for configuration

     

       1272
       +
       

     

       1273
       +
       ## Performance Best Practices

     

       1274
       +
       

     

       1275
       +
       ### Leverage v4's Performance Features

     

       1276
       +
       - Use automatic content detection (no manual `content` config needed)

     

       1277
       +
       - Prefer container queries over viewport queries for true component responsiveness

     

       1278
       +
       - Use CSS variables from `@theme` for dynamic styling

     

       1279
       +
       - Leverage the new OKLCH color system for better color consistency

     

       1280
       +
       

     

       1281
       +
       ### Efficient Class Usage

     

       1282
       +
       ```html

     

       1283
       +
       <!-- Good: Use size-* for square elements -->

     

       1284
       +
       <div class="size-12"></div>

     

       1285
       +
       

     

       1286
       +
       <!-- Instead of: -->

     

       1287
       +
       <div class="w-12 h-12"></div>

     

       1288
       +
       

     

       1289
       +
       <!-- Good: Use container queries for component responsiveness -->

     

       1290
       +
       <div class="@container">

     

       1291
       +
         <div class="p-4 @lg:p-8">Content</div>

     

       1292
       +
       </div>

     

       1293
       +
       

     

       1294
       +
       <!-- Good: Use CSS variables for dynamic values -->

     

       1295
       +
       <div class="bg-[var(--theme-primary)] text-[var(--theme-on-primary)]">

     

       1296
       +
         Dynamic theming

     

       1297
       +
       </div>

     

       1298
       +
       ```

     

       1299
       +
       

     

       1300
       +
       ## Framework Integration

     

       1301
       +
       

     

       1302
       +
       ### Svelte 5

     

       1303
       +
       ```svelte

     

       1304
       +
       <script>

     

       1305
       +
         let { variant = "primary", children } = $props();

     

       1306
       +
         

     

       1307
       +
         const buttonClasses = $derived(() => [

     

       1308
       +
           'px-4 py-2 rounded-md font-medium transition-colors',

     

       1309
       +
           variant === 'primary' 

     

       1310
       +
             ? 'bg-brand text-white hover:bg-brand/90'

     

       1311
       +
             : 'bg-gray-100 text-gray-900 hover:bg-gray-200'

     

       1312
       +
         ].join(' '));

     

       1313
       +
       </script>

     

       1314
       +
       

     

       1315
       +
       <button class={buttonClasses}>

     

       1316
       +
         {@render children()}

     

       1317
       +
       </button>

     

       1318
       +
       

     

       1319
       +
       <style>

     

       1320
       +
       @import "tailwindcss";

     

       1321
       +
       

     

       1322
       +
       @theme {

     

       1323
       +
         --color-brand: oklch(0.5 0.2 240);

     

       1324
       +
       }

     

       1325
       +
       </style>

     

       1326
       +
       ```

     

       1327
       +
       

     

       1328
       +
       ## Debugging & Development

     

       1329
       +
       

     

       1330
       +
       ### Browser DevTools Tips

     

       1331
       +
       1. **Inspect CSS Variables**: Check `:root` in DevTools to see all theme variables

     

       1332
       +
       2. **Check Cascade Layers**: Use the Layers panel to understand style precedence

     

       1333
       +
       3. **Verify OKLCH Support**: Test colors in modern browsers vs fallbacks

     

       1334
       +
       4. **Container Query Debugging**: Use the @container panel in DevTools

     

       1335
       +
       

     

       1336
       +
       ### Common Debug Commands

     

       1337
       +
       ```bash

     

       1338
       +
       # Check if utilities are being generated

     

       1339
       +
       npx tailwindcss --watch --content "./src/**/*.{html,js,jsx,ts,tsx}"

     

       1340
       +
       

     

       1341
       +
       # Verify v4 installation

     

       1342
       +
       npm list tailwindcss

     

       1343
       +
       

     

       1344
       +
       # Check for conflicting PostCSS plugins

     

       1345
       +
       npm list | grep postcss

     

       1346
       +
       ```

     

       1347
       +
       

     

       1348
       +
       ### VS Code Extensions

     

       1349
       +
       - Tailwind CSS IntelliSense (updated for v4)

     

       1350
       +
       - PostCSS Language Support

     

       1351
       +
       

     

       1352
       +
       ## v3 to v4 Migration Checklist

     

       1353
       +
       

     

       1354
       +
       ### Pre-Migration

     

       1355
       +
       - [ ] Backup your project

     

       1356
       +
       - [ ] Ensure Node.js 20+ is installed

     

       1357
       +
       - [ ] Check browser support requirements (Safari 16.4+, Chrome 111+, Firefox 128+)

     

       1358
       +
       

     

       1359
       +
       ### Automated Migration

     

       1360
       +
       ```bash

     

       1361
       +
       npx @tailwindcss/upgrade@next

     

       1362
       +
       ```

     

       1363
       +
       

     

       1364
       +
       ### Manual Verification

     

       1365
       +
       - [ ] Replace `@tailwind` directives with `@import "tailwindcss"`

     

       1366
       +
       - [ ] Move `tailwind.config.js` content to CSS `@theme`

     

       1367
       +
       - [ ] Update deprecated utility classes

     

       1368
       +
       - [ ] Test container queries functionality

     

       1369
       +
       - [ ] Verify custom component styles

     

       1370
       +
       - [ ] Check 3D transform support

     

       1371
       +
       - [ ] Test mask utilities if used

     

       1372
       +
       - [ ] Validate color consistency (OKLCH vs RGB)

     

       1373
       +
       

     

       1374
       +
       ### Testing

     

       1375
       +
       - [ ] Test in all target browsers

     

       1376
       +
       - [ ] Verify responsive design still works

     

       1377
       +
       - [ ] Check dark mode functionality

     

       1378
       +
       - [ ] Test custom animations

     

       1379
       +
       - [ ] Validate accessibility features

     

       1380
       +
       

     

       1381
       +
       ## Production-Ready Component Patterns

     

       1382
       +
       

     

       1383
       +
       ### Modern Card Component

     

       1384
       +
       ```html

     

       1385
       +
       <div class="@container group">

     

       1386
       +
         <article class="

     

       1387
       +
           bg-white dark:bg-gray-900 

     

       1388
       +
           rounded-xl shadow-sm border border-gray-200 dark:border-gray-800

     

       1389
       +
           overflow-hidden transition-all duration-200

     

       1390
       +
           hover:shadow-md hover:-translate-y-0.5

     

       1391
       +
           @sm:flex @sm:items-center

     

       1392
       +
         ">

     

       1393
       +
           <div class="@sm:flex-shrink-0">

     

       1394
       +
             <img class="h-48 w-full object-cover @sm:h-full @sm:w-48" src="..." alt="...">

     

       1395
       +
           </div>

     

       1396
       +
           <div class="p-6 @sm:p-8">

     

       1397
       +
             <h3 class="text-lg font-semibold text-gray-900 dark:text-white @lg:text-xl">

     

       1398
       +
               Card Title

     

       1399
       +
             </h3>

     

       1400
       +
             <p class="mt-2 text-gray-600 dark:text-gray-300 @lg:text-lg">

     

       1401
       +
               Card description that adapts to container size.

     

       1402
       +
             </p>

     

       1403
       +
           </div>

     

       1404
       +
         </article>

     

       1405
       +
       </div>

     

       1406
       +
       ```

     

       1407
       +
       

     

       1408
       +
       ### 3D Interactive Button

     

       1409
       +
       ```html

     

       1410
       +
       <button class="

     

       1411
       +
         relative px-6 py-3 bg-blue-600 text-white font-medium rounded-lg

     

       1412
       +
         transform-3d perspective-1000 

     

       1413
       +
         transition-all duration-200

     

       1414
       +
         hover:rotate-x-12 hover:scale-105 hover:shadow-xl

     

       1415
       +
         active:scale-95 active:rotate-x-6

     

       1416
       +
         focus:outline-none focus:ring-2 focus:ring-blue-500/50

     

       1417
       +
       ">

     

       1418
       +
         3D Button

     

       1419
       +
       </button>

     

       1420
       +
       ```

     

       1421
       +
       

     

       1422
       +
       Remember: Tailwind CSS v4 is designed for modern browsers and modern development workflows. Embrace the new CSS-first approach and leverage the powerful new features for better performance and developer experience.

+31

tailwind.opam

···

       1
       +
       # This file is generated by dune, edit dune-project instead

     

       2
       +
       opam-version: "2.0"

     

       3
       +
       synopsis: "Type-safe Tailwind CSS generation for OCaml"

     

       4
       +
       description:

     

       5
       +
         "A comprehensive OCaml library for generating Tailwind CSS classes with full type safety"

     

       6
       +
       maintainer: ["Your Name"]

     

       7
       +
       authors: ["Your Name"]

     

       8
       +
       license: "MIT"

     

       9
       +
       homepage: "https://github.com/yourusername/tailwind-ocaml"

     

       10
       +
       doc: "https://yourusername.github.io/tailwind-ocaml/"

     

       11
       +
       bug-reports: "https://github.com/yourusername/tailwind-ocaml/issues"

     

       12
       +
       depends: [

     

       13
       +
         "ocaml"

     

       14
       +
         "dune" {>= "3.0" & >= "3.0"}

     

       15
       +
         "odoc" {with-doc}

     

       16
       +
       ]

     

       17
       +
       build: [

     

       18
       +
         ["dune" "subst"] {dev}

     

       19
       +
         [

     

       20
       +
           "dune"

     

       21
       +
           "build"

     

       22
       +
           "-p"

     

       23
       +
           name

     

       24
       +
           "-j"

     

       25
       +
           jobs

     

       26
       +
           "@install"

     

       27
       +
           "@runtest" {with-test}

     

       28
       +
           "@doc" {with-doc}

     

       29
       +
         ]

     

       30
       +
       ]

     

       31
       +
       dev-repo: "git+https://github.com/yourusername/tailwind-ocaml.git"