📚Storybook not picking up tailwindcss

Description

1. You have a Next.js setup pre-configured by default.
2. You integrated Storybook with tailwindcss and next.js
3. When you run yarn dev or npm run dev, you can see tailwindcss is applied to your app.
4. 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

1. Run the following command:
   

   yarn add autoprefixer --dev
   

2. 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: {},
     },
   };
   

3. Helpful Information

   • Storybook picks up tailwindcss in these cases.
     1. There is only postcss.config.js in your project
     2. There are both postcss.config.mjs and postcss.config.js in your project
   • Storybook doesn't pick up tailwindcss in this cases.
     1. 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