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

[shiroyasha9]

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

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

[shiroyasha9]

I'm not sure what would be the correct fix for this problem.

Here's what Claude Code suggested:

Possible Solutions

1. Ship a pre-compiled CSS file containing all utility styles streamdown uses, so users don't rely on @source scanning at all
2. Ship a safelist of all class names used internally, so users can add them to their Tailwind config
3. Duplicate class strings in dist with both prefixed and unprefixed variants (so the scanner can find them) - might be a post-build step.