Tailwind classes in OCaml
anil.recoil.org
1type border_width = [ `None | `Px | `Px2 | `Px4 | `Px8 ]
2type border_style = [ `Solid | `Dashed | `Dotted | `Double | `Hidden | `None ]
3type border_radius = [ `None | `Sm | `Base | `Md | `Lg | `Xl | `Xl2 | `Xl3 | `Full ]
4type shadow = [ `None | `Sm | `Base | `Md | `Lg | `Xl | `Xl2 | `Inner ]
5type opacity = int
6type transform_origin = [ `Center | `Top | `Top_right | `Right | `Bottom_right | `Bottom | `Bottom_left | `Left | `Top_left ]
7
8type 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
23let to_class = function
24 | `Border_width (`All, `None) -> Css.make "border-0"
25 | `Border_width (`All, `Px) -> Css.make "border"
26 | `Border_width (`All, `Px2) -> Css.make "border-2"
27 | `Border_width (`All, `Px4) -> Css.make "border-4"
28 | `Border_width (`All, `Px8) -> Css.make "border-8"
29 | `Border_style `Solid -> Css.make "border-solid"
30 | `Border_style `Dashed -> Css.make "border-dashed"
31 | `Border_style `Dotted -> Css.make "border-dotted"
32 | `Border_style `Double -> Css.make "border-double"
33 | `Border_style `Hidden -> Css.make "border-hidden"
34 | `Border_style `None -> Css.make "border-none"
35 | `Border_color color -> Color.border color
36 | `Rounded (`All, `None) -> Css.make "rounded-none"
37 | `Rounded (`All, `Sm) -> Css.make "rounded-sm"
38 | `Rounded (`All, `Base) -> Css.make "rounded"
39 | `Rounded (`All, `Md) -> Css.make "rounded-md"
40 | `Rounded (`All, `Lg) -> Css.make "rounded-lg"
41 | `Rounded (`All, `Xl) -> Css.make "rounded-xl"
42 | `Rounded (`All, `Xl2) -> Css.make "rounded-2xl"
43 | `Rounded (`All, `Xl3) -> Css.make "rounded-3xl"
44 | `Rounded (`All, `Full) -> Css.make "rounded-full"
45 | `Shadow `None -> Css.make "shadow-none"
46 | `Shadow `Sm -> Css.make "shadow-sm"
47 | `Shadow `Base -> Css.make "shadow"
48 | `Shadow `Md -> Css.make "shadow-md"
49 | `Shadow `Lg -> Css.make "shadow-lg"
50 | `Shadow `Xl -> Css.make "shadow-xl"
51 | `Shadow `Xl2 -> Css.make "shadow-2xl"
52 | `Shadow `Inner -> Css.make "shadow-inner"
53 | `Opacity n -> Css.make (Printf.sprintf "opacity-%d" n)
54 | `Transform `None -> Css.make "transform-none"
55 | `Transform `Gpu -> Css.make "transform-gpu"
56 | `Backdrop_blur `None -> Css.make "backdrop-blur-none"
57 | `Backdrop_blur `Sm -> Css.make "backdrop-blur-sm"
58 | `Backdrop_blur `Base -> Css.make "backdrop-blur"
59 | `Backdrop_blur `Md -> Css.make "backdrop-blur-md"
60 | `Backdrop_blur `Lg -> Css.make "backdrop-blur-lg"
61 | `Backdrop_blur `Xl -> Css.make "backdrop-blur-xl"
62 | `Backdrop_blur `Xl2 -> Css.make "backdrop-blur-2xl"
63 | `Backdrop_blur `Xl3 -> Css.make "backdrop-blur-3xl"
64 | `Transform_origin `Center -> Css.make "origin-center"
65 | `Transform_origin `Top -> Css.make "origin-top"
66 | `Transform_origin `Top_right -> Css.make "origin-top-right"
67 | `Transform_origin `Right -> Css.make "origin-right"
68 | `Transform_origin `Bottom_right -> Css.make "origin-bottom-right"
69 | `Transform_origin `Bottom -> Css.make "origin-bottom"
70 | `Transform_origin `Bottom_left -> Css.make "origin-bottom-left"
71 | `Transform_origin `Left -> Css.make "origin-left"
72 | `Transform_origin `Top_left -> Css.make "origin-top-left"
73 | `Scale (dir, percent) ->
74 let dir_str = match dir with `All -> "" | `X -> "-x" | `Y -> "-y" in
75 Css.make (Printf.sprintf "scale%s-%d" dir_str percent)
76 | `Rotate degrees -> Css.make (Printf.sprintf "rotate-%d" degrees)
77 | `Translate (dir, size) ->
78 let dir_str = match dir with `X -> "x" | `Y -> "y" in
79 Css.make (Printf.sprintf "translate-%s-%s" dir_str (Size.to_string size))
80 | `Rounded (_, _) -> Css.empty (* This should be handled by the specific rounded patterns above *)
81 | `Border_width (_, _) -> Css.empty (* This should be handled by the specific border patterns above *)
82
83let border_width dir width = `Border_width (dir, width)
84let border_style style = `Border_style style
85let border_color color = `Border_color color
86let rounded dir radius = `Rounded (dir, radius)
87let shadow s = `Shadow s
88let opacity o = `Opacity o
89let backdrop_blur blur = `Backdrop_blur blur
90let transform t = `Transform t
91let transform_origin origin = `Transform_origin origin
92let scale dir percent = `Scale (dir, percent)
93let rotate degrees = `Rotate degrees
94let translate dir size = `Translate (dir, size)
95
96let border = Css.make "border"
97let border_2 = Css.make "border-2"
98let border_4 = Css.make "border-4"
99let rounded_sm = Css.make "rounded-sm"
100let rounded_md = Css.make "rounded-md"
101let rounded_lg = Css.make "rounded-lg"
102let rounded_full = Css.make "rounded-full"
103let shadow_sm = Css.make "shadow-sm"
104let shadow_md = Css.make "shadow-md"
105let shadow_lg = Css.make "shadow-lg"
106
107(* Animation and transition utilities *)
108type transition_property = [ `None | `All | `Colors | `Opacity | `Shadow | `Transform ]
109type timing_function = [ `Linear | `In | `Out | `In_out ]
110
111let transition transition_type =
112 let class_name = match transition_type with
113 | `None -> "transition-none"
114 | `All -> "transition-all"
115 | `Colors -> "transition-colors"
116 | `Opacity -> "transition-opacity"
117 | `Shadow -> "transition-shadow"
118 | `Transform -> "transition-transform"
119 in
120 Css.make class_name
121
122let duration ms = Css.make (Printf.sprintf "duration-%d" ms)
123
124let ease timing =
125 let class_name = match timing with
126 | `Linear -> "ease-linear"
127 | `In -> "ease-in"
128 | `Out -> "ease-out"
129 | `In_out -> "ease-in-out"
130 in
131 Css.make class_name
132
133(* Text shadow utilities *)
134let text_shadow shadow_size =
135 let class_name = match shadow_size with
136 | `None -> "text-shadow-none"
137 | `Sm -> "text-shadow-sm"
138 | `Base -> "text-shadow"
139 | `Lg -> "text-shadow-lg"
140 | `Xl -> "text-shadow-xl"
141 in
142 Css.make class_name
143
144(* Mask utilities *)
145let mask mask_type =
146 let class_name = match mask_type with
147 | `Auto -> "mask-auto"
148 | `Cover -> "mask-cover"
149 | `Contain -> "mask-contain"
150 in
151 Css.make class_name
152
153(* 3D perspective *)
154let perspective perspective_type =
155 let class_name = match perspective_type with
156 | `None -> "perspective-none"
157 | `Distant -> "perspective-distant"
158 | `Normal -> "perspective-normal"
159 | `Near -> "perspective-near"
160 in
161 Css.make class_name