Tailwind classes in OCaml
anil.recoil.org
1(* Button Demo - Showcasing new button combinators *)
2
3open Htmlit
4open Tailwind_html
5
6let create_button_demo () =
7 let html = El.html [
8 El.head [
9 El.meta ~at:[At.charset "utf-8"] ();
10 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();
11 El.title [txt "Button Demo"];
12 El.link ~at:[At.rel "stylesheet"; At.href "button_demo.css"] ();
13 ];
14 El.body ~at:[classes_attr (Tailwind.Css.tw [
15 Tailwind.Layout.(to_class (min_height screen));
16 Tailwind.Color.bg (gray 50);
17 Tailwind.Spacing.(to_class (p (rem 2.0)));
18 ])] [
19 container [
20 h1 ~size:`Xl3 ~weight:`Bold ~color:(gray 800) ~align:`Center ~mb:(rem 2.0) [
21 txt "Button Combinator Demo"
22 ];
23
24 p_styled ~size:`Lg ~color:(gray 600) ~align:`Center ~mb:(rem 3.0) [
25 txt "Showcasing succinct button creation with the new Tailwind_html API"
26 ];
27
28 (* Button examples section *)
29 div ~classes:(Tailwind.Css.tw [
30 Tailwind.Spacing.(to_class (gap `All (rem 2.0)));
31 flex;
32 Tailwind.Flexbox.(to_class (direction `Col));
33 ]) [
34 (* Primary buttons *)
35 card [
36 h2 ~size:`Xl ~weight:`Semibold ~color:(gray 700) ~mb:(rem 1.5) [
37 txt "Primary Buttons"
38 ];
39 div ~classes:(Tailwind.Css.tw [
40 flex;
41 Tailwind.Flexbox.(to_class (wrap `Wrap));
42 Tailwind.Spacing.(to_class (gap `All (rem 1.0)));
43 ]) [
44 btn_primary ~size:`Sm [txt "Small Primary"];
45 btn_primary [txt "Default Primary"];
46 btn_primary ~size:`Lg [txt "Large Primary"];
47 btn_primary ~disabled:true [txt "Disabled Primary"];
48 ];
49 ];
50
51 (* Secondary buttons *)
52 card [
53 h2 ~size:`Xl ~weight:`Semibold ~color:(gray 700) ~mb:(rem 1.5) [
54 txt "Secondary Buttons"
55 ];
56 div ~classes:(Tailwind.Css.tw [
57 flex;
58 Tailwind.Flexbox.(to_class (wrap `Wrap));
59 Tailwind.Spacing.(to_class (gap `All (rem 1.0)));
60 ]) [
61 btn_secondary ~size:`Sm [txt "Small Secondary"];
62 btn_secondary [txt "Default Secondary"];
63 btn_secondary ~size:`Lg [txt "Large Secondary"];
64 btn_secondary ~disabled:true [txt "Disabled Secondary"];
65 ];
66 ];
67
68 (* Comparison section *)
69 card [
70 h2 ~size:`Xl ~weight:`Semibold ~color:(gray 700) ~mb:(rem 1.5) [
71 txt "Before vs After"
72 ];
73 div ~classes:(Tailwind.Css.tw [
74 Tailwind.Display.grid;
75 Tailwind.Grid.(to_class (template_cols (`Cols 1)));
76 Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Grid.(to_class (template_cols (`Cols 2))))));
77 Tailwind.Spacing.(to_class (gap `All (rem 2.0)));
78 ]) [
79 div [
80 h2 ~size:`Lg ~weight:`Medium ~color:(red 600) ~mb:(rem 1.0) [
81 txt "❌ Old Verbose Way"
82 ];
83 El.pre ~at:[classes_attr (Tailwind.Css.tw [
84 Tailwind.Color.bg (gray 100);
85 Tailwind.Spacing.(to_class (p (rem 1.0)));
86 Tailwind.Effects.rounded_md;
87 Tailwind.Typography.(to_class (font_size `Sm));
88 Tailwind.Layout.(to_class (overflow `X `Auto));
89 ])] [
90 El.code [txt {|let btn_classes = Css.tw [
91 Color.bg (Color.make `Blue ~variant:`V600 ());
92 Color.text Color.white;
93 Spacing.(to_class (px (Size.rem 1.0)));
94 Spacing.(to_class (py (Size.rem 0.5)));
95 Effects.rounded_md;
96 Typography.(to_class (font_weight `Medium));
97] in
98El.button ~at:[classes_attr btn_classes] [
99 El.txt "Click me!"
100]|}];
101 ];
102 ];
103 div [
104 h2 ~size:`Lg ~weight:`Medium ~color:(green 600) ~mb:(rem 1.0) [
105 txt "✅ New Succinct Way"
106 ];
107 El.pre ~at:[classes_attr (Tailwind.Css.tw [
108 Tailwind.Color.bg (gray 100);
109 Tailwind.Spacing.(to_class (p (rem 1.0)));
110 Tailwind.Effects.rounded_md;
111 Tailwind.Typography.(to_class (font_size `Sm));
112 Tailwind.Layout.(to_class (overflow `X `Auto));
113 ])] [
114 El.code [txt {|btn_primary [txt "Click me!"]|}];
115 ];
116 ];
117 ];
118 ];
119 ];
120 ];
121 ];
122 ] in
123 html
124
125let () =
126 let html = create_button_demo () in
127 print_string (El.to_string ~doctype:true html)