Tailwind classes in OCaml
anil.recoil.org
1(* Example 01: Hello Tailwind - Your First Tailwind OCaml Program *)
2
3open Htmlit
4open Tailwind_html
5
6let create_page () =
7
8 let html = El.html [
9 El.head [
10 El.meta ~at:[At.charset "utf-8"] ();
11 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();
12 El.title [txt "Hello Tailwind"];
13 El.link ~at:[At.rel "stylesheet"; At.href "hello_tailwind_01.css"] ();
14 ];
15 El.body ~at:[classes_attr [
16 min_height screen;
17 bg_color (gray 50);
18 flex;
19 items_center;
20 justify_center;
21 padding (rem 2.0);
22 ]] [
23 container [
24 h1 ~styles:[
25 font_size `Xl2;
26 font_weight `Bold;
27 text_color (blue 600);
28 margin_bottom (rem 1.0);
29 ] [
30 txt "Hello, Tailwind OCaml!"
31 ];
32 p ~styles:[
33 text_color (gray 600);
34 margin_bottom (rem 1.5);
35 ] [
36 txt "This is your first Tailwind OCaml program. ";
37 txt "The heading above uses type-safe Tailwind classes."
38 ];
39 card [
40 h2 ~styles:[
41 font_size `Lg;
42 font_weight `Semibold;
43 text_color (gray 800);
44 margin_bottom (rem 0.75);
45 ] [
46 txt "Generated Classes:"
47 ];
48 El.pre ~at:[classes_attr [
49 bg_color (gray 100);
50 padding (rem 0.75);
51 rounded `Sm;
52 font_size `Sm;
53 ]] [
54 El.code ~at:[classes_attr [
55 text_color (blue 600);
56 ]] [
57 txt "text-blue-600 text-2xl font-bold mb-4"
58 ];
59 ];
60 ];
61 div ~styles:[
62 margin_top (rem 2.0);
63 ] [
64 h2 ~styles:[
65 font_size `Lg;
66 font_weight `Semibold;
67 text_color (gray 700);
68 margin_bottom (rem 1.5);
69 ] [
70 txt "What you're learning:"
71 ];
72 ul ~styles:[
73 text_left;
74 text_color (gray 600);
75 ] [
76 li ~styles:[flex; items_start] [
77 span ~styles:[
78 text_color (green 500);
79 margin_right (rem 0.5);
80 ] [txt "✓"];
81 txt "Using succinct combinator functions"
82 ];
83 li ~styles:[flex; items_start] [
84 span ~styles:[
85 text_color (green 500);
86 margin_right (rem 0.5);
87 ] [txt "✓"];
88 txt "Type-safe color creation with simple functions"
89 ];
90 li ~styles:[flex; items_start] [
91 span ~styles:[
92 text_color (green 500);
93 margin_right (rem 0.5);
94 ] [txt "✓"];
95 txt "Enhanced element functions with styling parameters"
96 ];
97 li ~styles:[flex; items_start] [
98 span ~styles:[
99 text_color (green 500);
100 margin_right (rem 0.5);
101 ] [txt "✓"];
102 txt "Automatic class-to-attribute conversion"
103 ];
104 ];
105 ];
106 ];
107 ];
108 ] in
109 html
110
111let () =
112 (* Output HTML to stdout *)
113 let html = create_page () in
114 print_string (El.to_string ~doctype:true html)