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

[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

[niemyjski]

Also running into this with @storybook/sveltekit + tailwind 4

[niemyjski]

12:21:18 PM [vite] (client) ✨ optimized dependencies changed. reloading
Unhandled promise rejection: TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '/ClientApp/\x00/iframe.html'
    at Object.stat (node:internal/fs/promises:1038:18)
    at C.addBuildDependency (file:///ClientApp/node_modules/@tailwindcss/vite/dist/index.mjs:1:5234)
    at C.generate (file:///ClientApp/node_modules/@tailwindcss/vite/dist/index.mjs:1:3810)
    at TransformPluginContext.transform (file:///ClientApp/node_modules/@tailwindcss/vite/dist/index.mjs:1:1967)
    at EnvironmentPluginContainer.transform (file:///ClientApp/node_modules/vite/dist/node/chunks/dep-Cg8OuIew.js:48466:19)
    at async file:///ClientApp/node_modules/vite/dist/node/chunks/dep-Cg8OuIew.js:43944:22
    at async Promise.all (index 0)
    at async devHtmlHook (file:///ClientApp/node_modules/vite/dist/node/chunks/dep-Cg8OuIew.js:43936:3)
    at async applyHtmlTransforms (file:///ClientApp/node_modules/vite/dist/node/chunks/dep-Cg8OuIew.js:43352:17)
    at async Array.<anonymous> (/ClientApp/node_modules/@storybook/builder-vite/dist/index.js:73:5860) {
  code: 'ERR_INVALID_ARG_VALUE'
}

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