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

[mapten]

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.

[kayshapievsky]

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.

[mapten]

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]

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"

[serchserch]

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]

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

[yacafx]

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

[brettinternet]

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

[unional]

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/@[email protected][email protected]_@[email protected][email protected][email protected]_lightningcss@1._e63djscpagsehgbdjoupt347eu/node_modules/@tailwindcss/vite/dist/index.mjs:1:5226) {

[hmt]

also histoire and vue but only after updating to 4.0.8

[unional]

Yes, it only happens with 4.0.8.

I have a workaround: #16751 (comment)

[bruno-pmakers]

This worked for me.
Tks.

[giacomoalonzi]

worked for me also!

[taivo]

The following works for me:

1. Install tailwindcss and @tailwindcss/vite installed.
2. 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()] })
	}

3. 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"
...

[yikl1004]

Thank you!