Storybook errors when adding tailwindcss

Question

I'm trying to add tailwindcss v3 to existing storybook setup.

I have tried and followed every guide out there with similar features. Please help.🙏

What it was working before trying to setup tailwindcss

• Storybook ran and compiled components and stories.
• PostCSS 8+ with a few plugins.

What I did

• Installed tailwindcss

• Added tailwindcss:{} to postcss.config.js

• I imported the newly added styles/globals.css into storybook/preview.js

Like this: import './styles/globals.css'; and added the directives

/******** storybook/styles/globals.css ********/

@tailwind base;
@tailwind components;
@tailwind utilities;

• I set the following config in main.js

/******** storybook/main.js ********/

module.exports = {
  stories: ['./stories/*.stories.mdx', './stories/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/preset-scss',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  staticDirs: ['./public'],
  core: {
    builder: 'webpack5',
  },
};

The error I get when running yarn storybook.

/******** iTerm2 output ********/

99% done plugins webpack-hot-middleware
webpack built preview 02e06cdf44b2c261d88f in 13260ms
ModuleBuildError: Module build failed 
(from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'config')
    at getTailwindConfig (/*MY_PROJECT*/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:81:62)