Tailwind classes in OCaml
anil.recoil.org
1type t = Css.t
2
3(* Module aliases *)
4module Css = Css
5module Color = Color
6module Size = Size
7module Spacing = Spacing
8module Display = Display
9module Flexbox = Flexbox
10module Grid = Grid
11module Position = Position
12module Layout = Layout
13module Typography = Typography
14module Effects = Effects
15module Responsive = Responsive
16module Variants = Variants
17module Reset = Reset
18module Patterns = Patterns
19
20(* Convenience aliases *)
21module C = Color
22module S = Spacing
23module E = Effects
24module T = Typography
25module F = Flexbox
26module G = Grid
27module P = Patterns
28module R = Reset
29
30let tw classes = Css.concat classes
31
32let class_list pairs =
33 List.fold_left (fun acc (classes, condition) ->
34 if condition then Css.combine acc classes else acc
35 ) Css.empty pairs
36
37let to_string = Css.to_string
38
39(* Core utility functions *)
40
41let sr_only =
42 tw [
43 Css.make "sr-only";
44 ]
45
46let focus_ring ?color ?width () =
47 let base_classes = [
48 Css.make "focus:outline-none";
49 Css.make "focus:ring-2";
50 Css.make "focus:ring-offset-2";
51 ] in
52 let color_class = match color with
53 | Some c -> [Color.ring c]
54 | None -> [Css.make "focus:ring-blue-500"]
55 in
56 let width_class = match width with
57 | Some _ -> [] (* Could implement width variations *)
58 | None -> []
59 in
60 tw (base_classes @ color_class @ width_class)
61
62
63module V4 = struct
64 let container_query size classes =
65 let container_class = match size with
66 | `Xs -> "@xs:"
67 | `Sm -> "@sm:"
68 | `Md -> "@md:"
69 | `Lg -> "@lg:"
70 | `Xl -> "@xl:"
71 | `Xl2 -> "@2xl:"
72 | `Xl3 -> "@3xl:"
73 | `Xl4 -> "@4xl:"
74 | `Xl5 -> "@5xl:"
75 | `Xl6 -> "@6xl:"
76 | `Xl7 -> "@7xl:"
77 in
78 Css.make (container_class ^ Css.to_string classes)
79
80 let starting_style classes =
81 Css.make ("@starting-style " ^ Css.to_string classes)
82
83 let text_shadow shadow_size =
84 let class_name = match shadow_size with
85 | `None -> "text-shadow-none"
86 | `Sm -> "text-shadow-sm"
87 | `Base -> "text-shadow"
88 | `Lg -> "text-shadow-lg"
89 | `Xl -> "text-shadow-xl"
90 in
91 Css.make class_name
92
93 let mask mask_type =
94 let class_name = match mask_type with
95 | `Auto -> "mask-auto"
96 | `Cover -> "mask-cover"
97 | `Contain -> "mask-contain"
98 in
99 Css.make class_name
100
101 let perspective perspective_type =
102 let class_name = match perspective_type with
103 | `None -> "perspective-none"
104 | `Distant -> "perspective-distant"
105 | `Normal -> "perspective-normal"
106 | `Near -> "perspective-near"
107 in
108 Css.make class_name
109end