[v4] Tailwind 4 not working with Vite + Storybook + Nx · tailwindlabs/tailwindcss · Discussion #16451

mapten
Feb 12, 2025

Hi all.

I have a monorepo application built with React + Vite + Nx + Tailwind 3. I use Storybook for components sub-project.

I've just updated to Tailwind 4, using Vite Tailwind configuration, but it does not work with Storybook, I have this error:

[vite] (client) Pre-transform error: Can't resolve 'tailwindcss' in '[path]\libs\shared-components\src'
Plugin: @tailwindcss/vite:generate:serve
File: [path]/libs/shared-components/src/index.css
[vite] Internal server error: Can't resolve 'tailwindcss' in '[path]\libs\shared-components\src'

EDIT: I've tried Tailwind 4 in a separate web application and it works fine.

Any idea? Thanks in advance.

Answered by kazlik

Feb 13, 2025

Hi, I had same (or I guess it ́s similar) issue.
I solved it with @tailwindcss/cli. Maybe exists some better solution, but this one works for me.

# package.json
{
 "scripts": {
 "storybook": "yarn tailwind:watch | yarn storybook:dev",
 "storybook:dev": "storybook dev -p 6006",
 "storybook:build": "yarn tailwind:build && storybook build",
 "tailwind:build": "yarn tailwindcss --cwd ./our_base_path -i ./path_to_input_file/styles.css -o ./path_to_output_file/styles.css",
 "tailwind:watch": "yarn tailwind:build --watch",
 },
 "devDependencies": {
 "@tailwindcss/cli": "^4.0.6"
 }
}

// preview.tsx
import "./path_to_output_file/styles.css"

View full answer

Replies: 4 comments 13 replies

kayshapievsky
Feb 12, 2025

Hi @mapten
Have you tried updating your version of Tailwind to 4 in your project? Check your package.json and make sure that the version of Tailwind is at 4. You can also try deleting your node_modules folder and install all the dependencies again to make sure you're on v4 of tailwind.

1 reply

@mapten

mapten Feb 13, 2025
Author

Thanks for the answer. Yes, I already did that, still it does not work.

Maybe an extra Storybook configuration for v4 that was not needed in v3?

kazlik
Feb 13, 2025

Hi, I had same (or I guess it ́s similar) issue.
I solved it with @tailwindcss/cli. Maybe exists some better solution, but this one works for me.

# package.json
{
 "scripts": {
 "storybook": "yarn tailwind:watch | yarn storybook:dev",
 "storybook:dev": "storybook dev -p 6006",
 "storybook:build": "yarn tailwind:build && storybook build",
 "tailwind:build": "yarn tailwindcss --cwd ./our_base_path -i ./path_to_input_file/styles.css -o ./path_to_output_file/styles.css",
 "tailwind:watch": "yarn tailwind:build --watch",
 },
 "devDependencies": {
 "@tailwindcss/cli": "^4.0.6"
 }
}

// preview.tsx
import "./path_to_output_file/styles.css"

3 replies

@serchserch

serchserch May 8, 2025

Thanks a lot, @kazlik—running Tailwind via the CLI watch pipeline does unblock Storybook for me too. 🚀

That said, it feels more like a workaround than a true fix. I’d love to understand why the Vite/PostCSS integration is failing here in the first place (especially with Tailwind v4’s new packaging). If anyone has insight into the underlying config or export issue, it’d be great to dig into that and restore the "out-of-the-box" setup. 🙏

@tobiaszwinger

tobiaszwinger Jun 6, 2025

Thank you! This worked for me in Angular v20 / Storybook v9 / Tailwind v4 setup

@yacafx

yacafx Oct 9, 2025

Awesome workaround! Storybook 9 now works perfectly with Angular libraries in Nx, and the best part — it’s totally builder-agnostic. No Webpack, no Vite, just smooth and fast. Thanks a lot for sharing this! Hopefully the final fix lands soon.

Thanks @kazlik !!!

Answer selected by mapten

brettinternet
Feb 21, 2025

Is this is an issue specifically with @tailwindcss/vite?

Edit: For now, my workaround is to use @tailwindcss/postcss instead of @tailwindcss/vite:

// postcss.config.mjs
/** @type {import('postcss-load-config').Config} */
const config = {
 plugins: {
 '@tailwindcss/postcss': {},
 },
}
export default config

8 replies

@unional

unional Feb 23, 2025

Same here with @storybook/react.

Also, during storybook build, got:

Error: ENOENT: no such file or directory, stat '.../project/iframe.html'
 at async Object.stat (node:internal/fs/promises:1032:18)
 at async C.addBuildDependency (file:///.../node_modules/.pnpm/@tailwindcss+vite@4.0.8_vite@6.1.1_@types+node@20.17.16_jiti@2.4.2_less@4.2.1_lightningcss@1._e63djscpagsehgbdjoupt347eu/node_modules/@tailwindcss/vite/dist/index.mjs:1:5226) {

@hmt

hmt Feb 24, 2025

also histoire and vue but only after updating to 4.0.8

@unional

unional Feb 24, 2025

Yes, it only happens with 4.0.8.

I have a workaround: #16751 (comment)

@bruno-pmakers

Install tailwindcss and @tailwindcss/vite installed.
Add this to your config object in .storybook/main.ts

	async viteFinal(config) {
		// NOTE: for sb 9.1.1, vite 7.1.1, node v22.11.0, on 2005年08月09日,
		// if we import mergeConfig at the top, it breaks sb on startup, so just use dynamic import here
		//
		const { default: tailwindcss } = await import("@tailwindcss/vite")
		const { mergeConfig } = await import('vite')
		return mergeConfig(config, { plugins: [tailwindcss()] })
	}

Finally put tailwind.css file in your project, let's say at src/tailwind.css and import it at the top of .storybook/preview.ts:

import "../src/tailwind.css"
...

1 reply

@yikl1004

yikl1004 Oct 12, 2025

Thank you!

Uh oh!

[v4] Tailwind 4 not working with Vite + Storybook + Nx #16451

Uh oh!

Uh oh!

Replies: 4 comments · 13 replies

Uh oh!

Uh oh!

mapten Feb 13, 2025 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 4 comments 13 replies

mapten Feb 13, 2025
Author