Tailwind classes in OCaml
anil.recoil.org
1(** Common layout and styling patterns *)
2
3let flex_center =
4 Css.concat [
5 Display.to_class `Flex;
6 Flexbox.(to_class (justify `Center));
7 Flexbox.(to_class (align_items `Center));
8 ]
9
10let absolute_center =
11 Css.concat [
12 Css.make "absolute";
13 Css.make "top-1/2";
14 Css.make "left-1/2";
15 Css.make "-translate-x-1/2";
16 Css.make "-translate-y-1/2";
17 ]
18
19let stack ?gap () =
20 let gap_class = match gap with
21 | Some g -> [Spacing.(to_class (gap `Y g))]
22 | None -> [Css.make "space-y-4"]
23 in
24 Css.concat ([
25 Display.to_class `Flex;
26 Flexbox.(to_class (direction `Col));
27 ] @ gap_class)
28
29let inline_stack ?gap () =
30 let gap_class = match gap with
31 | Some g -> [Spacing.(to_class (gap `X g))]
32 | None -> [Css.make "space-x-4"]
33 in
34 Css.concat ([
35 Display.to_class `Flex;
36 Flexbox.(to_class (align_items `Center));
37 ] @ gap_class)
38
39let full_height =
40 Css.make "min-h-screen"
41
42let sticky_header =
43 Css.concat [
44 Css.make "sticky";
45 Css.make "top-0";
46 Css.make "z-50";
47 ]
48
49let card =
50 Css.concat [
51 Css.make "bg-white";
52 Css.make "rounded-lg";
53 Css.make "shadow-md";
54 Css.make "p-6";
55 ]
56
57let container ?center () =
58 let base = Css.make "container" in
59 let center_class = match center with
60 | Some true -> Css.make "mx-auto"
61 | _ -> Css.empty
62 in
63 Css.combine base center_class