pnpm storybook / pnpm storybook:build error, The tailwindcss plugin is missing (Cannot apply unknown utility class)
- Dominant language
- TypeScript
- Stars
- 156k
- Forks
- 24.6k
- Avg merge
- 22h 9m
- Merged PRs (30d)
- 610
Description
### Self Checks
- [x] I have read the [Contributing Guide](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) and [Language Policy](https://github.com/langgenius/dify/issues/1542).
- [x] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general).
- [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones.
- [x] I confirm that I am using English to submit this report, otherwise it will be closed.
- [x] ใไธญๆ็จๆท & Non English Userใ่ฏทไฝฟ็จ่ฑ่ฏญๆไบค๏ผๅฆๅไผ่ขซๅ
ณ้ญ ๏ผ๏ผ
- [x] Please do not modify this template :) and fill in all the required fields.
### Dify version
1.15.0
### Cloud or Self Hosted
Self Hosted (Docker), Self Hosted (Source)
### Steps to reproduce
```bash
cd web
pnpm storybook
```
When running Storybook in the `web` package, Storybook fails during CSS compilation with the following error:
```text
root@2f14e719cfe9:/workspace/dify/web# pnpm storybook
$ storybook dev -p 6006
โ storybook v10.4.6
โ
โ Starting...
โ
โฒ No story files found for the specified pattern:
โ features/**/*.stories.@(js|jsx|mjs|ts|tsx)
โ
โฒ Vite The plugin "vite-tsconfig-paths" is detected. Vite now supports tsconfig
โ paths resolution natively via the resolve.tsconfigPaths option. You can remove
โ the plugin and set resolve.tsconfigPaths: true in your Vite config instead.
โ Vite Re-optimizing dependencies because vite config has changed
โ
โ Change detection failed to start: entry.replacement.replace is not a function
โ โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ Storybook ready! โ
โ โ โ
โ โ - Local: http://localhost:6006/ โ
โ โ - On your network: http://127.0.0.1:6006/ โ
โ โ โ
โ โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โ
โ 2.46 s for manager and 16 s for preview
Ignoring option 'p': not supported for code.
(node:50958) [DEP0169] DeprecationWarning: `url.parse()` behavior is not standardized and prone to errors that have security implications. Use the WHATWG URL API instead. CVEs are not issued for `url.parse()` vulnerabilities.
(Use `node --trace-deprecation ...` to show where the warning was created)
โ Vite [optimizer] scanning dependencies...
โ Vite [optimizer] bundling dependencies...
Error: Cannot apply unknown utility class `text-text-tertiary`
at ignore-listed frames
โ
โ Vite Internal server error: [postcss] tailwindcss:
โ ./.storybook/storybook.css:1:1: Cannot apply unknown utility class
โ `text-text-tertiary`
โ Plugin: vite:css
โ File: ./.storybook/storybook.css:1:0
โ 1 | @import '../app/styles/tailwind-core.css';
โ | ^
โ 2 |
โ 3 | @source '../app';
โ at Input.error
โ (/workspace/dify/node_modules/.pnpm/postcss@8.5.15/node_modules/postcss/lib/input.js:135:16)
โ at Root.error
โ (/workspace/dify/node_modules/.pnpm/postcss@8.5.15/node_modules/postcss/lib/node.js:146:32)
โ at Object.Once
โ (/workspace/dify/node_modules/.pnpm/@tailwindcss+postcss@4.3.1/node_modules/@tailwindcss/postcss/dist/index.js:10:6918)
โ at async LazyResult.runAsync
โ (/workspace/dify/node_modules/.pnpm/postcss@8.5.15/node_modules/postcss/lib/lazy-result.js:293:11)
โ at async runPostCSS
โ (file:///workspace/dify/node_modules/.pnpm/@voidzero-dev+vite-plus-core@0.2.1_@types+node@25.9.4_esbuild@0.28.1_jiti@2.7.0_tsx@4.22.4_typescript@6.0.3_yaml@2.9.0/node_modules/@voidzero-dev/vite-plus-core/dist/vite/node/chunks/node.js:26740:19)
โ at async compilePostCSS
โ (file:///workspace/dify/node_modules/.pnpm/@voidzero-dev+vite-plus-core@0.2.1_@types+node@25.9.4_esbuild@0.28.1_jiti@2.7.0_tsx@4.22.4_typescript@6.0.3_yaml@2.9.0/node_modules/@voidzero-dev/vite-plus-core/dist/vite/node/chunks/node.js:26724:6)
โ at async compileCSS
โ (file:///workspace/dify/node_modules/.pnpm/@voidzero-dev+vite-plus-core@0.2.1_@types+node@25.9.4_esbuild@0.28.1_jiti@2.7.0_tsx@4.22.4_typescript@6.0.3_yaml@2.9.0/node_modules/@voidzero-dev/vite-plus-core/dist/vite/node/chunks/node.js:26654:26)
โ at async TransformPluginContext.handler
โ (file:///workspace/dify/node_modules/.pnpm/@voidzero-dev+vite-plus-core@0.2.1_@types+node@25.9.4_esbuild@0.28.1_jiti@2.7.0_tsx@4.22.4_typescript@6.0.3_yaml@2.9.0/node_modules/@voidzero-dev/vite-plus-core/dist/vite/node/chunks/node.js:26162:47)
โ at async EnvironmentPluginContainer.transform
โ (file:///workspace/dify/node_modules/.pnpm/@voidzero-dev+vite-plus-core@0.2.1_@types+node@25.9.4_esbuild@0.28.1_jiti@2.7.0_tsx@4.22.4_typescript@6.0.3_yaml@2.9.0/node_modules/@voidzero-dev/vite-plus-core/dist/vite/node/chunks/node.js:35961:14)
โ at async loadAndTransform
โ (file:///workspace/dify/node_modules/.pnpm/@voidzero-dev+vite-plus-core@0.2.1_@types+node@25.9.4_esbuild@0.28.1_jiti@2.7.0_tsx@4.22.4_typescript@6.0.3_yaml@2.9.0/node_modules/@voidzero-dev/vite-plus-core/dist/vite/node/chunks/node.js:30220:26)
โ
โ Vite Pre-transform error: [postcss] tailwindcss: ./.storybook/storybook.css:1:1:
โ Cannot apply unknown utility class `text-text-tertiary`
โ Plugin: vite:css
โ File: ./.storybook/storybook.css:1:0
โ 1 | @import '../app/styles/tailwind-core.css';
โ | ^
โ 2 |
โ 3 | @source '../app';
```
cause
The Vite configuration disables the Tailwind Vite plugin when running Storybook.
Current code:
```ts
plugins: isStorybook
? [
react(),
]
: [
...
tailwindcss(),
react(),
...
]
```
As a result, Tailwind v4 is not initialized for Storybook, causing semantic utilities such as `text-text-tertiary` to be unavailable during CSS processing.
---
Proposed fix
Include the Tailwind Vite plugin in the Storybook branch as well:
```ts
plugins: isStorybook
? [
tailwindcss(),
react(),
]
: [
...
tailwindcss(),
react(),
...
]
```
After this change, Storybook can correctly process the shared Tailwind CSS entry and the error disappears.
---
Is this the expected configuration?
If not, I'd be happy to open a PR with this change.
## Additional issue with `storybook build`
After adding `tailwindcss()` to the Storybook plugin list, `pnpm storybook` works as expected.
However, `pnpm storybook:build` still fails with another error related to the Vite alias configuration:
```text
โ Failed to convert builtin plugin 'ViteAlias': StringExpected, Failed to convert
โ JavaScript value `Object {"find":{},"replacement":"loro-crdt/base64"}` into rust
โ type `String` on BindingViteAliasPluginAlias.replacement on
โ BindingViteAliasPluginConfig.entries
```
The current Vite configuration contains the following alias:
```ts
resolve: {
alias: [
{
find: /^loro-crdt$/,
replacement: 'loro-crdt/base64',
},
],
}
```
It appears that the Storybook build pipeline (Rolldown via `vite-plus`) currently expects `find` to be a string and does not support `RegExp` aliases, while the Vite dev server accepts this configuration.
I'm not sure whether this is expected behavior from Storybook/Rolldown or if it should be handled in Dify's Storybook configuration, but I wanted to mention it as a separate issue encountered after fixing the Tailwind plugin configuration.
### Possible workaround
A simple workaround is to apply the same `isStorybook` condition used for plugins to the alias configuration:
```ts
resolve: {
tsconfigPaths: true,
alias: isStorybook
? []
: [
{
find: /^loro-crdt$/,
replacement: 'loro-crdt/base64',
},
],
},
```
This allows `pnpm storybook:build` to complete successfully while preserving the existing alias for the main application.
### โ๏ธ Expected Behavior
Storybook starts without any errors in the console, and the UI is accessible at `http://localhost:6006`.
### โ Actual Behavior
Although the Storybook dev server starts successfully, the console reports a Tailwind CSS compilation error.
As a result, the Storybook preview does not render correctly and remains stuck in a loading state.
Contributor guide
Research direction
Start by locating the Vite configuration containing the isStorybook plugin and alias branches, then inspect .storybook/storybook.css and the shared app/styles/tailwind-core.css entry. Run pnpm storybook and pnpm storybook:build from web to reproduce both failures. Done means the Storybook preview renders without the Tailwind utility error and the production build completes without the alias error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript, vite
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100