fix(tailwind): export STREAMDOWN_CLASSES and getSourceInline() for Tailwind v4 prefix support#453
fix(tailwind): export STREAMDOWN_CLASSES and getSourceInline() for Tailwind v4 prefix support#453sleitor wants to merge 3 commits intovercel:mainfrom
Conversation
|
Someone is attempting to deploy a commit to the Vercel Team on Vercel. A member of the Team first needs to authorize it. |
| * Use this list to configure Tailwind v4's `@source inline()` directive when | ||
| * you need a custom prefix. See the README for details. | ||
| */ | ||
| export const STREAMDOWN_CLASSES: readonly string[] = [ |
There was a problem hiding this comment.
There was a problem hiding this comment.
Fixed — added 20 missing utility classes that are actively used in the source but were absent from the array:
-mt-10, [&>p]:inline, [&_svg]:h-auto, [&_svg]:w-auto, [counter-increment:line_0], [counter-reset:line], [li_&]:pl-6, before:content-[counter(line)], bg-[var(--sdm-bg,inherit], bg-[var(--sdm-tbg)], border, dark:bg-[var(--shiki-dark-bg,var(--sdm-bg,inherit)], dark:bg-[var(--shiki-dark-bg,var(--sdm-tbg))], dark:text-[var(--shiki-dark,var(--sdm-c,inherit))], list-decimal, list-disc, list-inside, rounded, sticky, text-[var(--sdm-c,inherit)]
|
Thanks @sleitor but i don't think manually keeping track of all the classnames is the best way to solve, i'm hoping Tailwind have some better way of handling this 😭 |
|
Thanks for the feedback, @haydenbleasel! I did dig into the Tailwind v4 docs — unfortunately there's no native mechanism to handle the prefix case with The problem: when The Tailwind v4 docs actually recommend exactly this approach for classes that can't be picked up by static scanning — Safelisting specific utilities via And notably, tailwind-merge — widely used by shadcn/ui and others — takes the same approach of maintaining an explicit class list internally. It's a well-established pattern, not a fragile one. Happy to be corrected if there's a v4 API I missed! 🙏 |
…ilwind v4 prefix support
…uplicate 'dist' in package.json files Addresses VADE review comments: - STREAMDOWN_CLASSES was missing 20 Tailwind utility classes actively used in source: -mt-10, [&>p]:inline, [&_svg]:h-auto/w-auto, [counter-*:line_0/line], [li_&]:pl-6, before:content-[counter(line)], bg-[var(--sdm-bg,*)], bg-[var(--sdm-tbg)], border, dark:bg/text CSS-var variants, list-decimal/disc/inside, rounded, sticky, text-[var(--sdm-c,inherit)] - package.json: removed duplicate 'dist' entry from files array - tailwind.ts: sort exports (biome organizeImports)
Problem
Fixes #450
When using Tailwind v4's
prefix()option (e.g.prefix(tw)), Tailwind's build-time scanner looks fortw:flex,tw:items-center, etc. in scanned files. However, streamdown's dist files only contain the unprefixed class names (flex,items-center, etc.), so no matching CSS utilities are generated and all styling breaks.Solution
Add a new
streamdown/tailwindentry point that exports:STREAMDOWN_CLASSES– a readonly array of every Tailwind utility class used across streamdown and its official pluginsgetSourceInline(prefix?)– returns a ready-to-paste Tailwind v4@source inline(...)directive with all classes, optionally prefixedUsage with Tailwind v4 prefix
Generate the exact directive with the helper:
node scripts/gen-streamdown-source.js >> app/globals.cssOr use the raw class array in your own tooling:
No-prefix usage unchanged
Users who are not using a prefix are unaffected — they continue to use
@source "../node_modules/streamdown/dist/*.js"as documented.Changes
packages/streamdown/lib/tailwind-classes.ts– new file: exportsSTREAMDOWN_CLASSESandgetSourceInlinepackages/streamdown/tailwind.ts– new entry point re-exporting the helperspackages/streamdown/tsup.config.ts– addstailwind.tsto build entriespackages/streamdown/package.json– adds./tailwindexport conditionpackages/streamdown/README.md– documents Tailwind v4 prefix setup.changeset/fix-tailwind-prefix-scanning.md– patch bump