docs: add code, cjk, math, and mermaid to @source (#430)

* docs: update Tailwind CSS setup instructions to include additional Streamdown modules in README.md

* docs: update FAQ to include additional Streamdown module sources in globals.css

* docs: update Tailwind CSS configuration to include additional Streamdown module sources in getting-started.mdx

* docs: update migration guide to include additional Streamdown module sources in globals.css

* docs: update Tailwind CSS configuration in SKILL.md to include additional Streamdown module sources

* chore: add changeset for @source documentation updates

* docs: update README to include optional Streamdown plugin installation instructions

* docs: update FAQ to include instructions for optional Streamdown plugins in globals.css

* docs: update Tailwind CSS configuration in getting-started.mdx to clarify optional plugin integration

* docs: add Tailwind CSS configuration instructions for @streamdown/code plugin

* docs: update migration guide to include plugin source path instructions for Tailwind CSS

* docs: add Tailwind CSS integration instructions for @streamdown/cjk plugin

* docs: add Tailwind CSS integration instructions for @streamdown/math plugin

* docs: add Tailwind CSS integration instructions for @streamdown/mermaid plugin

* docs: update the changeset

* docs: update Tailwind CSS configuration instructions for clarity

* docs: update links for plugin documentation

Author: aradhyacp

.changeset/all-rabbits-mate.md

@@ -0,0 +1,6 @@
+---
+"streamdown": minor
+---
+
+Clarified Tailwind `@source` configuration for Streamdown and optional plugins.  
+Updated documentation to keep the global `@source` for core `streamdown` only, move plugin `@source` guidance to plugin docs with examples, and add a caveat to include plugin entries only if installed.

apps/website/content/docs/faq.mdx

@@ -64,6 +64,19 @@ Add a `@source` directive to your `globals.css` file with the path to Streamdown
 @source "../node_modules/streamdown/dist/*.js";
 ```
 
+If you install optional plugins, add their matching `@source` lines only for packages you've installed. See the plugin pages for exact paths and examples:
+
+- Code: [/docs/plugins/code](/docs/plugins/code)
+- CJK: [/docs/plugins/cjk](/docs/plugins/cjk)
+- Math: [/docs/plugins/math](/docs/plugins/math)
+- Mermaid: [/docs/plugins/mermaid](/docs/plugins/mermaid)
+
+Example: to include the code plugin, add this to `globals.css` (adjust the relative path as needed):
+
+```css title="globals.css"
+@source "../node_modules/@streamdown/code/dist/*.js";
+```
+
 ### Tailwind v3
 
 Add Streamdown to your `content` array in `tailwind.config.js`:

apps/website/content/docs/getting-started.mdx

@@ -50,6 +50,19 @@ Add the following CSS source directive to your `globals.css` or main CSS file:
 
 The path must be relative from your CSS file to the `node_modules` folder containing `streamdown`. In a standard Next.js project where `globals.css` lives in `app/`, the default path above should work.
 
+If you install optional plugins, add their matching `@source` lines only for packages you've installed. See the plugin pages for exact paths and examples:
+
+- Code: [/docs/plugins/code](/docs/plugins/code)
+- CJK: [/docs/plugins/cjk](/docs/plugins/cjk)
+- Math: [/docs/plugins/math](/docs/plugins/math)
+- Mermaid: [/docs/plugins/mermaid](/docs/plugins/mermaid)
+
+Example: to include the code plugin, add this to `globals.css` (adjust the relative path as needed):
+
+```css title="globals.css"
+@source "../node_modules/@streamdown/code/dist/*.js";
+```
+
 ### Animation styles
 
 If you're using the built-in `animated` prop for streaming animation, import the animation CSS in your app:

apps/website/content/docs/migrate.mdx

@@ -125,6 +125,19 @@ Streamdown uses Tailwind CSS for styling. Add the source path so Tailwind picks
 @source "../node_modules/streamdown/dist/*.js";
 ```
 
+Add plugin `@source` lines only for packages you have installed. For exact paths and examples, see the plugin pages:
+
+- Code: [/docs/plugins/code](/docs/plugins/code)
+- CJK: [/docs/plugins/cjk](/docs/plugins/cjk)
+- Math: [/docs/plugins/math](/docs/plugins/math)
+- Mermaid: [/docs/plugins/mermaid](/docs/plugins/mermaid)
+
+Example (add to `globals.css`):
+
+```css
+@source "../node_modules/@streamdown/code/dist/*.js";
+```
+
 **Tailwind v3** — add to your `tailwind.config.js`:
 
 ```js title="tailwind.config.js"

apps/website/content/docs/plugins/cjk.mdx

@@ -21,6 +21,16 @@ The `@streamdown/cjk` plugin improves handling of CJK (Chinese, Japanese, Korean
 npm install @streamdown/cjk
 ```
 
+## Tailwind CSS (v4)
+
+If you use Tailwind v4, add this to your `globals.css` only when `@streamdown/cjk` is installed:
+
+```css title="globals.css"
+@source "../node_modules/@streamdown/cjk/dist/*.js";
+```
+
+Adjust the path for monorepos so it points to the correct `node_modules` location.
+
 ## Usage
 
 ```tsx title="chat.tsx" lineNumbers

apps/website/content/docs/plugins/code.mdx

@@ -22,6 +22,16 @@ The `@streamdown/code` plugin provides syntax highlighting for code blocks using
 npm install @streamdown/code
 ```
 
+## Tailwind CSS (v4)
+
+If you use Tailwind v4, add this to your `globals.css` only when `@streamdown/code` is installed:
+
+```css title="globals.css"
+@source "../node_modules/@streamdown/code/dist/*.js";
+```
+
+Adjust the path for monorepos so it points to the correct `node_modules` location.
+
 ## Usage
 
 ```tsx

apps/website/content/docs/plugins/math.mdx

@@ -22,6 +22,16 @@ The `@streamdown/math` plugin renders mathematical expressions using [KaTeX](htt
 npm install @streamdown/math
 ```
 
+## Tailwind CSS (v4)
+
+If you use Tailwind v4, add this to your `globals.css` only when `@streamdown/math` is installed:
+
+```css title="globals.css"
+@source "../node_modules/@streamdown/math/dist/*.js";
+```
+
+Adjust the path for monorepos so it points to the correct `node_modules` location.
+
 ## Usage
 
 ```tsx title="chat.tsx" lineNumbers

apps/website/content/docs/plugins/mermaid.mdx

@@ -22,6 +22,16 @@ The `@streamdown/mermaid` plugin renders [Mermaid](https://mermaid.js.org/) diag
 npm install @streamdown/mermaid
 ```
 
+## Tailwind CSS (v4)
+
+If you use Tailwind v4, add this to your `globals.css` only when `@streamdown/mermaid` is installed:
+
+```css title="globals.css"
+@source "../node_modules/@streamdown/mermaid/dist/*.js";
+```
+
+Adjust the path for monorepos so it points to the correct `node_modules` location.
+
 ## Usage
 
 ```tsx title="chat.tsx" lineNumbers

packages/streamdown/README.md

@@ -36,6 +36,15 @@ Then, update your Tailwind `globals.css` to include the following so that Tailwi
 
 The path must be relative from your CSS file to the `node_modules` folder containing `streamdown`. In a standard Next.js project where `globals.css` lives in `app/`, the default path above should work.
 
+If you install optional Streamdown plugins, add their matching `@source` lines from the relevant plugin docs (`/docs/plugins/code`, `/docs/plugins/cjk`, `/docs/plugins/math`, `/docs/plugins/mermaid`). Only include plugin `@source` entries for packages that are actually installed.
+
+Example:
+
+```css
+@source "../node_modules/@streamdown/code/dist/*.js";
+```
+
+
 ### Monorepo setup
 
 In a monorepo (npm workspaces, Turbo, pnpm, etc.), dependencies are typically hoisted to the root `node_modules`. You need to adjust the relative path to point there:
@@ -54,7 +63,7 @@ monorepo/
 @source "../../../node_modules/streamdown/dist/*.js";
 ```
 
-Adjust the number of `../` segments based on where your CSS file lives relative to the root `node_modules`.
+Adjust the number of `../` segments based on where your CSS file lives relative to the root `node_modules`. If you install Streamdown plugins, add their respective `@source` entries only when those packages are installed.
 
 ## Usage
 

skills/streamdown/SKILL.md

@@ -36,6 +36,13 @@ npm install @streamdown/code @streamdown/mermaid @streamdown/math @streamdown/cj
 @source "../node_modules/streamdown/dist/*.js";
 ```
 
+Add plugin `@source` lines **only for packages you have installed** (omitting uninstalled plugins avoids Tailwind errors). See plugin pages for exact paths:
+- Code: `@source "../node_modules/@streamdown/code/dist/*.js";`
+- CJK: `@source "../node_modules/@streamdown/cjk/dist/*.js";`
+- Math: `@source "../node_modules/@streamdown/math/dist/*.js";`
+- Mermaid: `@source "../node_modules/@streamdown/mermaid/dist/*.js";`
+
+
 **Tailwind v3** — add to `tailwind.config.js`:
 ```js
 module.exports = {