Tailwind classes in OCaml
anil.recoil.org
1(* Example 06: Patterns and Components - Reusable Layout Patterns *)
2
3open Htmlit
4open Tailwind
5
6let classes_attr tailwind_classes =
7 At.class' (Tailwind.to_string tailwind_classes)
8
9let create_patterns_demo () =
10 (* Create comprehensive patterns 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 "Patterns and Components"];
16 El.link ~at:[At.rel "stylesheet"; At.href "patterns_and_components_06.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 "Patterns and Components Demo"];
25
26 (* Container Pattern *)
27 El.section ~at:[At.class' "mb-12"] [
28 El.h2 ~at:[classes_attr (tw [
29 Typography.(to_class (font_size `Xl));
30 Typography.(to_class (font_weight `Semibold));
31 Color.text (Color.make `Gray ~variant:`V700 ());
32 ]); At.class' "mb-6"] [El.txt "Container Pattern"];
33
34 El.div ~at:[classes_attr (tw [Patterns.container ()]); At.class' "bg-white rounded-lg shadow-sm p-6"] [
35 El.p ~at:[classes_attr (tw [
36 Color.text (Color.make `Gray ~variant:`V600 ());
37 ])] [El.txt "This content is inside a container pattern that centers content and provides responsive padding."];
38 ];
39 ];
40
41 (* Card Pattern *)
42 El.section ~at:[At.class' "mb-12"] [
43 El.h2 ~at:[classes_attr (tw [
44 Typography.(to_class (font_size `Xl));
45 Typography.(to_class (font_weight `Semibold));
46 Color.text (Color.make `Gray ~variant:`V700 ());
47 ]); At.class' "mb-6"] [El.txt "Card Pattern"];
48
49 El.div ~at:[At.class' "grid grid-cols-1 md:grid-cols-3 gap-6"] [
50 El.div ~at:[classes_attr (tw [Patterns.card]); At.class' "p-6"] [
51 El.h3 ~at:[classes_attr (tw [
52 Typography.(to_class (font_size `Lg));
53 Typography.(to_class (font_weight `Semibold));
54 Color.text (Color.make `Gray ~variant:`V800 ());
55 ]); At.class' "mb-2"] [El.txt "Card One"];
56 El.p ~at:[classes_attr (tw [
57 Color.text (Color.make `Gray ~variant:`V600 ());
58 ])] [El.txt "This is a card using the built-in card pattern."];
59 ];
60
61 El.div ~at:[classes_attr (tw [Patterns.card]); At.class' "p-6"] [
62 El.h3 ~at:[classes_attr (tw [
63 Typography.(to_class (font_size `Lg));
64 Typography.(to_class (font_weight `Semibold));
65 Color.text (Color.make `Gray ~variant:`V800 ());
66 ]); At.class' "mb-2"] [El.txt "Card Two"];
67 El.p ~at:[classes_attr (tw [
68 Color.text (Color.make `Gray ~variant:`V600 ());
69 ])] [El.txt "Another card with the same styling pattern applied."];
70 ];
71
72 El.div ~at:[classes_attr (tw [Patterns.card]); At.class' "p-6"] [
73 El.h3 ~at:[classes_attr (tw [
74 Typography.(to_class (font_size `Lg));
75 Typography.(to_class (font_weight `Semibold));
76 Color.text (Color.make `Gray ~variant:`V800 ());
77 ]); At.class' "mb-2"] [El.txt "Card Three"];
78 El.p ~at:[classes_attr (tw [
79 Color.text (Color.make `Gray ~variant:`V600 ());
80 ])] [El.txt "A third card demonstrating consistent styling."];
81 ];
82 ];
83 ];
84
85 (* Flex Center Pattern *)
86 El.section ~at:[At.class' "mb-12"] [
87 El.h2 ~at:[classes_attr (tw [
88 Typography.(to_class (font_size `Xl));
89 Typography.(to_class (font_weight `Semibold));
90 Color.text (Color.make `Gray ~variant:`V700 ());
91 ]); At.class' "mb-6"] [El.txt "Flex Center Pattern"];
92
93 El.div ~at:[classes_attr (tw [Patterns.flex_center]); At.class' "bg-blue-50 rounded-lg h-32"] [
94 El.p ~at:[classes_attr (tw [
95 Color.text (Color.make `Blue ~variant:`V600 ());
96 Typography.(to_class (font_weight `Medium));
97 ])] [El.txt "This content is perfectly centered using flex_center pattern"];
98 ];
99 ];
100
101 (* Stack Pattern *)
102 El.section ~at:[At.class' "mb-12"] [
103 El.h2 ~at:[classes_attr (tw [
104 Typography.(to_class (font_size `Xl));
105 Typography.(to_class (font_weight `Semibold));
106 Color.text (Color.make `Gray ~variant:`V700 ());
107 ]); At.class' "mb-6"] [El.txt "Stack Pattern"];
108
109 El.div ~at:[classes_attr (tw [Patterns.stack ~gap:(Size.rem 1.0) ()]); At.class' "bg-white rounded-lg shadow-sm p-6"] [
110 El.div ~at:[classes_attr (tw [
111 Color.bg (Color.make `Green ~variant:`V50 ());
112 Spacing.(to_class (p (Size.rem 1.0)));
113 Effects.rounded_md;
114 ])] [El.txt "Stack Item 1"];
115
116 El.div ~at:[classes_attr (tw [
117 Color.bg (Color.make `Blue ~variant:`V50 ());
118 Spacing.(to_class (p (Size.rem 1.0)));
119 Effects.rounded_md;
120 ])] [El.txt "Stack Item 2"];
121
122 El.div ~at:[classes_attr (tw [
123 Color.bg (Color.make `Purple ~variant:`V50 ());
124 Spacing.(to_class (p (Size.rem 1.0)));
125 Effects.rounded_md;
126 ])] [El.txt "Stack Item 3"];
127 ];
128 ];
129
130 (* Inline Stack Pattern *)
131 El.section [
132 El.h2 ~at:[classes_attr (tw [
133 Typography.(to_class (font_size `Xl));
134 Typography.(to_class (font_weight `Semibold));
135 Color.text (Color.make `Gray ~variant:`V700 ());
136 ]); At.class' "mb-6"] [El.txt "Inline Stack Pattern"];
137
138 El.div ~at:[classes_attr (tw [Patterns.inline_stack ~gap:(Size.rem 1.0) ()]); At.class' "bg-white rounded-lg shadow-sm p-6"] [
139 El.span ~at:[classes_attr (tw [
140 Color.bg (Color.make `Red ~variant:`V50 ());
141 Color.text (Color.make `Red ~variant:`V600 ());
142 Spacing.(to_class (px (Size.rem 0.75)));
143 Spacing.(to_class (py (Size.rem 0.5)));
144 Effects.rounded_full;
145 Typography.(to_class (font_size `Sm));
146 ])] [El.txt "Tag 1"];
147
148 El.span ~at:[classes_attr (tw [
149 Color.bg (Color.make `Yellow ~variant:`V50 ());
150 Color.text (Color.make `Yellow ~variant:`V600 ());
151 Spacing.(to_class (px (Size.rem 0.75)));
152 Spacing.(to_class (py (Size.rem 0.5)));
153 Effects.rounded_full;
154 Typography.(to_class (font_size `Sm));
155 ])] [El.txt "Tag 2"];
156
157 El.span ~at:[classes_attr (tw [
158 Color.bg (Color.make `Indigo ~variant:`V50 ());
159 Color.text (Color.make `Indigo ~variant:`V600 ());
160 Spacing.(to_class (px (Size.rem 0.75)));
161 Spacing.(to_class (py (Size.rem 0.5)));
162 Effects.rounded_full;
163 Typography.(to_class (font_size `Sm));
164 ])] [El.txt "Tag 3"];
165 ];
166 ];
167 ];
168 ];
169 ] in
170 html_doc
171
172let () =
173 (* Output HTML to stdout *)
174 let html_doc = create_patterns_demo () in
175 let html_string = El.to_string ~doctype:true html_doc in
176 print_string html_string