Error during migration from v7 to v8 on Nextjs 15 & Tailwind v3

[0sssama]

Summary

I am upgrading my Storybook project from v7 to v8 using npx storybook@latest upgrade. I am using Next.js 15, React 19, and Tailwind v3. The project is a Yarn PnP monorepo. Here is the error I'm getting:

Loading PostCSS "tailwindcss" plugin failed: postcss-loader tried to access tailwindcss, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: tailwindcss

Additional information

Relevant packages versions :

      "@chromatic-com/storybook": "^3",
      "@storybook/addon-essentials": "^8.5.2",
      "@storybook/addon-interactions": "^8.5.2",
      "@storybook/addon-links": "^8.5.2",
      "@storybook/addon-onboarding": "^8.5.2",
      "@storybook/blocks": "^8.5.2",
      "@storybook/nextjs": "^8.5.2",
      "@storybook/react": "^8.5.2",
      "@storybook/test": "^8.5.2",
      "storybook": "^8.5.2",
      "next": "^15.1.5",
      "react": "^19.0.0",
      "react-dom": "^19.0.0",
      "tailwindcss": "^3.4.17"

My main.ts file:

import type { StorybookConfig } from '@storybook/nextjs';
import path, { join, dirname } from 'path';

function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));
}

const config: StorybookConfig = {
   stories: ['../ui/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

   addons: [
      getAbsolutePath('@storybook/addon-links'),
      getAbsolutePath('@storybook/addon-essentials'),
      getAbsolutePath('@storybook/addon-onboarding'),
      getAbsolutePath('@storybook/addon-interactions'),
      getAbsolutePath("@chromatic-com/storybook")
   ],

   framework: {
      name: getAbsolutePath('@storybook/nextjs'),
      options: {},
   },

   docs: {},

   webpackFinal: async (baseConfig) => {
      // If module.rules is not defined, initialize it as an empty array
      baseConfig.module = baseConfig.module || {};
      baseConfig.module.rules = baseConfig.module.rules || [];

      baseConfig.module.rules.push({
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: [
            {
               loader: 'file-loader',
               options: {
                  name: 'assets/fonts/[name].[ext]',
               },
            },
         ],
         include: path.resolve(__dirname, '../shared/assets/fonts'),
      });

      return baseConfig;
   },

   typescript: {
      reactDocgen: 'react-docgen-typescript'
   }
};

export default config;

Create a reproduction

No response