Tailwind classes in OCaml
anil.recoil.org
1(* Simple HTML generation example using Tailwind classes *)
2
3open Htmlit
4
5let classes_attr tailwind_classes =
6 At.class' (Tailwind.to_string tailwind_classes)
7
8let () =
9 Printf.printf "=== Simple Tailwind HTML Example ===\n";
10
11 (* Create a simple card *)
12 let card_classes = Tailwind.tw [
13 Tailwind.Effects.rounded_lg;
14 Tailwind.Effects.shadow_md;
15 Tailwind.Color.bg Tailwind.Color.white;
16 Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.5)));
17 Tailwind.Layout.(to_class (max_width (Tailwind.Size.rem 20.0)));
18 ] in
19
20 let card = El.div ~at:[classes_attr card_classes] [
21 El.h2 ~at:[classes_attr (Tailwind.tw [
22 Tailwind.Typography.(to_class (font_size `Xl));
23 Tailwind.Typography.(to_class (font_weight `Bold));
24 Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 1.0)));
25 ])] [El.txt "Welcome Card"];
26
27 El.p ~at:[classes_attr (Tailwind.tw [
28 Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ());
29 Tailwind.Spacing.(to_class (mb (Tailwind.Size.rem 1.5)));
30 ])] [El.txt "This is a simple card component built with Tailwind CSS classes."];
31
32 El.button ~at:[
33 classes_attr (Tailwind.tw [
34 Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ());
35 Tailwind.Color.text Tailwind.Color.white;
36 Tailwind.Spacing.(to_class (px (Tailwind.Size.rem 1.0)));
37 Tailwind.Spacing.(to_class (py (Tailwind.Size.rem 0.5)));
38 Tailwind.Effects.rounded_md;
39 Tailwind.Variants.hover (Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V700 ()));
40 ]);
41 ] [El.txt "Click Me"];
42 ] in
43
44 (* Create a simple layout *)
45 let page = El.div ~at:[classes_attr (Tailwind.tw [
46 Tailwind.Layout.(to_class (min_height (Tailwind.Size.screen)));
47 Tailwind.Color.bg (Tailwind.Color.make `Gray ~variant:`V50 ());
48 Tailwind.Display.flex;
49 Tailwind.Flexbox.(to_class (align_items `Center));
50 Tailwind.Flexbox.(to_class (justify `Center));
51 Tailwind.Spacing.(to_class (p (Tailwind.Size.rem 1.0)));
52 ])] [card] in
53
54 (* Generate HTML *)
55 let html_doc = El.html [
56 El.head [
57 El.title [El.txt "Tailwind HTML Example"];
58 El.script ~at:[At.src "https://cdn.tailwindcss.com"] [];
59 ];
60 El.body [page];
61 ] in
62
63 let html_string = El.to_string ~doctype:true html_doc in
64
65 Printf.printf "Generated HTML document (%d characters)\n" (String.length html_string);
66 Printf.printf "HTML preview:\n%s\n" (String.sub html_string 0 (min 500 (String.length html_string)));
67
68 (* Show individual class generation *)
69 Printf.printf "\n=== Individual Class Examples ===\n";
70 Printf.printf "Primary button: %s\n" (Tailwind.to_string (Tailwind.tw [
71 Tailwind.Color.bg (Tailwind.Color.make `Blue ~variant:`V600 ());
72 Tailwind.Color.text Tailwind.Color.white;
73 Tailwind.Effects.rounded_md;
74 ]));
75
76 Printf.printf "Card container: %s\n" (Tailwind.to_string (Tailwind.tw [
77 Tailwind.Effects.rounded_lg;
78 Tailwind.Effects.shadow_md;
79 Tailwind.Color.bg Tailwind.Color.white;
80 ]));
81
82 Printf.printf "Flex center: %s\n" (Tailwind.to_string (Tailwind.tw [
83 Tailwind.Display.flex;
84 Tailwind.Flexbox.(to_class (align_items `Center));
85 Tailwind.Flexbox.(to_class (justify `Center));
86 ]));
87
88 Printf.printf "Responsive grid: %s\n" (Tailwind.to_string (Tailwind.tw [
89 Tailwind.Display.grid;
90 Tailwind.Grid.(to_class (template_cols (`Cols 1)));
91 Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Grid.(to_class (template_cols (`Cols 2))))));
92 Tailwind.Responsive.(to_class (at_breakpoint `Lg (Tailwind.Grid.(to_class (template_cols (`Cols 3))))));
93 ]));
94
95 Printf.printf "\nTailwind HTML library working successfully!\n"