Tailwind classes in OCaml
anil.recoil.org
1(** GADT-based Tailwind HTML library with heterogeneous lists *)
2
3(** Color utilities *)
4val blue : int -> Tailwind.Color.t
5val gray : int -> Tailwind.Color.t
6val red : int -> Tailwind.Color.t
7val green : int -> Tailwind.Color.t
8val yellow : int -> Tailwind.Color.t
9val indigo : int -> Tailwind.Color.t
10val purple : int -> Tailwind.Color.t
11val pink : int -> Tailwind.Color.t
12
13(** Size utilities *)
14val rem : float -> Tailwind.Size.t
15val px : Tailwind.Size.t
16val zero : Tailwind.Size.t
17val auto : Tailwind.Size.t
18val full : Tailwind.Size.t
19val screen : Tailwind.Size.t
20
21(** Text utility *)
22val txt : string -> Htmlit.El.html
23
24(** GADT for Tailwind properties with category types *)
25type _ tw_prop =
26 | Text_color : Tailwind.Color.t -> [`Text_color] tw_prop
27 | Bg_color : Tailwind.Color.t -> [`Bg_color] tw_prop
28 | Font_size : Tailwind.Typography.font_size -> [`Font_size] tw_prop
29 | Font_weight : Tailwind.Typography.font_weight -> [`Font_weight] tw_prop
30 | Margin : Tailwind.Size.t -> [`Margin] tw_prop
31 | Margin_x : Tailwind.Size.t -> [`Margin] tw_prop
32 | Margin_y : Tailwind.Size.t -> [`Margin] tw_prop
33 | Margin_top : Tailwind.Size.t -> [`Margin] tw_prop
34 | Margin_bottom : Tailwind.Size.t -> [`Margin] tw_prop
35 | Margin_left : Tailwind.Size.t -> [`Margin] tw_prop
36 | Margin_right : Tailwind.Size.t -> [`Margin] tw_prop
37 | Padding : Tailwind.Size.t -> [`Padding] tw_prop
38 | Padding_x : Tailwind.Size.t -> [`Padding] tw_prop
39 | Padding_y : Tailwind.Size.t -> [`Padding] tw_prop
40 | Width : Tailwind.Size.t -> [`Width] tw_prop
41 | Height : Tailwind.Size.t -> [`Height] tw_prop
42 | Max_width : Tailwind.Size.t -> [`Width] tw_prop
43 | Min_height : Tailwind.Size.t -> [`Height] tw_prop
44 | Display_flex : [`Layout] tw_prop
45 | Display_grid : [`Layout] tw_prop
46 | Display_block : [`Layout] tw_prop
47 | Display_inline : [`Layout] tw_prop
48 | Display_inline_block : [`Layout] tw_prop
49 | Grid_cols : int -> [`Grid] tw_prop
50 | Grid_rows : int -> [`Grid] tw_prop
51 | Gap : Tailwind.Size.t -> [`Grid] tw_prop
52 | Gap_x : Tailwind.Size.t -> [`Grid] tw_prop
53 | Gap_y : Tailwind.Size.t -> [`Grid] tw_prop
54 | Items_center : [`Layout] tw_prop
55 | Items_start : [`Layout] tw_prop
56 | Items_end : [`Layout] tw_prop
57 | Justify_center : [`Layout] tw_prop
58 | Justify_between : [`Layout] tw_prop
59 | Justify_start : [`Layout] tw_prop
60 | Justify_end : [`Layout] tw_prop
61 | Flex_col : [`Layout] tw_prop
62 | Flex_row : [`Layout] tw_prop
63 | Text_center : [`Layout] tw_prop
64 | Text_left : [`Layout] tw_prop
65 | Text_right : [`Layout] tw_prop
66 | Rounded : [< `Sm | `Md | `Lg | `Full ] -> [`Effects] tw_prop
67 | Shadow : [< `Sm | `Md | `Lg ] -> [`Effects] tw_prop
68 | Border : [`Effects] tw_prop
69 | Border_color : Tailwind.Color.t -> [`Effects] tw_prop
70 | Transition : [`Effects] tw_prop
71
72(** Heterogeneous list *)
73type tw_list = tw_list_item list
74and tw_list_item = Any : 'a tw_prop -> tw_list_item
75
76(** Convert heterogeneous list to Tailwind classes *)
77val styles : tw_list -> Tailwind.t
78
79(** Helper for HTML class attribute *)
80val classes_attr : tw_list -> Htmlit.At.t
81
82(** Helper constructors for convenient usage *)
83val text_color : Tailwind.Color.t -> tw_list_item
84val bg_color : Tailwind.Color.t -> tw_list_item
85val font_size : Tailwind.Typography.font_size -> tw_list_item
86val font_weight : Tailwind.Typography.font_weight -> tw_list_item
87val margin : Tailwind.Size.t -> tw_list_item
88val margin_x : Tailwind.Size.t -> tw_list_item
89val margin_y : Tailwind.Size.t -> tw_list_item
90val margin_top : Tailwind.Size.t -> tw_list_item
91val margin_bottom : Tailwind.Size.t -> tw_list_item
92val margin_left : Tailwind.Size.t -> tw_list_item
93val margin_right : Tailwind.Size.t -> tw_list_item
94val padding : Tailwind.Size.t -> tw_list_item
95val padding_x : Tailwind.Size.t -> tw_list_item
96val padding_y : Tailwind.Size.t -> tw_list_item
97val width : Tailwind.Size.t -> tw_list_item
98val height : Tailwind.Size.t -> tw_list_item
99val max_width : Tailwind.Size.t -> tw_list_item
100val min_height : Tailwind.Size.t -> tw_list_item
101val flex : tw_list_item
102val grid : tw_list_item
103val block : tw_list_item
104val inline : tw_list_item
105val inline_block : tw_list_item
106val grid_cols : int -> tw_list_item
107val grid_rows : int -> tw_list_item
108val gap : Tailwind.Size.t -> tw_list_item
109val gap_x : Tailwind.Size.t -> tw_list_item
110val gap_y : Tailwind.Size.t -> tw_list_item
111val items_center : tw_list_item
112val items_start : tw_list_item
113val items_end : tw_list_item
114val justify_center : tw_list_item
115val justify_between : tw_list_item
116val justify_start : tw_list_item
117val justify_end : tw_list_item
118val flex_col : tw_list_item
119val flex_row : tw_list_item
120val text_center : tw_list_item
121val text_left : tw_list_item
122val text_right : tw_list_item
123val rounded : [< `Sm | `Md | `Lg | `Full ] -> tw_list_item
124val shadow : [< `Sm | `Md | `Lg ] -> tw_list_item
125val border : tw_list_item
126val border_color : Tailwind.Color.t -> tw_list_item
127val transition : tw_list_item
128
129(** HTML element functions with GADT styling *)
130val h1 : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
131val h2 : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
132val h3 : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
133val h4 : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
134val h5 : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
135val h6 : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
136val p : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
137val div : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
138val span : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
139val button : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
140val a : ?styles:tw_list -> href:string -> Htmlit.El.html list -> Htmlit.El.html
141val img : ?styles:tw_list -> src:string -> alt:string -> unit -> Htmlit.El.html
142val ul : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
143val ol : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
144val li : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
145val section : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
146val article : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
147val nav : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
148val header : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
149val footer : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
150val main : ?styles:tw_list -> Htmlit.El.html list -> Htmlit.El.html
151
152(** Pre-built component helpers *)
153val container : Htmlit.El.html list -> Htmlit.El.html
154val flex_center : Htmlit.El.html list -> Htmlit.El.html
155val card : ?elevated:bool -> Htmlit.El.html list -> Htmlit.El.html
156val btn_primary : ?size:[`Sm | `Md | `Lg] -> Htmlit.El.html list -> Htmlit.El.html
157val btn_secondary : ?size:[`Sm | `Md | `Lg] -> Htmlit.El.html list -> Htmlit.El.html
158val btn_outline : ?size:[`Sm | `Md | `Lg] -> Htmlit.El.html list -> Htmlit.El.html