Web sample: style with Tw.* Tailwind utilities

Tailwind's preflight resets headings, so the sample now applies explicit
Tw.* classes (composed CssClass values) alongside the generated Site.*
classes, which are trimmed to what Tailwind doesn't cover.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: halicea

samples/Web/Program.cs

@@ -1,43 +1,58 @@
-WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
-WebApplication app = builder.Build();
-
-int counter = 0;
-// a virtual (higher-order) class: expands to "btn btn--accent"
-CssClass accentButton = Site.btn + Site.btnAccent;
-app.MapGet("/", () => Render(
-    Master("Counter",
-        Div(@class(Site.panel),
-           Button("-", @class(accentButton), hxPost("/decrement", target: "#counter")),
-           B(Label(id("counter"), @class(Site.counter), counter)),
-           Button("+", @class(accentButton), hxPost("/increment", target: "#counter")),
-           "|",
-           Button("Reset", @class(Site.btn), hxPost("/reset", target: "#counter"))
-       )
-    )
-));
-
-app.MapPost("increment", () => Render($"{++counter}"));
-app.MapPost("decrement", () => Render($"{--counter}"));
-app.MapPost("reset", () => Render($"{counter = 0}"));
-app.Run();
-static HtmlNode Master(string title, params HtmlNode[] content)
-{
-    return Html(
-        Meta(charset("utf-8")),
-        Head(
-            Title(title),
-            Meta(charset("utf-8")),
-            HtmxImports,
-            CssImports.Inline(Site.Bundle),
-            Script(src("https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"))
-        ),
-        Body(
-            style(fontFamily("sans-serif"), CSS.color("#333")),
-            "how are you",
-            H2(@class(Tw.textCenter, Tw.textSky600, Tw.fontBold, Tw.hover(Tw.underline)), "this is great"),
-            H1(@class(Site.textCenter), title),
-            content,
-            Hr()
-        )
-    );
-}
+WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
+WebApplication app = builder.Build();
+
+int counter = 0;
+
+// Tailwind utilities composed as typed CssClass values (Tw.*), plus the generated Site.* classes
+// from styles/site.css. Both are plain CssClass and can be mixed with `+`.
+CssClass button = Tw.inlineFlex + Tw.itemsCenter + Tw.justifyCenter + Tw.roundedLg + Tw.fontSemibold
+    + Tw.cursorPointer + Tw.transitionColors + Tw.selectNone + Tw.outlineNone + Site.btn;
+CssClass accentButton = button + Tw.w12 + Tw.h12 + Tw.textXl + Tw.bgIndigo600 + Tw.textWhite + Tw.hover(Tw.bgIndigo500) + Site.btnAccent;
+CssClass neutralButton = button + Tw.px5 + Tw.py2 + Tw.textSm + Tw.bgSlate100 + Tw.textSlate700 + Tw.hover(Tw.bgSlate200);
+
+app.MapGet("/", () => Render(
+    Master("Hello world",
+        Div(@class(Tw.bgWhite + Tw.rounded2xl + Tw.shadowLg + Tw.p8 + Tw.maxWSm + Tw.mxAuto + Site.panel),
+            P(@class(Tw.textXs + Tw.uppercase + Tw.trackingWider + Tw.textSlate400 + Tw.mb6 + Tw.textCenter),
+                "htmx counter"),
+            Div(@class(Tw.flex + Tw.itemsCenter + Tw.justifyCenter + Tw.gap4),
+                Button("−", @class(accentButton), hxPost("/decrement", target: "#counter")),
+                Label(id("counter"), @class(Tw.text4xl + Tw.fontBold + Tw.textSlate800 + Tw.w14 + Tw.textCenter + Site.counter), counter),
+                Button("+", @class(accentButton), hxPost("/increment", target: "#counter"))
+            ),
+            Div(@class(Tw.mt6 + Tw.flex + Tw.justifyCenter),
+                Button("Reset", @class(neutralButton), hxPost("/reset", target: "#counter"))
+            )
+        ),
+        P(@class(Tw.mt8 + Tw.textCenter + Tw.textSm + Tw.textSlate500),
+            "Rendered with CC.CSX · styled with ", Code(@class(Tw.fontMono + Tw.textSlate700), "Tw.*"),
+            " and the generated ", Code(@class(Tw.fontMono + Tw.textSlate700), "Site.*"), " classes")
+    )
+));
+
+app.MapPost("increment", () => Render($"{++counter}"));
+app.MapPost("decrement", () => Render($"{--counter}"));
+app.MapPost("reset", () => Render($"{counter = 0}"));
+app.Run();
+
+static HtmlNode Master(string title, params HtmlNode[] content)
+{
+    return Html(lang("en"),
+        Head(
+            Meta(charset("utf-8")),
+            Meta(name("viewport"), ("content", "width=device-width, initial-scale=1")),
+            Title(title),
+            HtmxImports,
+            CssImports.Inline(Site.Bundle),
+            // Dev-only Tailwind v4 browser build. Note: Tailwind's preflight resets headings
+            // (h1 inherits font-size/weight), so give them explicit Tw.* classes.
+            Script(src("https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"))
+        ),
+        Body(@class(Tw.minHScreen + Tw.bgSlate50 + Tw.textSlate800 + Tw.fontSans + Tw.antialiased),
+            Main(@class(Tw.mxAuto + Tw.maxWMd + Tw.px4 + Tw.py16),
+                H1(@class(Tw.text4xl + Tw.fontBold + Tw.trackingTight + Tw.textCenter + Tw.mb8), title),
+                content
+            )
+        )
+    );
+}

samples/Web/styles/site.css

@@ -1,5 +1,6 @@
-.text-center { text-align: center; }
-.counter { font-size: 1.5rem; padding: 0 0.5rem; }
-.btn { padding: 0.25rem 0.75rem; border-radius: 4px; cursor: pointer; }
-.btn--accent { background: #346beb; color: #fff; }
-.panel { max-width: 24rem; margin: 0 auto; }
+/* Project-specific styles that complement the Tailwind utilities (Tw.*) used in Program.cs.
+   Compiled by the CC.CSX.Css source generator into typed `Site.*` constants. */
+.panel { position: relative; }
+.counter { font-variant-numeric: tabular-nums; }
+.btn:active { transform: scale(0.95); }
+.btn--accent { box-shadow: 0 1px 2px rgb(49 46 129 / 0.3); }