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: https://github.com/tailwindlabs/tailwindcss/discussions/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:

• [email protected] is not working (styles not applied) when running vitest with storybook integration.
• [email protected] crashing storybook

I'm using [email protected], because [email protected] causing tests in vitest not executed: https://github.com/storybookjs/storybook/issues/30307

Update: for now, I get around this by:

• use latest storybook and [email protected], including @tailwindcss/*
• use [email protected]
• use @tailwindcss/[email protected] specifically by alias: "twv": "npm:@tailwindcss/[email protected]"

[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!

[YYKTheHusky]

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

[moshie]

The fix for me as it turned out is to add "type": "module" to your package json file

[messenjer]

Hello,

This error is fixed with the new release of Storybook 10 (ESM-only)

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined

With Storybook 10:

Using viteFinal options

import type { StorybookConfig } from '@storybook/vue3-vite';
+ import tailwindcss from '@tailwindcss/vite';

const config: StorybookConfig = {
	stories: ['../stories/**/*.mdx', '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../src/components/**/*.mdx'],
	addons: [
		'@storybook/addon-links',
		'@storybook/addon-a11y',
		'@chromatic-com/storybook',
		'@storybook/addon-docs',
		'@storybook/addon-vitest',
	],
	framework: {
		name: '@storybook/vue3-vite',
		options: {
			docgen: 'vue-component-meta',
		},
	},
	staticDirs: ['../public'],
	async viteFinal(config) {
		const { mergeConfig } = await import('vite');
		return mergeConfig(config, {
+			plugins: [tailwindcss()],
		});
	},
};
export default config;

Versus Storybook 9

import type { StorybookConfig } from '@storybook/vue3-vite';

const config: StorybookConfig = {
	stories: ['../stories/**/*.mdx', '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../src/components/**/*.mdx'],
	addons: [
		'@storybook/addon-links',
		'@storybook/addon-a11y',
		'@chromatic-com/storybook',
		'@storybook/addon-docs',
		'@storybook/addon-vitest',
	],
	framework: {
		name: '@storybook/vue3-vite',
		options: {
			docgen: 'vue-component-meta',
		},
	},
	staticDirs: ['../public'],
	async viteFinal(config) {
		const { mergeConfig } = await import('vite');
-		// should be fixed in storybook 10 (esm-only) 
-		const { default: tailwindcss } = await import('@tailwindcss/vite');
		return mergeConfig(config, {
			plugins: [tailwindcss()],
		});
	},
};
export default config;