Description
You have a Next.js setup pre-configured by default.
You integrated Storybook with tailwindcss and next.js
When you run yarn dev or npm run dev, you can see tailwindcss is applied to your app.
However, when you yarn storybook or npm run storybook, you see tailwindcss is not applied to the stories.
If you went through all the things, maybe this post might give you some workaround.
Workaround
Run the following command:
Create postcss.config.js in your project root directory and type this in the file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Helpful Information
Storybook picks up tailwindcss in these cases.
There is only postcss.config.js in your project
There are both postcss.config.mjs and postcss.config.js in your project
Storybook doesn’t pick up tailwindcss in this cases.
There is only postcss.config.mjs in your project
Related GitHub Issues and Articles
[Bug]: Configuration with TailwindCss
Next.js using Tailwind with Storybook
I reported the issue!
If you are interested, check this out: https://github.com/storybookjs/storybook/issues/26869