pnpm storybook / pnpm storybook:build error, The tailwindcss plugin is missing (Cannot apply unknown utility class)

[Hickays]

Self Checks

• I have read the Contributing Guide and Language Policy.
• This is only for bug report, if you would like to ask a question, please head to Discussions.
• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report, otherwise it will be closed.
• 【中文用户 & Non English User】请使用英语提交，否则会被关闭 ：）
• 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

cd web
pnpm storybook

When running Storybook in the web package, Storybook fails during CSS compilation with the following error:

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:

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:

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:

■  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:

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:

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.

[Harsh23Kashyap]

I'd like to take this one. Will open the PR shortly.

[Harsh23Kashyap]

Opened PR #38536 to fix the Tailwind plugin and the regex alias issue together.