Chat example: catalog-only Tailwind classes (e.g. `grid-cols-4`) have no CSS

Author: adhamali450Created Jul 23, 2026Updated Jul 23, 2026

Description

In the chat example, model-generated components can render with correct class names but no styling. This happens for any class that only occurs inside @json-render/shadcn and nowhere in the example's own source.

Tailwind v4 auto source detection skips node_modules and gitignored dist output, so utilities that live only in the built catalog are never generated. Other examples handle this with @source "../../../packages/shadcn/src/**/*.tsx" (no-ai, next-website-builder, mcp). chat is missing that line.

The streamdown directive in chat and harness-chat is also broken. @source "../../../node_modules/streamdown/dist/*.js" resolves to the repo root node_modules, which is empty under pnpm, so the glob matches nothing. apps/web uses the correct ../node_modules form.

Reproduction

  1. pnpm install, pnpm build, run the chat example
  2. Prompt: "create a 4x4 grid of metric cards"
  3. Grid renders as a single column. Devtools shows grid grid-cols-4 on the element but no .grid-cols-4 rule in the CSS.

Same cause, other prompts: Stack justify="around" (missing justify-around), Card maxWidth="sm" (missing sm:min-w-[280px]).

Fix

Add the @source line used by the other examples and correct the streamdown paths. PR incoming.