Skip to content

feat: add Tailwind CSS prefix support#408

Open
sleitor wants to merge 2 commits intovercel:mainfrom
sleitor:feat/tailwind-prefix
Open

feat: add Tailwind CSS prefix support#408
sleitor wants to merge 2 commits intovercel:mainfrom
sleitor:feat/tailwind-prefix

Conversation

@sleitor
Copy link
Contributor

@sleitor sleitor commented Feb 20, 2026

Adds a prefix prop to <Streamdown> that prepends a configurable prefix to all Tailwind utility classes in the rendered output.

This enables seamless integration with Tailwind v4's prefix() feature, where all utilities are namespaced (e.g., tw:flex instead of flex).

Usage

<Streamdown prefix="tw">{content}</Streamdown>

With prefix="tw", all rendered elements will use prefixed classes:

  • flex items-centertw:flex tw:items-center
  • dark:bg-red-500tw:dark:bg-red-500

When no prefix is specified, behavior is unchanged (zero overhead).

Implementation

  • New prefixClasses() utility transforms class strings
  • PrefixContext provides a prefix-aware cn() to all components
  • All internal components consume cn via useCn() hook
  • Prefix is applied after tailwind-merge resolution

Closes #190

@vercel
Copy link
Contributor

vercel bot commented Feb 20, 2026

Someone is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Contributor

@vercel vercel bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional Suggestion:

Double-prefixing of CSS classes (e.g., tw:tw:size-full) when cn() output is passed as className to child components that run their own cn().

Fix on Vercel

When cn() output (e.g. 'tw:size-full') is passed as className to a child
component that also calls cn() with the same prefix, prefixClasses() was
naively prepending the prefix again, producing 'tw:tw:size-full'.

Fix: skip classes that already start with the prefix+colon sentinel.

Add tests for both the all-already-prefixed and mixed cases.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tailwind Prefix Support

1 participant

Comments