Tailwind classes in OCaml
anil.recoil.org
1(* Main module for Tailwind HTML library *)
2
3(* Re-export all submodules *)
4module Component = Component
5module Button = Button
6module Card = Card
7module Form = Form
8module Layout = Layout
9module Cli = Cli
10
11(* Common utility for converting Tailwind classes to HTML class attribute *)
12let classes_attr tailwind_classes =
13 Htmlit.At.class' (Tailwind.to_string tailwind_classes)
14
15(* Apply Tailwind classes to an existing HTML element by wrapping it *)
16let with_classes classes element =
17 let open Htmlit in
18 El.span ~at:[classes_attr classes] [element]
19
20(* Conditionally apply Tailwind classes *)
21let with_classes_if condition classes element =
22 if condition then with_classes classes element else element
23
24(* Create an element with Tailwind classes and optional attributes *)
25let el tag ?classes ?attributes children =
26 let open Htmlit in
27 let base_attrs = match classes with
28 | Some c -> [classes_attr c]
29 | None -> []
30 in
31 let custom_attrs = match attributes with
32 | Some attrs -> List.map (fun (k, v) -> At.v k v) attrs
33 | None -> []
34 in
35 let all_attrs = base_attrs @ custom_attrs in
36 El.v tag ~at:all_attrs children
37
38(* Common HTML elements with Tailwind class support *)
39let div ?classes ?attributes children = el "div" ?classes ?attributes children
40let span ?classes ?attributes children = el "span" ?classes ?attributes children
41let p ?classes ?attributes children = el "p" ?classes ?attributes children
42let a ?classes ?attributes ~href children =
43 let attrs = match attributes with Some a -> a | None -> [] in
44 el "a" ?classes ~attributes:(("href", href) :: attrs) children
45let img ?classes ?attributes ~src ~alt () =
46 let attrs = match attributes with Some a -> a | None -> [] in
47 el "img" ?classes ~attributes:(("src", src) :: ("alt", alt) :: attrs) []
48let h1 ?classes ?attributes children = el "h1" ?classes ?attributes children
49let h2 ?classes ?attributes children = el "h2" ?classes ?attributes children
50let h3 ?classes ?attributes children = el "h3" ?classes ?attributes children
51let h4 ?classes ?attributes children = el "h4" ?classes ?attributes children
52let h5 ?classes ?attributes children = el "h5" ?classes ?attributes children
53let h6 ?classes ?attributes children = el "h6" ?classes ?attributes children
54let ul ?classes ?attributes children = el "ul" ?classes ?attributes children
55let ol ?classes ?attributes children = el "ol" ?classes ?attributes children
56let li ?classes ?attributes children = el "li" ?classes ?attributes children
57
58(* Text element with built-in typography utilities *)
59let text ?size ?weight ?color ?align ?classes text_content =
60 let base_styles = [] in
61 let size_styles = match size with Some s -> [Tailwind.Typography.(to_class (font_size s))] | None -> [] in
62 let weight_styles = match weight with Some w -> [Tailwind.Typography.(to_class (font_weight w))] | None -> [] in
63 let color_styles = match color with Some c -> [Tailwind.Color.text c] | None -> [] in
64 let align_styles = match align with Some a -> [Tailwind.Typography.(to_class (text_align a))] | None -> [] in
65 let text_classes = Tailwind.tw (base_styles @ size_styles @ weight_styles @ color_styles @ align_styles) in
66 let final_classes = match classes with
67 | Some c -> Tailwind.tw [text_classes; c]
68 | None -> text_classes
69 in
70 span ~classes:final_classes [Htmlit.El.txt text_content]