Vite Plugin Does Not Work With Storybook Vite

[mwood23]

What version of Tailwind CSS are you using?

4.0.7

What build tool (or framework if it abstracts the build tool) are you using?

Storybook Vite (8.5.8)

What version of Node.js are you using?

v22.12.0

What browser are you using?

N/A

What operating system are you using?

macOS

Describe your issue

Tried to integrate the Vite plugin with tailwind V4 in Storybook Vite (8.5.8) and hit this error:

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 /Users/marcuswood/moonshot/platform/node_modules/@tailwindcss/vite/package.json
    at exportsNotFound (node:internal/modules/esm/resolve:314:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:605:13)
    at resolveExports (node:internal/modules/cjs/loader:640:36)

Storybook config

import { StorybookConfig } from '@storybook/react-vite';
import tailwindcss from '@tailwindcss/vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  framework: '@storybook/react-vite',
  staticDirs: ['./public'],
  viteFinal: (config) => {
    config.plugins?.push(tailwindcss());

    return config;
  },
  core: {
    builder: '@storybook/builder-vite',
  },
};

export default config;

If I add this patch, everything works no problem:

diff --git a/package.json b/package.json
index b2ec5209a1ffc89586176fb2c1fec2f0577112a2..c906c6bf8025ab5cf59b63cfdf4443117b96c62e 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.mts",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
     }
   },
   "dependencies": {

Not sure why this is needed, I keep getting mixed up on the ESM stuff. Looks pretty harmless to add? Filing the issue in case other people run into it!

[Kaifuny]

When I add tailwindcss(), it throws an error:

TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '/Your/Project/Path/packages/ui/\x00/iframe.html'

[skratchdot]

4.0.7 works for me, but with 4.0.8 i see the same error as @Kaifuny when using storybook.

[unional]

Related discussion: #16451

[unional]

Regarding the origin error:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /Users/marcuswood/moonshot/platform/node_modules/@tailwindcss/vite/package.json
    at exportsNotFound (node:internal/modules/esm/resolve:314:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:605:13)
    at resolveExports (node:internal/modules/cjs/loader:640:36)

I believe Storybook is still using the CJS API, thus the issue.

[unional]

FYI, currently, tailwindcss, storybook, and vitest is in a deadlock:

• tailwindcss@4.0.6-7 is not working (styles not applied) when running vitest with storybook integration.
• tailwindcss@4.0.8 crashing storybook

I'm using storybook@8.4.7, because storybook@8.5 causing tests in vitest not executed: storybookjs/storybook#30307

Update: for now, I get around this by:

• use latest storybook and tailwindcss@4.0.7, including @tailwindcss/*
• use vite@6.0.9
• use @tailwindcss/vite@4.0.8 specifically by alias: "twv": "npm:@tailwindcss/vite@4.0.8"

[fnumatic]

same issue here
tailwindcss 4.0.7 is working, 4.0.8 is not.
"Storybook is still using the CJS API" -> thats maybe the main problem

Storybook is still using the CJS API

[pcoterecollective]

Same error (Storybook 8.5.8, Vite 6.1.0):
Unhandled promise rejection: TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '<project-path>/\x00/iframe.html'

[philipp-spiess]

Seems like there are two different errors being talked about in this issue. Let's use #16785 for the "must be a string, Uint8Array, or URL without null bytes" error and keep this issue for the "No "exports" main defined in" one. Thanks!

[magic9701]

Version:
"tailwindcss": "^4.1.5",
"@tailwindcss/vite": "^4.1.5",
"vite": "^6.3.5",
"storybook": "^8.6.12"

also facing tailwind css not working on storybook

I found another way to slove it
I add this line in .storybook/preview.ts
import '@/index.css'

It was written in the doc but took me couple hours to find this😅
Hope this saves you some time.
https://storybook.js.org/recipes/tailwindcss