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 (Tailwind.Css.tw [
16 Tailwind.Layout.(to_class (min_height screen));
17 Tailwind.Color.bg (gray 50);
18 flex;
19 items_center;
20 justify_center;
21 Tailwind.Spacing.(to_class (p (rem 2.0)));
22 ])] [
23 container [
24 h1 ~size:`Xl2 ~weight:`Bold ~color:(blue 600) ~mb:(rem 1.0) [
25 txt "Hello, Tailwind OCaml!"
26 ];
27 p_styled ~color:(gray 600) ~mb:(rem 1.5) [
28 txt "This is your first Tailwind OCaml program. ";
29 txt "The heading above uses type-safe Tailwind classes."
30 ];
31 card [
32 h2 ~size:`Lg ~weight:`Semibold ~color:(gray 800) ~mb:(rem 0.75) [
33 txt "Generated Classes:"
34 ];
35 El.pre ~at:[classes_attr (Tailwind.Css.tw [
36 Tailwind.Color.bg (gray 100);
37 Tailwind.Spacing.(to_class (p (rem 0.75)));
38 Tailwind.Effects.rounded_sm;
39 Tailwind.Typography.(to_class (font_size `Sm));
40 Tailwind.Layout.(to_class (overflow `X `Auto));
41 ])] [
42 El.code ~at:[classes_attr (Tailwind.Css.tw [
43 Tailwind.Color.text (blue 600);
44 ])] [
45 txt "text-blue-600 text-2xl font-bold mb-4"
46 ];
47 ];
48 ];
49 div ~classes:(Tailwind.Css.tw [
50 Tailwind.Spacing.(to_class (mt (rem 2.0)));
51 ]) [
52 h2 ~size:`Lg ~weight:`Semibold ~color:(gray 700) ~mb:(rem 1.5) [
53 txt "What you're learning:"
54 ];
55 ul ~classes:(Tailwind.Css.tw [
56 Tailwind.Typography.(to_class (text_align `Left));
57 Tailwind.Spacing.(to_class (gap `Y (rem 0.5)));
58 Tailwind.Color.text (gray 600);
59 ]) [
60 li ~classes:(Tailwind.Css.tw [flex; Tailwind.Flexbox.(to_class (align_items `Start))]) [
61 span ~classes:(Tailwind.Css.tw [
62 Tailwind.Color.text (green 500);
63 Tailwind.Spacing.(to_class (mr (rem 0.5)));
64 ]) [txt "✓"];
65 txt "Using succinct combinator functions"
66 ];
67 li ~classes:(Tailwind.Css.tw [flex; Tailwind.Flexbox.(to_class (align_items `Start))]) [
68 span ~classes:(Tailwind.Css.tw [
69 Tailwind.Color.text (green 500);
70 Tailwind.Spacing.(to_class (mr (rem 0.5)));
71 ]) [txt "✓"];
72 txt "Type-safe color creation with simple functions"
73 ];
74 li ~classes:(Tailwind.Css.tw [flex; Tailwind.Flexbox.(to_class (align_items `Start))]) [
75 span ~classes:(Tailwind.Css.tw [
76 Tailwind.Color.text (green 500);
77 Tailwind.Spacing.(to_class (mr (rem 0.5)));
78 ]) [txt "✓"];
79 txt "Enhanced element functions with styling parameters"
80 ];
81 li ~classes:(Tailwind.Css.tw [flex; Tailwind.Flexbox.(to_class (align_items `Start))]) [
82 span ~classes:(Tailwind.Css.tw [
83 Tailwind.Color.text (green 500);
84 Tailwind.Spacing.(to_class (mr (rem 0.5)));
85 ]) [txt "✓"];
86 txt "Automatic class-to-attribute conversion"
87 ];
88 ];
89 ];
90 ];
91 ];
92 ] in
93 html
94
95let () =
96 (* Output HTML to stdout *)
97 let html = create_page () in
98 print_string (El.to_string ~doctype:true html)