Tailwind classes in OCaml
anil.recoil.org
1(* Generate index.html page linking to all examples *)
2
3open Htmlit
4open Tailwind_html
5
6let examples = [
7 ("hello_tailwind_01.html", "01. Hello Tailwind",
8 "Your first Tailwind OCaml program with GADT interface",
9 ["Basic concepts"; "Type safety"; "GADT syntax"]);
10
11 ("colors_and_typography_02.html", "02. Colors and Typography",
12 "Type-safe colors and typography with compile-time validation",
13 ["Color variants"; "Typography scale"; "Grid layouts"]);
14
15 ("layout_and_spacing_03.html", "03. Layout and Spacing",
16 "Master CSS Grid, flexbox layouts and spacing with GADT",
17 ["CSS Grid"; "Flexbox"; "Gap utilities"; "Spacing system"]);
18
19 ("responsive_design_04.html", "04. Responsive Design",
20 "Adaptive layouts using GADT interface",
21 ["Mobile-first"; "CSS Grid"; "Responsive cards"]);
22
23 ("effects_and_variants_05.html", "05. Effects and Variants",
24 "Visual effects with shadows, borders, and rounded corners",
25 ["Shadow effects"; "Grid layouts"; "Interactive buttons"]);
26
27 ("patterns_and_components_06.html", "06. Patterns and Components",
28 "Reusable component patterns with GADT",
29 ["Card patterns"; "Button components"; "Form patterns"]);
30
31 ("comprehensive_showcase_07.html", "07. Comprehensive Showcase",
32 "Full application demo with complete UI",
33 ["Header/Footer"; "Hero section"; "Feature grids"]);
34
35 ("button_demo.html", "Button Demo",
36 "Showcase of all button variants and sizes",
37 ["Primary buttons"; "Secondary buttons"; "Outline buttons"]);
38]
39
40let create_index () =
41 let html = El.html [
42 El.head [
43 El.meta ~at:[At.charset "utf-8"] ();
44 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();
45 El.title [txt "Tailwind OCaml Examples - GADT Interface"];
46 El.style [txt {|
47 body { font-family: system-ui, -apple-system, sans-serif; }
48 .example-card { transition: transform 0.2s, box-shadow 0.2s; }
49 .example-card:hover { transform: translateY(-2px); }
50 |}];
51 ];
52 El.body ~at:[classes_attr [
53 min_height screen;
54 bg_color (gray 50);
55 padding (rem 2.0);
56 ]] [
57 container [
58 (* Header *)
59 header ~styles:[
60 text_center;
61 margin_bottom (rem 3.0);
62 ] [
63 h1 ~styles:[
64 font_size `Xl3;
65 font_weight `Bold;
66 text_color (gray 800);
67 margin_bottom (rem 1.0);
68 ] [txt "🎨 Tailwind OCaml Examples"];
69
70 p ~styles:[
71 font_size `Xl;
72 text_color (gray 600);
73 margin_bottom (rem 1.0);
74 ] [txt "Type-safe CSS generation with GADT-based interface"];
75
76 p ~styles:[
77 font_size `Base;
78 text_color (gray 500);
79 ] [txt "Explore examples showcasing the power of compile-time guaranteed styling"];
80 ];
81
82 (* Examples Grid *)
83 div ~styles:[
84 grid;
85 grid_cols 1;
86 gap (rem 1.5);
87 ] (List.map (fun (file, title, desc, features) ->
88 El.a ~at:[At.href file; At.style "text-decoration: none; color: inherit;"] [
89 div ~styles:[
90 bg_color (Tailwind.Color.white);
91 rounded `Lg;
92 shadow `Md;
93 padding (rem 2.0);
94 margin_bottom (rem 1.5);
95 border;
96 border_color (gray 200);
97 transition;
98 ] [
99 (* Title and description *)
100 div ~styles:[margin_bottom (rem 1.0)] [
101 h2 ~styles:[
102 font_size `Xl;
103 font_weight `Semibold;
104 text_color (gray 800);
105 margin_bottom (rem 0.5);
106 ] [txt title];
107
108 p ~styles:[
109 text_color (gray 600);
110 margin_bottom (rem 1.0);
111 ] [txt desc];
112 ];
113
114 (* Feature tags *)
115 div ~styles:[
116 grid;
117 grid_cols 3;
118 gap_x (rem 0.5);
119 gap_y (rem 0.5);
120 ] (List.map (fun feature ->
121 span ~styles:[
122 bg_color (blue 100);
123 text_color (blue 700);
124 padding_x (rem 0.75);
125 padding_y (rem 0.25);
126 rounded `Full;
127 font_size `Sm;
128 font_weight `Medium;
129 margin_right (rem 0.5);
130 margin_bottom (rem 0.5);
131 ] [txt feature]
132 ) features);
133
134 (* View link *)
135 div ~styles:[
136 margin_top (rem 1.0);
137 text_right;
138 ] [
139 span ~styles:[
140 text_color (blue 600);
141 font_weight `Medium;
142 ] [txt "View Example →"];
143 ];
144 ];
145 ]
146 ) examples);
147
148 (* Footer *)
149 footer ~styles:[
150 text_center;
151 margin_top (rem 3.0);
152 padding_y (rem 2.0);
153 border;
154 border_color (gray 200);
155 ] [
156 p ~styles:[
157 text_color (gray 500);
158 font_size `Sm;
159 margin_bottom (rem 0.5);
160 ] [txt "Built with OCaml, Tailwind CSS, and GADT-based type safety"];
161
162 p ~styles:[
163 text_color (gray 400);
164 font_size `Xs;
165 ] [txt "© 2024 Tailwind OCaml - Compile-time guaranteed styling"];
166 ];
167 ];
168 ];
169 ] in
170 html
171
172let () =
173 let html = create_index () in
174 print_string (El.to_string ~doctype:true html)