Tailwind classes in OCaml
anil.recoil.org
1type overflow = [
2 | `Auto
3 | `Hidden
4 | `Clip
5 | `Visible
6 | `Scroll
7]
8
9type box_sizing = [
10 | `Border_box
11 | `Content_box
12]
13
14type object_fit = [
15 | `Contain
16 | `Cover
17 | `Fill
18 | `None
19 | `Scale_down
20]
21
22type object_position = [
23 | `Bottom | `Center | `Left | `Left_bottom | `Left_top
24 | `Right | `Right_bottom | `Right_top | `Top
25]
26
27type t = [
28 | `Width of Size.t
29 | `Height of Size.t
30 | `Min_width of Size.t
31 | `Max_width of Size.t
32 | `Min_height of Size.t
33 | `Max_height of Size.t
34 | `Overflow of [`All | `X | `Y] * overflow
35 | `Box_sizing of box_sizing
36 | `Object_fit of object_fit
37 | `Object_position of object_position
38 | `Aspect of [`Auto | `Square | `Video | `Ratio of int * int]
39]
40
41let to_class = function
42 | `Width size -> Css.make (Printf.sprintf "w-%s" (Size.to_string size))
43 | `Height size -> Css.make (Printf.sprintf "h-%s" (Size.to_string size))
44 | `Min_width size -> Css.make (Printf.sprintf "min-w-%s" (Size.to_string size))
45 | `Max_width size -> Css.make (Printf.sprintf "max-w-%s" (Size.to_string size))
46 | `Min_height size -> Css.make (Printf.sprintf "min-h-%s" (Size.to_string size))
47 | `Max_height size -> Css.make (Printf.sprintf "max-h-%s" (Size.to_string size))
48 | `Overflow (`All, `Auto) -> Css.make "overflow-auto"
49 | `Overflow (`All, `Hidden) -> Css.make "overflow-hidden"
50 | `Overflow (`All, `Clip) -> Css.make "overflow-clip"
51 | `Overflow (`All, `Visible) -> Css.make "overflow-visible"
52 | `Overflow (`All, `Scroll) -> Css.make "overflow-scroll"
53 | `Overflow (`X, `Auto) -> Css.make "overflow-x-auto"
54 | `Overflow (`X, `Hidden) -> Css.make "overflow-x-hidden"
55 | `Overflow (`X, `Clip) -> Css.make "overflow-x-clip"
56 | `Overflow (`X, `Visible) -> Css.make "overflow-x-visible"
57 | `Overflow (`X, `Scroll) -> Css.make "overflow-x-scroll"
58 | `Overflow (`Y, `Auto) -> Css.make "overflow-y-auto"
59 | `Overflow (`Y, `Hidden) -> Css.make "overflow-y-hidden"
60 | `Overflow (`Y, `Clip) -> Css.make "overflow-y-clip"
61 | `Overflow (`Y, `Visible) -> Css.make "overflow-y-visible"
62 | `Overflow (`Y, `Scroll) -> Css.make "overflow-y-scroll"
63 | `Box_sizing `Border_box -> Css.make "box-border"
64 | `Box_sizing `Content_box -> Css.make "box-content"
65 | `Object_fit `Contain -> Css.make "object-contain"
66 | `Object_fit `Cover -> Css.make "object-cover"
67 | `Object_fit `Fill -> Css.make "object-fill"
68 | `Object_fit `None -> Css.make "object-none"
69 | `Object_fit `Scale_down -> Css.make "object-scale-down"
70 | `Object_position `Bottom -> Css.make "object-bottom"
71 | `Object_position `Center -> Css.make "object-center"
72 | `Object_position `Left -> Css.make "object-left"
73 | `Object_position `Left_bottom -> Css.make "object-left-bottom"
74 | `Object_position `Left_top -> Css.make "object-left-top"
75 | `Object_position `Right -> Css.make "object-right"
76 | `Object_position `Right_bottom -> Css.make "object-right-bottom"
77 | `Object_position `Right_top -> Css.make "object-right-top"
78 | `Object_position `Top -> Css.make "object-top"
79 | `Aspect `Auto -> Css.make "aspect-auto"
80 | `Aspect `Square -> Css.make "aspect-square"
81 | `Aspect `Video -> Css.make "aspect-video"
82 | `Aspect (`Ratio (w, h)) -> Css.make (Printf.sprintf "aspect-[%d/%d]" w h)
83
84let width size = `Width size
85let height size = `Height size
86let min_width size = `Min_width size
87let max_width size = `Max_width size
88let min_height size = `Min_height size
89let max_height size = `Max_height size
90let overflow dir overflow = `Overflow (dir, overflow)
91let box_sizing bs = `Box_sizing bs
92let object_fit of_ = `Object_fit of_
93let object_position op = `Object_position op
94let aspect a = `Aspect a
95
96let w_full = Css.make "w-full"
97let w_screen = Css.make "w-screen"
98let w_auto = Css.make "w-auto"
99let w_fit = Css.make "w-fit"
100
101let h_full = Css.make "h-full"
102let h_screen = Css.make "h-screen"
103let h_auto = Css.make "h-auto"
104let h_fit = Css.make "h-fit"
105
106(* Accessibility utilities *)
107let sr_only = Css.make "sr-only"
108
109let focus_ring ?color ?width () =
110 let base_classes = [
111 Css.make "focus:outline-none";
112 Css.make "focus:ring-2";
113 Css.make "focus:ring-offset-2";
114 ] in
115 let color_class = match color with
116 | Some c -> [Color.ring c]
117 | None -> [Css.make "focus:ring-blue-500"]
118 in
119 let width_class = match width with
120 | Some _ -> [] (* Could implement width variations *)
121 | None -> []
122 in
123 Css.concat (base_classes @ color_class @ width_class)