Tailwind classes in OCaml
anil.recoil.org
1type breakpoint = Sm | Md | Lg | Xl | Xl2
2type container_size = Xs | Sm | Md | Lg | Xl | Xl2 | Xl3 | Xl4 | Xl5 | Xl6 | Xl7
3type media_feature = Dark | Light | Motion_safe | Motion_reduce | Contrast_more | Contrast_less | Portrait | Landscape | Print | Screen
4
5type t =
6 | At_breakpoint of breakpoint * Css.t
7 | Max_breakpoint of breakpoint * Css.t
8 | At_container of container_size * Css.t
9 | Media of media_feature * Css.t
10 | Container of [`Normal | `Size | `Inline_size] option
11
12let to_class = function
13 | At_breakpoint (Sm, classes) -> Css.make ("sm:" ^ Css.to_string classes)
14 | At_breakpoint (Md, classes) -> Css.make ("md:" ^ Css.to_string classes)
15 | At_breakpoint (Lg, classes) -> Css.make ("lg:" ^ Css.to_string classes)
16 | At_breakpoint (Xl, classes) -> Css.make ("xl:" ^ Css.to_string classes)
17 | At_breakpoint (Xl2, classes) -> Css.make ("2xl:" ^ Css.to_string classes)
18 | Max_breakpoint (Sm, classes) -> Css.make ("max-sm:" ^ Css.to_string classes)
19 | Max_breakpoint (Md, classes) -> Css.make ("max-md:" ^ Css.to_string classes)
20 | Max_breakpoint (Lg, classes) -> Css.make ("max-lg:" ^ Css.to_string classes)
21 | Max_breakpoint (Xl, classes) -> Css.make ("max-xl:" ^ Css.to_string classes)
22 | Max_breakpoint (Xl2, classes) -> Css.make ("max-2xl:" ^ Css.to_string classes)
23 | Media (Dark, classes) -> Css.make ("dark:" ^ Css.to_string classes)
24 | Media (Light, classes) -> Css.make ("light:" ^ Css.to_string classes)
25 | Media (Motion_safe, classes) -> Css.make ("motion-safe:" ^ Css.to_string classes)
26 | Media (Motion_reduce, classes) -> Css.make ("motion-reduce:" ^ Css.to_string classes)
27 | Media (Contrast_more, classes) -> Css.make ("contrast-more:" ^ Css.to_string classes)
28 | Media (Contrast_less, classes) -> Css.make ("contrast-less:" ^ Css.to_string classes)
29 | Media (Portrait, classes) -> Css.make ("portrait:" ^ Css.to_string classes)
30 | Media (Landscape, classes) -> Css.make ("landscape:" ^ Css.to_string classes)
31 | Media (Print, classes) -> Css.make ("print:" ^ Css.to_string classes)
32 | Media (Screen, classes) -> Css.make ("screen:" ^ Css.to_string classes)
33 | Container None -> Css.make "container"
34 | Container (Some `Normal) -> Css.make "container"
35 | Container (Some `Size) -> Css.make "@container"
36 | Container (Some `Inline_size) -> Css.make "@container/inline-size"
37 | At_container (size, classes) ->
38 let size_str = match size with
39 | Xs -> "@xs"
40 | Sm -> "@sm"
41 | Md -> "@md"
42 | Lg -> "@lg"
43 | Xl -> "@xl"
44 | Xl2 -> "@2xl"
45 | Xl3 -> "@3xl"
46 | Xl4 -> "@4xl"
47 | Xl5 -> "@5xl"
48 | Xl6 -> "@6xl"
49 | Xl7 -> "@7xl"
50 in
51 Css.make (size_str ^ ":" ^ Css.to_string classes)
52
53let at_breakpoint bp classes = At_breakpoint (bp, classes)
54let max_breakpoint bp classes = Max_breakpoint (bp, classes)
55let at_container size classes = At_container (size, classes)
56let media feature classes = Media (feature, classes)
57let container container_type = Container container_type
58
59let apply responsive_t classes =
60 Css.combine (to_class responsive_t) classes