CL-5776: Restore app-authored styling via Tailwind v4 build

.github/workflows/ci.yml

@@ -34,6 +34,7 @@ jobs:
       - run: bun run check:killdates
       - run: bun run check:packages
       - run: bun run check:no-product-tenancy
+      - run: bun run check:web-utilities
 
   walking-skeleton:
     runs-on: ubuntu-latest

apps/web/package.json

@@ -33,10 +33,12 @@
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.11.2",
+    "@tailwindcss/vite": "^4.3.3",
     "@types/bun": "catalog:",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.1",
     "@vitejs/plugin-react": "^5.0.0",
+    "tailwindcss": "^4.3.3",
     "typescript": "catalog:",
     "vite": "^7.1.0"
   }

apps/web/src/main.tsx

@@ -1,5 +1,6 @@
 import "@corbits/react-ui/styles.css";
 import "./app.css";
+import "./tailwind.css";
 
 import { StrictMode, useCallback, useEffect, useState } from "react";
 import { createRoot } from "react-dom/client";

apps/web/src/tailwind.css

@@ -0,0 +1,26 @@
+/* The app-authored Tailwind layer. react-ui ships a prebuilt stylesheet
+   (imported in main.tsx before this file) that carries its own theme,
+   preflight, and the utility classes react-ui's components use — but only
+   those. Classes authored in the app and in workspace UI packages (grid
+   auto-fill layouts, artifact kind colors, responsive padding) were dead
+   because nothing generated their CSS. This entry adds a Tailwind v4 build
+   that scans those sources and emits the missing utilities.
+
+   The full `@import "tailwindcss"` is intentional: react-ui's prebuilt
+   theme and preflight land first (same values, built with the same Tailwind
+   v4), so the duplicate declarations are harmless idempotent overrides.
+   The semantic tokens react-ui defines (--primary, --background, …) live in
+   plain :root blocks, not in Tailwind's @theme namespace, so they never
+   collide with the palette variables (--color-blue-500, …) this build
+   introduces for the first time. */
+
+@import "tailwindcss";
+
+/* Workspace UI packages are source-only (no build step): their .tsx files
+   carry className utilities and artifact-ui's kind-color.ts returns palette
+   class strings. Tailwind v4's auto-detection stays inside apps/web, so each
+   package's src tree is added explicitly. */
+@source "../../../packages/artifact-ui/src";
+@source "../../../packages/bench-ui/src";
+@source "../../../packages/chat-ui/src";
+@source "../../../packages/settings-ui/src";

apps/web/test/tailwind-build.test.ts

@@ -0,0 +1,50 @@
+// Guards the Tailwind v4 cutover: known app-authored utilities (grids,
+// artifact kind palette) must appear in the production CSS bundle.
+
+import { readdirSync, readFileSync, existsSync } from "node:fs";
+import path from "node:path";
+import { describe, expect, test } from "bun:test";
+
+const WEB_ROOT = path.resolve(import.meta.dir, "..");
+const DIST_ASSETS = path.join(WEB_ROOT, "dist/assets");
+
+function builtCss(): string {
+  if (!existsSync(DIST_ASSETS)) {
+    throw new Error(
+      "apps/web/dist/assets missing — run `bun run build` in apps/web first",
+    );
+  }
+  const file = readdirSync(DIST_ASSETS).find((name) => name.endsWith(".css"));
+  if (file === undefined) {
+    throw new Error("no CSS asset under apps/web/dist/assets");
+  }
+  return readFileSync(path.join(DIST_ASSETS, file), "utf8");
+}
+
+describe("Tailwind production CSS", () => {
+  test("emits grid auto-fill utilities used by Agents and Library", () => {
+    const css = builtCss();
+    expect(css).toContain("grid-cols-");
+    expect(css).toContain("sm\\:px-7");
+  });
+
+  test("emits artifact kind palette classes", () => {
+    const css = builtCss();
+    for (const color of [
+      "bg-blue-500",
+      "bg-emerald-500",
+      "bg-amber-500",
+      "bg-violet-500",
+      "bg-rose-500",
+      "bg-cyan-500",
+    ]) {
+      expect(css).toContain(color);
+    }
+  });
+
+  test("emits sizing utilities used on agent cards", () => {
+    const css = builtCss();
+    expect(css).toContain("w-fit");
+    expect(css).toContain("min-h-");
+  });
+});

apps/web/vite.config.ts

@@ -5,10 +5,11 @@
 // `vite dev` proxies /api to a locally running hub so the interface can be
 // developed against real data without a build step.
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   server: {
     proxy: {
       "/api": process.env.BASE_URL ?? "http://localhost:3000",

package.json

@@ -24,7 +24,8 @@
     "check:deletion": "bun run scripts/checks/deletion.ts",
     "check:killdates": "bun run scripts/checks/killdates.ts",
     "check:packages": "bun run scripts/checks/packages.ts",
-    "check:no-product-tenancy": "bun run scripts/checks/no-product-tenancy.ts"
+    "check:no-product-tenancy": "bun run scripts/checks/no-product-tenancy.ts",
+    "check:web-utilities": "bun run scripts/checks/web-tailwind-utilities.ts"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.0",