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
22let 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
82let border_width dir width = Border_width (dir, width)
83let border_style style = Border_style style
84let border_color color = Border_color color
85let rounded dir radius = Rounded (dir, radius)
86let shadow s = Shadow s
87let opacity o = Opacity o
88let backdrop_blur blur = Backdrop_blur blur
89let transform t = Transform t
90let transform_origin origin = Transform_origin origin
91let scale dir percent = Scale (dir, percent)
92let rotate degrees = Rotate degrees
93let translate dir size = Translate (dir, size)
94
95let border = Css.make "border"
96let border_2 = Css.make "border-2"
97let border_4 = Css.make "border-4"
98let rounded_sm = Css.make "rounded-sm"
99let rounded_md = Css.make "rounded-md"
100let rounded_lg = Css.make "rounded-lg"
101let rounded_full = Css.make "rounded-full"
102let shadow_sm = Css.make "shadow-sm"
103let shadow_md = Css.make "shadow-md"
104let shadow_lg = Css.make "shadow-lg"