vercel / vercel/streamdown

`prefix` prop does not work - Tailwind scanner cannot detect unprefixed classes in dist files

Open
#450 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
5.6k
Forks
302
Avg merge
3d 19h
Merged PRs (30d)
14

Description

Bug Description

The prefix prop added in PR #408 only solves half the problem. It correctly prefixes class names at runtime in the rendered HTML (e.g. flex becomes tw:flex), but Tailwind's build-time scanner still cannot find those classes because streamdown's dist files contain only unprefixed class strings.

When using Tailwind v4 with prefix(tw), the scanner looks for tw:flex, tw:items-center, etc. in the @source files. Since streamdown's dist JS files only contain flex, items-center, etc., no matching CSS utilities are generated. The result: all styling is completely broken.

Steps to Reproduce
  1. Create a Next.js app with Tailwind CSS v4 and a prefix:
    @import "tailwindcss" prefix(tw);
    @source "../../node_modules/streamdown/dist/*.js";
    @source "../../node_modules/@streamdown/code/dist/*.js";
    
  2. Use the prefix prop as documented:
    <Streamdown plugins={{ code, math, mermaid, cjk }} prefix="tw">
      {content}
    </Streamdown>
    
  3. All styling is broken - no Tailwind utilities are generated
Expected Behavior

When using the prefix prop with a matching Tailwind prefix configuration, all streamdown styling should work correctly. The rendered output should have prefixed class names AND the corresponding CSS utilities should be generated by Tailwind's scanner.

Actual Behavior

The rendered HTML correctly has prefixed class names (e.g. tw:flex, tw:items-center), but Tailwind never generates the CSS for these classes because the scanner only finds unprefixed class names in streamdown's dist files.

Verified by inspecting the dist files:

  • node_modules/streamdown/dist/*.js contains strings like "my-4 flex w-full flex-col gap-2 rounded-xl border" (all unprefixed)
  • Zero occurrences of any prefixed class in the dist files
Image
Code Sample
/* globals.css */
@import "tailwindcss" prefix(tw);
@source "../../node_modules/streamdown/dist/*.js";
@source "../../node_modules/@streamdown/code/dist/*.js";
@source "../../node_modules/@streamdown/math/dist/*.js";
@source "../../node_modules/@streamdown/mermaid/dist/*.js";



// StreamdownRenderer.tsx
import { cjk } from "@streamdown/cjk";
import { code } from "@streamdown/code";
import { math } from "@streamdown/math";
import { mermaid } from "@streamdown/mermaid";
import { Streamdown } from "streamdown";

export const StreamdownRenderer = ({ children }: { children: string }) => {
  return (
    <Streamdown plugins={{ code, math, mermaid, cjk }} prefix="tw">
      {children}
    </Streamdown>
  );
};
Streamdown Version

2.4.0

React Version

19.2.3

Node.js Version

22.19.0

Browser(s)

Chrome

Operating System

macOS

Additional Context

Reproduction repo: https://github.com/shiroyasha9/streamdown-prefix-test (with-prefix branch)

  • with-shadcn branch: everything works correctly without a prefix
  • with-prefix branch: same setup + prefix(tw) in Tailwind + prefix="tw" on Streamdown - all styling breaks

Related: #190, PR #408

Contributor guide

Open the contributing guide

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 by reproducing the failure with the linked with-prefix branch, then inspect the prefix implementation from PR #408 and the generated dist/*.js files referenced by the @source directives in globals.css. Verify that the distributed class strings are discoverable by Tailwind while StreamdownRenderer.tsx still renders prefixed classes and the reproduction's styling works.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, tailwindcss, typescript
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.