Description
- You have a Next.js setup pre-configured by default.
- You integrated Storybook with tailwindcss and next.js
- When you run
yarn dev
ornpm run dev
, you can seetailwindcss
is applied to your app. - However, when you
yarn storybook
ornpm run storybook
, you seetailwindcss
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:
yarn add autoprefixer --dev
-
Create
postcss.config.js
in your project root directory and type this in the file:
// esmodule config is not supported by Storybook 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
andpostcss.config.js
in your project
- There is only
- Storybook doesn't pick up
tailwindcss
in this cases.- There is only
postcss.config.mjs
in your project
- There is only
- Storybook picks up
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
Top comments (0)