Tailwind classes in OCaml
anil.recoil.org
1(* Example 07: Comprehensive Showcase - Full Application Demo *)
2
3open Htmlit
4open Tailwind
5
6let classes_attr tailwind_classes =
7 At.class' (Tailwind.to_string tailwind_classes)
8
9let create_comprehensive_html_page () =
10 (* Document structure with all features demonstrated *)
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 "Tailwind OCaml - Complete Feature Showcase"];
16 El.link ~at:[At.rel "stylesheet"; At.href "comprehensive_showcase_07.css"] ();
17 ];
18
19 El.body ~at:[classes_attr (Tailwind.tw [
20 Color.bg (Color.make `Gray ~variant:`V50 ());
21 Typography.(to_class (font_size `Base));
22 Typography.(to_class (line_height `Normal));
23 ])] [
24 (* Header with navigation *)
25 El.header ~at:[classes_attr (Tailwind.tw [
26 Color.bg Color.white;
27 Effects.shadow_lg;
28 Effects.border;
29 Color.border (Color.make `Gray ~variant:`V200 ());
30 Patterns.sticky_header;
31 ])] [
32 El.div ~at:[classes_attr (Tailwind.tw [
33 Patterns.container ();
34 Spacing.(to_class (px (Size.rem 1.0)));
35 ])] [
36 El.div ~at:[classes_attr (Tailwind.tw [
37 Display.flex;
38 Flexbox.(to_class (justify `Between));
39 Flexbox.(to_class (align_items `Center));
40 Layout.(to_class (height (Size.rem 4.0)));
41 ])] [
42 (* Brand with gradient text *)
43 El.h1 ~at:[classes_attr (Tailwind.tw [
44 Typography.(to_class (font_size `Xl2));
45 Typography.(to_class (font_weight `Bold));
46 Color.text (Color.make `Blue ~variant:`V600 ());
47 ])] [El.txt "Tailwind OCaml"];
48
49 (* Navigation items with hover effects *)
50 El.nav ~at:[classes_attr (Tailwind.tw [
51 Display.flex;
52 Spacing.(to_class (gap `All (Size.rem 2.0)));
53 Flexbox.(to_class (align_items `Center));
54 ])] [
55 El.a ~at:[At.href "#typography"; classes_attr (Tailwind.tw [
56 Color.text (Color.make `Gray ~variant:`V600 ());
57 Variants.hover (Color.text (Color.make `Gray ~variant:`V900 ()));
58 Effects.transition `All;
59 ])] [El.txt "Typography"];
60 El.a ~at:[At.href "#layout"; classes_attr (Tailwind.tw [
61 Color.text (Color.make `Gray ~variant:`V600 ());
62 Variants.hover (Color.text (Color.make `Gray ~variant:`V900 ()));
63 Effects.transition `All;
64 ])] [El.txt "Layout"];
65 El.a ~at:[At.href "#components"; classes_attr (Tailwind.tw [
66 Color.text (Color.make `Gray ~variant:`V600 ());
67 Variants.hover (Color.text (Color.make `Gray ~variant:`V900 ()));
68 Effects.transition `All;
69 ])] [El.txt "Components"];
70
71 (* CTA Button *)
72 El.button ~at:[classes_attr (Tailwind.tw [
73 Color.bg (Color.make `Blue ~variant:`V600 ());
74 Color.text Color.white;
75 Spacing.(to_class (px (Size.rem 1.0)));
76 Spacing.(to_class (py (Size.rem 0.5)));
77 Effects.rounded_md;
78 Typography.(to_class (font_size `Sm));
79 Typography.(to_class (font_weight `Medium));
80 Variants.hover (Color.bg (Color.make `Blue ~variant:`V700 ()));
81 Effects.transition `All;
82 ])] [El.txt "Get Started"];
83 ];
84 ];
85 ];
86 ];
87
88 (* Main Content *)
89 El.main [
90 (* Hero Section *)
91 El.section ~at:[At.id "hero"; classes_attr (Tailwind.tw [
92 Layout.(to_class (min_height Size.screen));
93 Display.flex;
94 Flexbox.(to_class (align_items `Center));
95 Flexbox.(to_class (justify `Center));
96 Color.bg (Color.make `Gray ~variant:`V900 ());
97 Color.text Color.white;
98 ])] [
99 El.div ~at:[At.class' "text-center container px-8"] [
100 El.h1 ~at:[classes_attr (Tailwind.tw [
101 Typography.(to_class (font_size `Xl5));
102 Typography.(to_class (font_weight `Extrabold));
103 Spacing.(to_class (mb (Size.rem 1.5)));
104 ])] [El.txt "Type-Safe Tailwind CSS"];
105
106 El.p ~at:[classes_attr (Tailwind.tw [
107 Typography.(to_class (font_size `Xl));
108 Color.text (Color.make `Gray ~variant:`V100 ());
109 Spacing.(to_class (mb (Size.rem 2.0)));
110 Typography.(to_class (line_height `Relaxed));
111 ])] [El.txt "Build beautiful, responsive web interfaces with OCaml's type system and Tailwind's utility classes."];
112
113 El.div ~at:[At.class' "flex flex-wrap gap-4 justify-center"] [
114 El.button ~at:[At.class' "btn-primary"] [El.txt "🚀 Get Started"];
115 El.button ~at:[At.class' "btn-ghost text-white hover:bg-white hover:text-gray-900"] [El.txt "📖 View Docs"];
116 ];
117 ];
118 ];
119
120 (* Features Grid *)
121 El.section ~at:[At.class' "section bg-white"] [
122 El.div ~at:[At.class' "container"] [
123 El.h2 ~at:[At.class' "text-3xl font-bold text-center mb-12"] [El.txt "Features"];
124
125 El.div ~at:[At.class' "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"] [
126 (* Feature cards *)
127 El.div ~at:[At.class' "card p-6"] [
128 El.div ~at:[At.class' "w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"] [
129 El.span ~at:[At.class' "text-2xl"] [El.txt "🎨"];
130 ];
131 El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Type-Safe Classes"];
132 El.p ~at:[At.class' "text-gray-600"] [
133 El.txt "Compile-time validation ensures your Tailwind classes are always correct."
134 ];
135 ];
136
137 El.div ~at:[At.class' "card p-6"] [
138 El.div ~at:[At.class' "w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"] [
139 El.span ~at:[At.class' "text-2xl"] [El.txt "⚡"];
140 ];
141 El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Fast Development"];
142 El.p ~at:[At.class' "text-gray-600"] [
143 El.txt "Autocomplete and type hints speed up your development workflow."
144 ];
145 ];
146
147 El.div ~at:[At.class' "card p-6"] [
148 El.div ~at:[At.class' "w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"] [
149 El.span ~at:[At.class' "text-2xl"] [El.txt "🔧"];
150 ];
151 El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Modular Design"];
152 El.p ~at:[At.class' "text-gray-600"] [
153 El.txt "Organized modules for colors, typography, layout, and more."
154 ];
155 ];
156
157 El.div ~at:[At.class' "card p-6"] [
158 El.div ~at:[At.class' "w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4"] [
159 El.span ~at:[At.class' "text-2xl"] [El.txt "📱"];
160 ];
161 El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Responsive Design"];
162 El.p ~at:[At.class' "text-gray-600"] [
163 El.txt "Built-in responsive utilities for all screen sizes."
164 ];
165 ];
166
167 El.div ~at:[At.class' "card p-6"] [
168 El.div ~at:[At.class' "w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4"] [
169 El.span ~at:[At.class' "text-2xl"] [El.txt "🎯"];
170 ];
171 El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Production Ready"];
172 El.p ~at:[At.class' "text-gray-600"] [
173 El.txt "Generate optimized CSS with Tailwind v4 CLI integration."
174 ];
175 ];
176
177 El.div ~at:[At.class' "card p-6"] [
178 El.div ~at:[At.class' "w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"] [
179 El.span ~at:[At.class' "text-2xl"] [El.txt "🚀"];
180 ];
181 El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Modern Workflow"];
182 El.p ~at:[At.class' "text-gray-600"] [
183 El.txt "Integrates seamlessly with dune and modern OCaml tooling."
184 ];
185 ];
186 ];
187 ];
188 ];
189
190 (* Code Example Section *)
191 El.section ~at:[At.class' "section bg-gray-50"] [
192 El.div ~at:[At.class' "container"] [
193 El.h2 ~at:[At.class' "text-3xl font-bold text-center mb-12"] [El.txt "Simple & Intuitive"];
194
195 El.div ~at:[At.class' "max-w-4xl mx-auto"] [
196 El.div ~at:[At.class' "bg-gray-900 rounded-lg p-6 text-white"] [
197 El.pre ~at:[At.class' "text-sm overflow-x-auto"] [
198 El.code [El.txt {|open Tailwind
199
200let button_classes = tw [
201 Color.bg (Color.make `Blue ~variant:`V600 ());
202 Color.text Color.white;
203 Spacing.(to_class (px (Size.rem 1.0)));
204 Spacing.(to_class (py (Size.rem 0.5)));
205 Effects.rounded_md;
206 Typography.(to_class (font_weight `Semibold));
207 Variants.hover (Color.bg (Color.make `Blue ~variant:`V700 ()));
208]
209
210let button =
211 El.button ~at:[At.class' (to_string button_classes)] [
212 El.txt "Click me!"
213 ]|}];
214 ];
215 ];
216 ];
217 ];
218 ];
219 ];
220
221 (* Footer *)
222 El.footer ~at:[At.class' "bg-gray-800 text-white py-12"] [
223 El.div ~at:[At.class' "container text-center"] [
224 El.p ~at:[At.class' "text-lg font-semibold mb-4"] [El.txt "Tailwind OCaml"];
225 El.p ~at:[At.class' "text-gray-300 mb-6"] [
226 El.txt "Type-safe Tailwind CSS for OCaml applications"
227 ];
228 El.div ~at:[At.class' "flex flex-wrap gap-8 justify-center"] [
229 El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [
230 El.txt "Documentation"
231 ];
232 El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [
233 El.txt "GitHub"
234 ];
235 El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [
236 El.txt "Examples"
237 ];
238 El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [
239 El.txt "Support"
240 ];
241 ];
242 ];
243 ];
244 ];
245 ] in
246 html_doc
247
248let () =
249 (* Output HTML to stdout *)
250 let html_doc = create_comprehensive_html_page () in
251 let html_string = El.to_string ~doctype:true html_doc in
252 print_string html_string