Tailwind classes in OCaml
anil.recoil.org
1(* Index: Tailwind OCaml Examples - Your Learning Journey *)
2
3let print_example_info num title description features =
4 Printf.printf "📚 %02d. %s\n" num title;
5 Printf.printf " %s\n" description;
6 Printf.printf " Features: %s\n\n" (String.concat ", " features)
7
8let () =
9 Printf.printf "🎨 Tailwind OCaml Examples - Learning Journey\n";
10 Printf.printf "===========================================\n\n";
11
12 Printf.printf "Welcome to the Tailwind OCaml examples! These examples are designed as a\n";
13 Printf.printf "progressive tutorial, starting with basic concepts and building up to\n";
14 Printf.printf "complex, real-world applications.\n\n";
15
16 Printf.printf "📋 Recommended Learning Path:\n";
17 Printf.printf "-----------------------------\n\n";
18
19 print_example_info 1 "Hello Tailwind"
20 "Your first Tailwind OCaml program. Learn the basics of creating and using classes."
21 ["tw function"; "Color system"; "Typography basics"; "HTML integration"];
22
23 print_example_info 2 "Colors and Typography"
24 "Deep dive into the type-safe color system and typography utilities."
25 ["Color variants"; "Font sizes"; "Font weights"; "Text decorations"];
26
27 print_example_info 3 "Layout and Spacing"
28 "Master the box model, flexbox, and CSS grid with type-safe utilities."
29 ["Flexbox"; "CSS Grid"; "Spacing system"; "Display utilities"];
30
31 print_example_info 4 "Responsive Design"
32 "Build adaptive layouts that work across all device sizes."
33 ["Breakpoints"; "Mobile-first"; "Responsive utilities"; "Screen adaptation"];
34
35 print_example_info 5 "Effects and Variants"
36 "Add visual polish with shadows, transitions, and interactive states."
37 ["Shadows"; "Borders"; "Hover states"; "Transitions"; "Focus states"];
38
39 print_example_info 6 "Patterns and Components"
40 "Learn reusable layout patterns and component composition techniques."
41 ["Built-in patterns"; "Layout composition"; "Component design"; "Reusability"];
42
43 print_example_info 7 "Comprehensive Showcase"
44 "A complete application demonstrating all features working together."
45 ["Full-page layout"; "Tailwind v4"; "CSS generation"; "Production-ready"];
46
47 Printf.printf "🚀 Getting Started:\n";
48 Printf.printf "-------------------\n\n";
49
50 Printf.printf "1. Build all examples:\n";
51 Printf.printf " dune build examples/\n\n";
52
53 Printf.printf "2. Run individual examples:\n";
54 Printf.printf " dune exec examples/01_hello_tailwind.exe\n";
55 Printf.printf " dune exec examples/02_colors_and_typography.exe\n";
56 Printf.printf " # ... and so on\n\n";
57
58 Printf.printf "3. Each example generates HTML files you can open in your browser:\n";
59 Printf.printf " 01_hello_tailwind.html\n";
60 Printf.printf " 02_colors_and_typography.html\n";
61 Printf.printf " # ... etc\n\n";
62
63 Printf.printf "💡 Pro Tips:\n";
64 Printf.printf "------------\n\n";
65
66 Printf.printf "• Run examples in order for the best learning experience\n";
67 Printf.printf "• Open the generated HTML files to see visual results\n";
68 Printf.printf "• Read the source code to understand the patterns\n";
69 Printf.printf "• Experiment by modifying the examples\n";
70 Printf.printf "• The comprehensive showcase generates Tailwind v4 CSS\n\n";
71
72 Printf.printf "📚 Additional Resources:\n";
73 Printf.printf "------------------------\n\n";
74
75 Printf.printf "• README.md - Complete library documentation\n";
76 Printf.printf "• lib/tailwind/ - Core library source code\n";
77 Printf.printf "• lib/tailwind-html/ - HTML component library\n";
78 Printf.printf "• Tailwind CSS docs: https://tailwindcss.com/docs\n\n";
79
80 Printf.printf "Happy coding! 🎉\n"