vercel-labs / vercel-labs/json-render

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

Open
#312 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
16.8k
Forks
901
Avg merge
3h 14m
Merged PRs (30d)
4

Description

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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in the Tailwind directives for the chat and harness-chat examples, comparing their source paths with no-ai, next-website-builder, mcp, and apps/web. Run pnpm install and pnpm build, then reproduce the 4x4 metric-card prompt. Done means catalog-only utilities such as grid-cols-4 and the streamdown styles are present in the generated CSS.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss, typescript
Domain
build-system, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.