Integration of @tailwindcss/vite with Storybook Causes Vite CJS Deprecation Warning

[fnumatic]

Description

Environment

• Project: Electron application

• Dependencies:

  • Storybook (@storybook/react-vite): [8.5.8]

  • Vite: [6.1.1]

  • Tailwind CSS: [4.0.7]

  • @tailwindcss/vite: [4.0.7]

Problem

I’m working on an Electron app where I use Storybook to test and develop React components styled with Tailwind CSS. Initially, I encountered an issue where Tailwind CSS classes were not being applied to my Storybook stories, even though the CSS file (containing Tailwind directives like @tailwind base;) was loading correctly. This resulted in unstyled components in the Storybook UI, making it unusable for testing my styled components.

The root cause seems to be that Storybook uses its own Vite instance, which doesn’t include the Tailwind CSS plugin by default. As a result, the Tailwind directives were not being processed, and the utility classes were not generated.

Solution

To resolve this, I modified my .storybook/main.ts file to integrate the @tailwindcss/vite plugin into Storybook’s Vite configuration using the viteFinal hook. Here’s the working configuration:

import type { StorybookConfig } from '@storybook/react-vite';
import { resolve } from 'path';
import { mergeConfig } from 'vite';

const config: StorybookConfig = {
  ...
  viteFinal: async (config) => {
    const { default: tailwindcss } = await import('@tailwindcss/vite');
    return mergeConfig(config, {
      plugins: [tailwindcss()],
      resolve: {
        alias: {
          '@renderer': resolve(__dirname, '../src/renderer/src'),
          '@': resolve(__dirname, '../src/renderer/src'),
        },
      },
      assetsInclude: ['/sb-preview/runtime.js'], // Bug workaround, see https://github.com/storybookjs/storybook/issues/25256
    });
  },
};

export default config;

This change successfully processes Tailwind CSS directives, and the utility classes are now applied correctly in my Storybook stories.

Warning Encountered

While this solution works, I receive the following warning in the terminal when running Storybook:

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

This warning appears to stem from the use of CommonJS-style dynamic imports (import()) for @tailwindcss/vite in the viteFinal function. According to the Vite documentation, the CommonJS build of Vite’s Node API is deprecated, and this could pose compatibility issues in future releases.

Additional Notes

When attempting to integrate the Tailwind CSS plugin (@tailwindcss/vite) into a Storybook setup using a normal import in the .storybook/main.ts file, you may encounter the following error:

import type { StorybookConfig } from '@storybook/react-vite';
import { resolve } from 'path';
import { mergeConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

const config: StorybookConfig = {
  ...
  viteFinal: async (config) => {
    //const { default: tailwindcss } = await import('@tailwindcss/vite');
    return mergeConfig(config, {
      plugins: [tailwindcss()],
      resolve: {
        alias: {
          '@renderer': resolve(__dirname, '../src/renderer/src'),
          '@': resolve(__dirname, '../src/renderer/src'),
        },
      },
      assetsInclude: ['/sb-preview/runtime.js'], // Bug workaround, see https://github.com/storybookjs/storybook/issues/25256
    });
  },
};

export default config;

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
SB_CORE-SERVER_0007 (MainFileEvaluationError): Storybook couldn't evaluate your .storybook/main.ts file.

Original error:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /node_modules/@tailwindcss/vite/package.json
    at exportsNotFound (node:internal/modules/esm/resolve:296:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:586:13)
    at resolveExports (node:internal/modules/cjs/loader:639:36)
    at Module._findPath (node:internal/modules/cjs/loader:747:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1234:27)
    at Module._resolveFilename (/node_modules/.pnpm/esbuild-register@3.6.0_esbuild@0.24.0/node_modules/esbuild-register/dist/node.js:4794:36)
    at Module._load (node:internal/modules/cjs/loader:1074:27)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
    at Module.require (node:internal/modules/cjs/loader:1339:12)
    at loadMainConfig (./node_modules/.pnpm/@storybook+core@8.5.8_prettier@3.4.2/node_modules/@storybook/core/dist/common/index.cjs:17550:11)
    at async buildDevStandalone (./node_modules/.pnpm/@storybook+core@8.5.8_prettier@3.4.2/node_modules/@storybook/core/dist/core-server/index.cjs:37165:11)
    at async withTelemetry (./node_modules/.pnpm/@storybook+core@8.5.8_prettier@3.4.2/node_modules/@storybook/core/dist/core-server/index.cjs:35788:12)
    at async dev (./node_modules/.pnpm/@storybook+core@8.5.8_prettier@3.4.2/node_modules/@storybook/core/dist/cli/bin/index.cjs:2591:3)
    at async s.<anonymous> (./node_modules/.pnpm/@storybook+core@8.5.8_prettier@3.4.2/node_modules/@storybook/core/dist/cli/bin/index.cjs:2643:74)

[philipp-spiess]

@fnumatic Hey! Do you mind attaching a repro and sharing which Node version you're using?

[fnumatic]

Sure! I’ll attach a repro and share my Node version soon.

[fnumatic]

node: [v22.8.0]

This is the working example with dynamic import.
https://github.com/fnumatic/vite-tw-storybk
I just get the following warning:

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

This is the non-working example
https://github.com/fnumatic/vite-tw-storybk/tree/error/tailwind-import-issue

 The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
SB_CORE-SERVER_0007 (MainFileEvaluationError): Storybook couldn't evaluate your .storybook/main.ts file.

Original error:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /node_modules/@tailwindcss/vite/package.json
    at exportsNotFound (node:internal/modules/esm/resolve:296:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:586:13)
    at resolveExports (node:internal/modules/cjs/loader:639:36)
    at Module._findPath (node:internal/modules/cjs/loader:747:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1234:27)
    at Module._resolveFilename (/node_modules/.pnpm/esbuild-register@3.6.0_esbuild@0.25.0/node_modules/esbuild-register/dist/node.js:4794:36)
    at Module._load (node:internal/modules/cjs/loader:1074:27)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
    at Module.require (node:internal/modules/cjs/loader:1339:12)
    at loadMainConfig (./node_modules/.pnpm/@storybook+core@8.5.8/node_modules/@storybook/core/dist/common/index.cjs:17550:11)
    at async buildDevStandalone (./node_modules/.pnpm/@storybook+core@8.5.8/node_modules/@storybook/core/dist/core-server/index.cjs:37165:11)
    at async withTelemetry (./node_modules/.pnpm/@storybook+core@8.5.8/node_modules/@storybook/core/dist/core-server/index.cjs:35788:12)
    at async dev (./node_modules/.pnpm/@storybook+core@8.5.8/node_modules/@storybook/core/dist/cli/bin/index.cjs:2591:3)
    at async s.<anonymous> (./node_modules/.pnpm/@storybook+core@8.5.8/node_modules/@storybook/core/dist/cli/bin/index.cjs:2643:74)

[peerknife]

I am experiencing the same thing, although I was on version 4.0.8 of @tailwindcss/vite. The async import does not working for that version strangely (tailwind classes are not producing any styles), so I've downgraded to 4.0.7 until a better implementation / fix is available.

[el-j]

hej, i had the same problem today. i got it working:
@fnumatic @peerknife

instead of doing an import tailwindcss from '@tailwindcss/vite') i do an await, with:

(await import('@tailwindcss/vite')).default()

storybook comes back to life ;)

according to:
storybookjs/storybook#23972 (comment)

but deprecation still stays the same for cjs ;)

[fnumatic]

Yes, thanks. It is essentially the solution i already proposed.