PostCSS plugin tailwindcss requires PostCSS 8.

Describe the bug I’m facing an issue when I started storybook

To Reproduce Steps to reproduce the behavior:

1. Install storybook-addon-next: yarn add storybook-addon-next -D
2. Add ‘storybook-addon-next’ to main.js file
3. Lanch storybook: yarn storybook
4. See error

My package.json

"devDependencies": {
    "@babel/core": "^7.16.12",
    "@commitlint/cli": "^16.1.0",
    "@commitlint/config-conventional": "^16.0.0",
    "@next/bundle-analyzer": "^12.0.8",
    "@storybook/addon-a11y": "^6.4.14",
    "@storybook/addon-actions": "^6.4.14",
    "@storybook/addon-essentials": "^6.4.14",
    "@storybook/addon-links": "^6.4.14",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/addons": "^6.4.14",
    "@storybook/builder-webpack5": "^6.4.14",
    "@storybook/manager-webpack5": "^6.4.14",
    "@storybook/react": "^6.4.14",
    "@storybook/theming": "^6.4.14",
    "@svgr/webpack": "^6.2.0",
    "@tailwindcss/forms": "^0.4.0",
    "@tailwindcss/typography": "^0.5.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@types/react": "^17.0.38",
    "@types/tailwindcss": "^3.0.3",
    "@typescript-eslint/eslint-plugin": "^5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
    "autoprefixer": "^10.4.2",
    "babel-jest": "^27.4.6",
    "babel-loader": "^8.2.3",
    "commitizen": "^4.2.4",
    "commitlint-config-gitmoji": "^2.2.5",
    "cz-customizable": "^6.3.0",
    "eslint": "8.6.0",
    "eslint-config-next": "^12.0.8",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-storybook": "^0.5.5",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^7.0.4",
    "identity-obj-proxy": "^3.0.0",
    "inquirer-fuzzy-path": "^2.3.0",
    "jest": "^27.4.7",
    "lint-staged": "^12.3.1",
    "next-sitemap": "^2.0.7",
    "plop": "^3.0.5",
    "postcss": "^8.4.5",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.4",
    "react-test-renderer": "^17.0.2",
    "standard-version": "^9.3.2",
    "storybook-addon-next": "^1.3.1",
    "storybook-theme-css-vars": "^0.0.4",
    "tailwindcss": "^3.0.16",
    "typescript": "^4.5.5"
  },

[RyanClementsHax]

Thanks for opening an issue 😃

I’ve tracked this down to your inclusion of @storybook/addon-postcss. It adds as a dependency older versions of postcss-loader and postcss which is causing the issue. given. There does seem to be movement on that repository to support the newer versions

The addon in question seems to be moot however given that storybook-addon-next already handles postcss for you. Do you have a use case where you need both these addons? It seems to me like you can just drop @storybook/addon-postcss.

[SpadarShut]

If you are using nextjs, remove @storybook/addon-postcss, add storybook-addon-next and it will work.