[Bug]: Storybook doesn't run with tailwindcss in next.js

[algoORgoal]

Describe the bug

Describe the bug

1. I have a default next.js setup
2. To apply tailwind to Storybook, I followed the official docs
3. Tailwindcss has applied to my next.js app when I run yarn dev but not to the stories when I run yarn storybook.
4. I did some experiments and these results came out:

• Storybook picks up tailwindcss in these cases.

  1. There is only postcss.config.js in the project(root directory)
  2. There are both postcss.config.mjs and postcss.config.js in the project(root directory)

• Storybook doesn't pick up tailwindcss in this case.

  1. There is only postcss.config.mjs in the project

To Reproduce

You can clone this repo and run yarn storybook

Make sure to remove postcss.cofnig.mjs to see the failure.

https://github.com/algoORgoal/bug-storybook-tailwindcss

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD <----- active
    npm: 10.5.2 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Chrome: 123.0.6312.123
    Edge: Chromium (123.0.2420.97)      
  npmPackages:
    @storybook/addon-coverage: ^1.0.1 => 1.0.1
    @storybook/addon-essentials: ^8.0.8 => 8.0.8
    @storybook/addon-interactions: ^8.0.8 => 8.0.8
    @storybook/addon-links: ^8.0.8 => 8.0.8
    @storybook/addon-onboarding: ^8.0.8 => 8.0.8
    @storybook/blocks: ^8.0.8 => 8.0.8  
    @storybook/nextjs: ^8.0.8 => 8.0.8  
.17.0
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    msw-storybook-addon: ^2.0.0-beta.2 => 2.0.0-beta.2
    storybook: ^8.0.8 => 8.0.8

Additional context

"postcss": "8.4.38",
"storybook": "8.0.8",
"tailwindcss": "3.4.1",
"next": "14.2.1",

[drianoaz]

I have the same problem.

A workaround to fix it is change the extensions of files postcss.config and tailwind.config to .cjs. Must be include too a **/*.cjs at your tsconfig.json as this example.

This is working, but I don't know why.

Why it works?

Under the hood, @storybook/nextjs uses postcss-loader

storybook/code/frameworks/nextjs/src/css/webpack.ts

Line 35 in 67a2111

require.resolve('postcss-loader'),

The file postcss.config.mjs is not a valid config file for this loader

[algoORgoal]

I have the same problem.

A workaround to fix it is change the extensions of files postcss.config and tailwind.config to .cjs. Must be include too a **/*.cjs at your tsconfig.json as this example.

This is working, but I don't know why.

## Why it works? Under the hood, `@storybook/nextjs` uses [postcss-loader](https://www.npmjs.com/package/postcss-loader)

storybook/code/frameworks/nextjs/src/css/webpack.ts

Line 35 in 67a2111

require.resolve('postcss-loader'),

The file postcss.config.mjs is not a valid config file for this loader

Wow, thank you so much! I think it would have been better if it was documented somewhere. Maintainers, please let us know if pull requests are welcomed :)

[travhow99]

I have the same problem.

A workaround to fix it is change the extensions of files postcss.config and tailwind.config to .cjs. Must be include too a **/*.cjs at your tsconfig.json as this example.

This is working, but I don't know why.

## Why it works? Under the hood, `@storybook/nextjs` uses [postcss-loader](https://www.npmjs.com/package/postcss-loader)

storybook/code/frameworks/nextjs/src/css/webpack.ts

Line 35 in 67a2111

require.resolve('postcss-loader'),

The file postcss.config.mjs is not a valid config file for this loader

Thank you very much for the solution @drianoaz

Note for others - I only had to change the postcss config to postcss.config.cjs to get things working, and was able to leave the tailwind config as tailwind.config.ts

[cgcompassion]

Thank you! I just spent several hours trying to get tailwind to work in storybook. This did the trick.

1. Rename file to postcss.config.cjs
2. Change export line at the bottom from export default config; to module.exports = config;
3. Update tsconfig.json to include "**/*.cjs" in the include array.

I think this framework needs an update ASAP to make this change, as the default install is completely broken without it.

@storybook/nextjs 8.0.9. next 14.2.2. tailwindcss 3.4.3. postcss 8.4.38.

[nady90]

Thank you! I just spent several hours trying to get tailwind to work in storybook. This did the trick.

1. Rename file to postcss.config.cjs
2. Change export line at the bottom from export default config; to module.exports = config;
3. Update tsconfig.json to include "**/*.cjs" in the include array.

I think this framework needs an update ASAP to make this change, as the default install is completely broken without it.

@storybook/nextjs 8.0.9. next 14.2.2. tailwindcss 3.4.3. postcss 8.4.38.

If you are just finding this issue, do just this and it will work. A couple of hours wasted looking around until I found this lol

[Heet-Bhalodiya]

Hello everyone,

The above solution is not working for me as I am using nextjs v14.2.3.

is there any other solution?? Thanks!

[nady90]

Hello everyone,

The above solution is not working for me as I am using nextjs v14.2.3.

is there any other solution?? Thanks!

In addition to doing the following:

1. Rename file to postcss.config.cjs
2. Change export line at the bottom from export default config; to module.exports = config;
3. Update tsconfig.json to include "**/*.cjs" in the include array.

You need to change preview.js to import the globals.css file (or whatever file has your tailwindcss imports:

import "../src/app/globals.css";

[Heet-Bhalodiya]

Thanks @nady90, it's working now.

The issue was that I had important: '#__next', in my tailwind.config.ts file and that caused the issue.

[phukon]

Thank you! I just spent several hours trying to get tailwind to work in storybook. This did the trick.

1. Rename file to postcss.config.cjs
2. Change export line at the bottom from export default config; to module.exports = config;
3. Update tsconfig.json to include "**/*.cjs" in the include array.

I think this framework needs an update ASAP to make this change, as the default install is completely broken without it.

@storybook/nextjs 8.0.9. next 14.2.2. tailwindcss 3.4.3. postcss 8.4.38.

thank you so much! I was wondering why it wasn't working for my new nextjs project when the other projects were working fine. new storybook peeps are prolly pulling there hair out rn

[ethanmick]

As it stands a clean install of Next.js and Storybook results in Tailwind not working in the Storybook. The fix outline in this thread is a good workaround, but please:

1. Update the docs to clearly outline this fix
2. Update Storybook to pickup the default Next.js/Tailwind configuration files.

Thanks!

[comunidadio]

#26869 (comment)

Thank you @nady90, this was driving me crazy, your workaround works for me with Storybook 8.0.9 and Next 14.2.3 🎉

[pablohaller]

I spent the whole day trying different ways to setup storybook in my new NextJS project using Tailwind.

This workaround really made it work:

#26869 (comment)

[valentinpalkovic]

#26707 should have fixed this issue. Can someone please upgrade to Storybook v8.1 and see if the issue is fixed?

npx storybook@latest upgrade

[tom-fletcher]

@valentinpalkovic I have just updated storybook and all the addons to v8.1.3 and can confirm that for me it is now picking up and using the esm postcss.config.js file (as well as still supporting the older .cjs version). 👍