Tailwind classes in OCaml
anil.recoil.org
1(* Example 01: Hello Tailwind - Your First Tailwind OCaml Program *)
2
3open Htmlit
4open Tailwind
5
6let classes_attr tailwind_classes =
7 At.class' (Tailwind.to_string tailwind_classes)
8
9let create_page () =
10 let hello_classes = tw [
11 Color.text (Color.make `Blue ~variant:`V600 ());
12 Typography.(to_class (font_size `Xl2));
13 Typography.(to_class (font_weight `Bold));
14 Spacing.(to_class (mb (Size.rem 1.0)));
15 ] in
16
17 let body_classes = tw [
18 Layout.(to_class (min_height Size.screen));
19 Color.bg (Color.make `Gray ~variant:`V50 ());
20 Display.flex;
21 Flexbox.(to_class (align_items `Center));
22 Flexbox.(to_class (justify `Center));
23 Spacing.(to_class (p (Size.rem 2.0)));
24 ] in
25
26 let container_classes = tw [
27 Layout.(to_class (max_width (Size.rem 42.0))); (* max-w-2xl is ~42rem *)
28 Spacing.(to_class (mx `Auto));
29 Typography.(to_class (text_align `Center));
30 ] in
31
32 let paragraph_classes = tw [
33 Color.text (Color.make `Gray ~variant:`V600 ());
34 Spacing.(to_class (mb (Size.rem 1.5)));
35 ] in
36
37 let card_classes = tw [
38 Color.bg Color.white;
39 Effects.rounded_lg;
40 Effects.shadow_sm;
41 Spacing.(to_class (p (Size.rem 1.5)));
42 Typography.(to_class (text_align `Left));
43 ] in
44
45 let subheading_classes = tw [
46 Typography.(to_class (font_size `Lg));
47 Typography.(to_class (font_weight `Semibold));
48 Color.text (Color.make `Gray ~variant:`V800 ());
49 Spacing.(to_class (mb (Size.rem 0.75)));
50 ] in
51
52 let code_block_classes = tw [
53 Color.bg (Color.make `Gray ~variant:`V100 ());
54 Spacing.(to_class (p (Size.rem 0.75)));
55 Effects.rounded_sm;
56 Typography.(to_class (font_size `Sm));
57 Layout.(to_class (overflow `X `Auto));
58 ] in
59
60 let code_classes = tw [
61 Color.text (Color.make `Blue ~variant:`V600 ());
62 ] in
63
64 let section_classes = tw [
65 Spacing.(to_class (mt (Size.rem 2.0)));
66 Spacing.(to_class (gap `Y (Size.rem 1.0)));
67 ] in
68
69 let list_classes = tw [
70 Typography.(to_class (text_align `Left));
71 Spacing.(to_class (gap `Y (Size.rem 0.5)));
72 Color.text (Color.make `Gray ~variant:`V600 ());
73 ] in
74
75 let list_item_classes = tw [
76 Display.flex;
77 Flexbox.(to_class (align_items `Start));
78 ] in
79
80 let checkmark_classes = tw [
81 Color.text (Color.make `Green ~variant:`V500 ());
82 Spacing.(to_class (mr (Size.rem 0.5)));
83 ] in
84
85 let html = El.html [
86 El.head [
87 El.meta ~at:[At.charset "utf-8"] ();
88 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();
89 El.title [El.txt "Hello Tailwind"];
90 El.link ~at:[At.rel "stylesheet"; At.href "hello_tailwind_01.css"] ();
91 ];
92 El.body ~at:[classes_attr body_classes] [
93 El.div ~at:[classes_attr container_classes] [
94 El.h1 ~at:[classes_attr hello_classes] [
95 El.txt "Hello, Tailwind OCaml!"
96 ];
97 El.p ~at:[classes_attr paragraph_classes] [
98 El.txt "This is your first Tailwind OCaml program. ";
99 El.txt "The heading above uses type-safe Tailwind classes."
100 ];
101 El.div ~at:[classes_attr card_classes] [
102 El.h2 ~at:[classes_attr subheading_classes] [
103 El.txt "Generated Classes:"
104 ];
105 El.pre ~at:[classes_attr code_block_classes] [
106 El.code ~at:[classes_attr code_classes] [
107 El.txt (to_string hello_classes)
108 ];
109 ];
110 ];
111 El.div ~at:[classes_attr section_classes] [
112 El.h3 ~at:[classes_attr subheading_classes] [
113 El.txt "What you're learning:"
114 ];
115 El.ul ~at:[classes_attr list_classes] [
116 El.li ~at:[classes_attr list_item_classes] [
117 El.span ~at:[classes_attr checkmark_classes] [El.txt "✓"];
118 El.txt "Using the `tw` function to compose Tailwind classes"
119 ];
120 El.li ~at:[classes_attr list_item_classes] [
121 El.span ~at:[classes_attr checkmark_classes] [El.txt "✓"];
122 El.txt "Type-safe color creation with variants"
123 ];
124 El.li ~at:[classes_attr list_item_classes] [
125 El.span ~at:[classes_attr checkmark_classes] [El.txt "✓"];
126 El.txt "Typography utilities for font size and weight"
127 ];
128 El.li ~at:[classes_attr list_item_classes] [
129 El.span ~at:[classes_attr checkmark_classes] [El.txt "✓"];
130 El.txt "Converting Tailwind classes to HTML attributes"
131 ];
132 ];
133 ];
134 ];
135 ];
136 ] in
137 html
138
139let () =
140 (* Output HTML to stdout *)
141 let html = create_page () in
142 print_string (El.to_string ~doctype:true html)