Streamdown Tailwind @source in monorepos
TL;DR
- In non-monorepos, add an
@sourceentry that points at your localnode_modules/streamdown/dist/*.js.- In monorepos, do the same, but point
@sourceat the hoistednode_modules(often repo root).- If Tailwind misses Streamdown's distributed JS, code blocks render almost one colour.
- If token spans exist but colours look flat, your scan path is probably wrong.
In a non-monorepo (no hoisting), you usually only need to point Tailwind at Streamdown's distributed JS from the CSS file that imports Tailwind (often app/globals.css). Adjust the relative path to match your file location:
In monorepos, node_modules is often hoisted to the repo root, so that same @source needs a different relative path.
If your globals.css is at apps/web/app/globals.css and node_modules is hoisted to the repo root, add:
The relative path is from your CSS file to the hoisted node_modules.
Streamdown docs already mention importing Streamdown styles. The non-obvious part in monorepos is that Tailwind's source scanning path changes because dependencies are hoisted.
When @source points to the wrong location (or is missing), utility classes used by Streamdown token rendering are not generated. The result is code blocks that look mostly unhighlighted.
Why this happens
Streamdown's code rendering relies on Tailwind utilities generated from package source. If Tailwind does not see those class names during scanning, they never make it into output CSS.
Common symptoms:
- code blocks render, but token colors look flat
- light/dark token differences barely show
- no build errors, just weak syntax highlighting
How to verify quickly
- Inspect the code block in DevTools.
- Confirm Streamdown markup is present (e.g.
data-streamdown="code-block-body"). - If token spans exist but computed styles are nearly identical, check your
@sourcepath first.
Lesson learned
With Streamdown + Tailwind in monorepos, path correctness matters more than it seems. Use a CSS-relative @source path to hoisted node_modules, then debug dark-mode-specific issues separately.