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