Tailwind classes in OCaml
anil.recoil.org
1(* Example 03: Layout and Spacing - Mastering Box Model and Flexbox *)
2
3open Htmlit
4open Tailwind
5
6let classes_attr tailwind_classes =
7 At.class' (Tailwind.to_string tailwind_classes)
8
9let create_layout_demo () =
10 (* Create comprehensive layout demonstration *)
11 let html_doc = El.html [
12 El.head [
13 El.meta ~at:[At.charset "utf-8"] ();
14 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();
15 El.title [El.txt "Layout and Spacing"];
16 El.link ~at:[At.rel "stylesheet"; At.href "layout_and_spacing_03.css"] ();
17 ];
18 El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [
19 El.div ~at:[At.class' "max-w-6xl mx-auto"] [
20 El.h1 ~at:[classes_attr (tw [
21 Typography.(to_class (font_size `Xl2));
22 Typography.(to_class (font_weight `Bold));
23 Color.text (Color.make `Gray ~variant:`V800 ());
24 ]); At.class' "mb-8 text-center"] [El.txt "Layout and Spacing Demo"];
25
26 El.p ~at:[classes_attr (tw [
27 Typography.(to_class (font_size `Lg));
28 Color.text (Color.make `Gray ~variant:`V600 ());
29 ]); At.class' "text-center mb-12"] [
30 El.txt "Master the box model, flexbox, and CSS grid with type-safe utilities."
31 ];
32
33 (* Flexbox Examples *)
34 El.section ~at:[At.class' "mb-12"] [
35 El.h2 ~at:[classes_attr (tw [
36 Typography.(to_class (font_size `Xl));
37 Typography.(to_class (font_weight `Semibold));
38 Color.text (Color.make `Gray ~variant:`V700 ());
39 ]); At.class' "mb-8"] [El.txt "Flexbox Layouts"];
40
41 (* Centered content *)
42 El.div ~at:[At.class' "mb-8"] [
43 El.h3 ~at:[classes_attr (tw [
44 Typography.(to_class (font_size `Lg));
45 Typography.(to_class (font_weight `Semibold));
46 Color.text (Color.make `Gray ~variant:`V700 ());
47 ]); At.class' "mb-4"] [El.txt "Centered Content"];
48
49 El.div ~at:[classes_attr (tw [
50 Display.flex;
51 Flexbox.(to_class (justify `Center));
52 Flexbox.(to_class (align_items `Center));
53 Color.bg (Color.make `Blue ~variant:`V100 ());
54 Layout.(to_class (height (Size.rem 8.0)));
55 Effects.rounded_lg;
56 ])] [
57 El.div ~at:[classes_attr (tw [
58 Color.bg Color.white;
59 Spacing.(to_class (p (Size.rem 1.5)));
60 Effects.rounded_md;
61 Effects.shadow_sm;
62 ])] [
63 El.txt "Perfectly Centered Content"
64 ];
65 ];
66 ];
67
68 (* Space between items *)
69 El.div ~at:[At.class' "mb-8"] [
70 El.h3 ~at:[classes_attr (tw [
71 Typography.(to_class (font_size `Lg));
72 Typography.(to_class (font_weight `Semibold));
73 Color.text (Color.make `Gray ~variant:`V700 ());
74 ]); At.class' "mb-4"] [El.txt "Space Between"];
75
76 El.div ~at:[classes_attr (tw [
77 Display.flex;
78 Flexbox.(to_class (justify `Between));
79 Flexbox.(to_class (align_items `Center));
80 Color.bg (Color.make `Green ~variant:`V100 ());
81 Spacing.(to_class (p (Size.rem 1.5)));
82 Effects.rounded_lg;
83 ])] [
84 El.div ~at:[classes_attr (tw [
85 Color.bg Color.white;
86 Spacing.(to_class (p (Size.rem 1.0)));
87 Effects.rounded_md;
88 ])] [El.txt "Left"];
89 El.div ~at:[classes_attr (tw [
90 Color.bg Color.white;
91 Spacing.(to_class (p (Size.rem 1.0)));
92 Effects.rounded_md;
93 ])] [El.txt "Center"];
94 El.div ~at:[classes_attr (tw [
95 Color.bg Color.white;
96 Spacing.(to_class (p (Size.rem 1.0)));
97 Effects.rounded_md;
98 ])] [El.txt "Right"];
99 ];
100 ];
101
102 (* Flex direction example *)
103 El.div [
104 El.h3 ~at:[classes_attr (tw [
105 Typography.(to_class (font_size `Lg));
106 Typography.(to_class (font_weight `Semibold));
107 Color.text (Color.make `Gray ~variant:`V700 ());
108 ]); At.class' "mb-4"] [El.txt "Flex Direction Column"];
109
110 El.div ~at:[classes_attr (tw [
111 Display.flex;
112 Flexbox.(to_class (direction `Col));
113 Spacing.(to_class (gap `All (Size.rem 1.0)));
114 Color.bg (Color.make `Purple ~variant:`V100 ());
115 Spacing.(to_class (p (Size.rem 1.5)));
116 Effects.rounded_lg;
117 ])] [
118 El.div ~at:[classes_attr (tw [
119 Color.bg Color.white;
120 Spacing.(to_class (p (Size.rem 1.0)));
121 Effects.rounded_md;
122 ]); At.class' "text-center"] [El.txt "Item 1"];
123 El.div ~at:[classes_attr (tw [
124 Color.bg Color.white;
125 Spacing.(to_class (p (Size.rem 1.0)));
126 Effects.rounded_md;
127 ]); At.class' "text-center"] [El.txt "Item 2"];
128 El.div ~at:[classes_attr (tw [
129 Color.bg Color.white;
130 Spacing.(to_class (p (Size.rem 1.0)));
131 Effects.rounded_md;
132 ]); At.class' "text-center"] [El.txt "Item 3"];
133 ];
134 ];
135 ];
136
137 (* Grid Examples *)
138 El.section ~at:[At.class' "mb-12"] [
139 El.h2 ~at:[classes_attr (tw [
140 Typography.(to_class (font_size `Xl));
141 Typography.(to_class (font_weight `Semibold));
142 Color.text (Color.make `Gray ~variant:`V700 ());
143 ]); At.class' "mb-8"] [El.txt "CSS Grid Layouts"];
144
145 (* 2-column grid *)
146 El.div ~at:[At.class' "mb-8"] [
147 El.h3 ~at:[classes_attr (tw [
148 Typography.(to_class (font_size `Lg));
149 Typography.(to_class (font_weight `Semibold));
150 Color.text (Color.make `Gray ~variant:`V700 ());
151 ]); At.class' "mb-4"] [El.txt "Two Column Grid"];
152
153 El.div ~at:[classes_attr (tw [
154 Display.grid;
155 Grid.(to_class (template_cols (`Cols 2)));
156 Spacing.(to_class (gap `All (Size.rem 1.5)));
157 ])] (List.init 4 (fun i ->
158 El.div ~at:[classes_attr (tw [
159 Color.bg (Color.make `Red ~variant:`V100 ());
160 Spacing.(to_class (p (Size.rem 1.5)));
161 Effects.rounded_lg;
162 ]); At.class' "text-center"] [
163 El.txt (Printf.sprintf "Grid Item %d" (i + 1))
164 ]
165 ));
166 ];
167
168 (* 3-column grid *)
169 El.div ~at:[At.class' "mb-8"] [
170 El.h3 ~at:[classes_attr (tw [
171 Typography.(to_class (font_size `Lg));
172 Typography.(to_class (font_weight `Semibold));
173 Color.text (Color.make `Gray ~variant:`V700 ());
174 ]); At.class' "mb-4"] [El.txt "Three Column Grid"];
175
176 El.div ~at:[classes_attr (tw [
177 Display.grid;
178 Grid.(to_class (template_cols (`Cols 3)));
179 Spacing.(to_class (gap `All (Size.rem 1.5)));
180 ])] (List.init 6 (fun i ->
181 El.div ~at:[classes_attr (tw [
182 Color.bg (Color.make `Yellow ~variant:`V100 ());
183 Spacing.(to_class (p (Size.rem 1.5)));
184 Effects.rounded_lg;
185 ]); At.class' "text-center"] [
186 El.txt (Printf.sprintf "Item %d" (i + 1))
187 ]
188 ));
189 ];
190 ];
191
192 (* Spacing Examples *)
193 El.section [
194 El.h2 ~at:[classes_attr (tw [
195 Typography.(to_class (font_size `Xl));
196 Typography.(to_class (font_weight `Semibold));
197 Color.text (Color.make `Gray ~variant:`V700 ());
198 ]); At.class' "mb-8"] [El.txt "Spacing System"];
199
200 El.div ~at:[classes_attr (tw [
201 Display.grid;
202 Grid.(to_class (template_cols (`Cols 1)));
203 Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2))))));
204 Spacing.(to_class (gap `All (Size.rem 2.0)));
205 ])] [
206 (* Padding example *)
207 El.div ~at:[classes_attr (tw [
208 Color.bg (Color.make `Indigo ~variant:`V100 ());
209 Spacing.(to_class (p (Size.rem 1.5)));
210 Effects.rounded_lg;
211 ])] [
212 El.h4 ~at:[classes_attr (tw [
213 Typography.(to_class (font_size `Base));
214 Typography.(to_class (font_weight `Semibold));
215 Color.text (Color.make `Gray ~variant:`V700 ());
216 ]); At.class' "mb-3"] [El.txt "Padding Example"];
217 El.div ~at:[classes_attr (tw [
218 Color.bg Color.white;
219 Spacing.(to_class (p (Size.rem 2.0)));
220 Effects.rounded_md;
221 Effects.border;
222 Color.border (Color.make `Gray ~variant:`V200 ());
223 ])] [
224 El.txt "This content has p-8 (2rem padding)"
225 ];
226 ];
227
228 (* Margin example *)
229 El.div ~at:[classes_attr (tw [
230 Color.bg (Color.make `Cyan ~variant:`V100 ());
231 Spacing.(to_class (p (Size.rem 1.5)));
232 Effects.rounded_lg;
233 ])] [
234 El.h4 ~at:[classes_attr (tw [
235 Typography.(to_class (font_size `Base));
236 Typography.(to_class (font_weight `Semibold));
237 Color.text (Color.make `Gray ~variant:`V700 ());
238 ]); At.class' "mb-3"] [El.txt "Margin Example"];
239 El.div ~at:[classes_attr (tw [
240 Color.bg Color.white;
241 Spacing.(to_class (p (Size.rem 1.0)));
242 Spacing.(to_class (m (Size.rem 1.5)));
243 Effects.rounded_md;
244 Effects.border;
245 Color.border (Color.make `Gray ~variant:`V200 ());
246 ])] [
247 El.txt "This box has m-6 (1.5rem margin) from its container"
248 ];
249 ];
250 ];
251 ];
252 ];
253 ];
254 ] in
255 html_doc
256
257let () =
258 (* Output HTML to stdout *)
259 let html_doc = create_layout_demo () in
260 print_string (El.to_string ~doctype:true html_doc)