storybook-addon-next does not work with tailwindcss 3.

Describe the bug

1. tailwindcss3 works well when using @storybook/addon-postcss (because tailwindcss3. needs postcss 8+. but storybook does not support postcss 8+.)

const path = require('path');

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  webpackFinal: async (config) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];

    return config;
  },
  staticDirs: ['../public'],
};

1. but, storybook-addon-next does not work with postcss 8+. 😦. please help.

const path = require('path');

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'storybook-addon-next',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  webpackFinal: async (config) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];

    return config;
  },
  staticDirs: ['../public'],
};

It occurs this error message. Error: PostCSS plugin tailwindcss requires PostCSS 8.

Your minimal, reproducible example

https://github.com/kyujonglee/storybook-nextjs-tailwindcss

Steps to reproduce

1. npx create-next-app@lasest --typescript
2. npx storybook init
3. install @storybook/addon-postcss and tailwindcss postcss autoprefixer.

Expected behavior

storybook nextjs tailwindcss3

work together.

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

• OS: macOS
• browser: Chrome

storybook-addon-next version

v1.6.4

Additional context

No response

[RyanClementsHax]

Oh boy do I have good news for you.

If you go to the examples portion of the readme for this addon, you will see that I have a tailwind css 3 example.

In short, you don’t need the storybook postcss addon 😃

Hope this helps

[RyanClementsHax]

Yup! no problem!