storybook: Storybook doesn't work with the newest version 10.0.1 of PostCSS Autoprefixer plugin

I also get the same issue as @matamatanot (also with tailwind 2.0.2)

I might have missed something from my config after doing

npx sb upgrade --prerelease

It’s really not very clear what needs to be changed (if anything) to this to get storybook working with postcss 8 other than running the above command

Any guidance would be great but right now there’s no difference than running the current version of sb, with my app running normally on postcss 8, but storybook failing.

ERROR in ./src/styles/index.css (./node_modules/css-loader/dist/cjs.js??ref--11-1!./node_modules/@storybook/core/node_modules/postcss-loader/dist/cjs.js??ref--11-2!./src/styles/index.css)
Module build failed (from ./node_modules/@storybook/core/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.

---

Edit:

Looks like @storybook/addon-postcss does NOT get added automatically with the alpha version of storybook, but is required to fix the postcss errors.

Solution:

1. Install alpha version of storybook

npx sb upgrade --prerelease

your package.json should now look like this

"@storybook/addon-actions": "^6.2.0-alpha.23",
"@storybook/addon-essentials": "^6.2.0-alpha.23",
"@storybook/addon-links": "^6.2.0-alpha.23",
"@storybook/react": "^6.2.0-alpha.23",

1. Manually add alpha version of addon-postcss

npm i @storybook/addon-postcss@latest -D

your package.json should now look like this

"@storybook/addon-actions": "^6.2.0-alpha.23",
"@storybook/addon-essentials": "^6.2.0-alpha.23",
"@storybook/addon-links": "^6.2.0-alpha.23",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/react": "^6.2.0-alpha.23",

1. Ensure @storybook/addon-postcss is being used by storybook .storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    // Add everything below here
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
}

1. Run Storybook

npm run storybook

Hi @developer-rakeshpaul,

At the end I followed the instructions at https://tailwindcss.com/docs/installation#post-css-7-compatibility-build and everything works like a charm without dirty hacks.

I created a sample project: https://github.com/4lejandrito/storybook-tailwind2.

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.15 containing PR #13640 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

Got running in 6.2.9 with https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085 , but after upgrading to 6.3.0 error is back.

It seems like a lot of workarounds depend on Tailwind, but for anyone who ends up here in despair, this is unrelated to Tailwind, so it may happen to you (as it does to us) even if you’re not using Tailwind.

In our case, we’re using plain PostCSS with Autoprefixer, postcss-url, etc. @shilman, are there any plans to upgrade the version of PostCSS that Storybook uses internally?

Thanks everyone!

Here is how we forced Storybook ^6.1 to use PostCSS 8. (This presumes a postcss.config.js file at the root of your project. )

First, install postcss@^8 and postcss-loader@^4:

npm install --save-dev postcss@^8 postcss-loader@^4

Now, mutate your Storybook webpack config by creating/editing .storybook/main.js:

module.exports = {
  stories: [
    // etc
  ],
  addons: [
    // etc
  ],
  webpackFinal: async config => {
    /**
     * CSS handling, specifically overriding postcss loader
     */
    // Find the only Storybook webpack rule that tests for css
    const cssRule = config.module.rules.find(rule =>
      'test.css'.match(rule.test),
    )
    // Which loader in this rule mentions the custom Storybook postcss-loader?
    const loaderIndex = cssRule.use.findIndex(loader => {
      // Loaders can be strings or objects
      const loaderString = typeof loader === 'string' ? loader : loader.loader
      // Find the first mention of "postcss-loader", it may be in a string like:
      // "@storybook/core/node_modules/postcss-loader"
      return loaderString.includes('postcss-loader')
    })
    // Simple loader string form, removes the obsolete "options" key
    cssRule.use[loaderIndex] = 'postcss-loader'

    // Uncomment the following to debug
    // console.dir(config, { depth: null })
    return config
  },
}

An explanation of what’s happening here:

1. Find the CSS rule in Storybook’s webpack config
2. Overwrite the 3rd (technically “first”) loader, which is the Storybook’s custom version of postcss-loader
3. Providing the simple string postcss-loader causes Webpack to use the module we installed above.

I could workaround this by adding:

"resolutions": {
  "postcss": "8.1.7"
}

to my package.json.

With that I can successfully use Tailwind 2.0 inside storybook.

Edit: There is a better solution: https://github.com/storybookjs/storybook/issues/12668#issuecomment-730194625.

Having the exact same issue when trying to make my postcss config work. It won’t allow postcss-import in my case. Is there a workaround? Can I upgrade those deps in storybook somehow?

I tried @storybook/addon-postcss.

"postcss": "8.2.4"

  addons: [
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],

However, I got an error that PostCSS 8 was not being used.

> start-storybook -p 6006

info @storybook/react v6.2.0-alpha.21
info
info => Loading presets
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 8 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Using PostCSS preset with postcss@8.2.4

~

ERROR in ./src/styles/global.css (/foobar/node_modules/css-loader/dist/cjs.js!/foobar/node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--11-2!./src/styles/global.css)
Module build failed (from /foobar/node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin postcss-nested requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

src/styles/global.css (“tailwindcss”: “2.0.2”)

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

Hey @aantipov at the end I didn’t need to use resolutions. See my previous comment. Tailwind provides a compat version for PostCSS 7.

Hi @developer-rakeshpaul,

At the end I followed the instructions at https://tailwindcss.com/docs/installation#post-css-7-compatibility-build and everything works like a charm without dirty hacks.

I created a sample project: https://github.com/4lejandrito/storybook-tailwind2.

The workaround with resolutions field in package.json seems to work only for yarn users. Npm doesn’t support it 😦 For resolultions to work with npm you need to install extra tool - npm-force-resolutions. I think I better wait for Storybook to migrate to latest Postcss

I’m runnning Storybook 6.2.9 + NextJS 10 + Tailwind 2 and although the addons-postcss solution from https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085 allowed sb to build, upon visiting localhost:6006 it shows Cannot GET /.

What worked for me was downgrading tailwind as per https://github.com/storybookjs/storybook/issues/12668#issuecomment-730194625.

npx sb upgrade --prerelease worked for me - it push it to ^6.2.0-rc.0

when I do npx sb upgrade --prerelease, it does not affect my package.json at all. Am I doing upgrade in the wrong way? @shilman

Hey @dazuaz I tried following your example repo but storybook still trigger tailwind build when ran. I understand your reasoning here but I don’t get how you stop tailwind from doing that. Still same error: PostCSS plugin tailwindcss requires PostCSS 8

Seems like for version bumps solution posted above might not be a feasible solution.

For the Tailwindcss version >3.*.* and Storybook version > 6.5.* along with postcss version of 8.*, the followign steps worked or me:

Adding the following import in the preview.js file under story book configuration.

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';

Original Solution posted here

---

Overall setup:

Dependencies

"devDependencies": {
        "@babel/core": "^7.21.0",
        "@storybook/addon-actions": "^6.5.16",
        "@storybook/addon-essentials": "^6.5.16",
        "@storybook/addon-interactions": "^6.5.16",
        "@storybook/addon-links": "^6.5.16",
        "@storybook/builder-webpack5": "^6.5.16",
        "@storybook/manager-webpack5": "^6.5.16",
        "@storybook/react": "^6.5.16",
        "@storybook/testing-library": "^0.0.13",
        "autoprefixer": "^10.4.13",
        "babel-loader": "^8.3.0",
        "eslint-plugin-storybook": "^0.6.11",
        "plop": "^3.1.2",
        "postcss": "^8.4.21",
        "storybook-css-modules-preset": "^1.1.1",
        "tailwindcss": "^3.2.7"
    },

.storybook/main.js

module.exports = {
    stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
    staticDirs: ['../public'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions',
        'storybook-css-modules-preset',
    ],
    framework: '@storybook/react',
    core: {
        builder: '@storybook/builder-webpack5',
    },
};

.storybook/preview.js

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';
// your other configurations . . .

Hello all! I’m still having this issue after following several of the above suggested solutions. I’m wondering if it’s a version thing? Here’s what I’ve got:

package.json:

  ...
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@bbbtech/storybook-formik": "^2.5.0",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-webpack5": "^6.5.9",
    "@storybook/manager-webpack5": "^6.5.9",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@tailwindcss/forms": "^0.5.1",
    "@tailwindcss/typography": "^0.5.2",
    ...
    "postcss": "^8.4.13",
    ...
    "storybook-addon-next": "^1.6.7",
    "tailwindcss": "^3.0.24",
    ...
  },
  ...

main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');


module.exports = {
    stories: [
        "../components/**/*.stories.@(js|jsx|ts|tsx)",
        "../features/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "storybook-formik/register",
        {
            name: '@storybook/addon-postcss',
            options: {
                postcssLoaderOptions: {
                    implementation: require('postcss'),
                },
            },
        },
        "storybook-addon-next",
    ],
    core: {
        builder: 'webpack5',
    },
    framework: "@storybook/react",
    webpackFinal: async (config, { configType }) => {
        config.resolve.plugins = [new TsconfigPathsPlugin()];
        return config;
    }
}

preview.js

import "../styles/globals.css";

module.exports = {
  stories: ["../components/**/*.stories.@(js|jsx|ts|tsx)", "../features/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  // docs panel as default
  previewTabs: {
    "storybook/docs/panel": { index: -1 },
  },
  framework: "@storybook/react",
  parameters: {
    backgrounds: {
      default: "gray-100",
      values: [
        { name: "gray-100", value: "#f3f4f6" },
        { name: "blue-900", value: "#061146" },
      ],
    },
  },
};

It looks like all my versions are newer than the ones listed in the issue history here.

@larsenwork apologies. fixing with the release of 6.2.0-beta.7 now

In relation to npx sb upgrade --prerelease not resolving to the latest prerelease but to the latest release https://github.com/storybookjs/storybook/issues/12668#issuecomment-774505942 the package.json currently required to get things working is

    "@storybook/addon-actions": "^6.2.0-beta.6",
    "@storybook/addon-essentials": "^6.2.0-beta.6",
    "@storybook/addon-links": "^6.2.0-beta.6",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/react": "^6.2.0-beta.6",

For people just getting to this thread, https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085 is a guide on using new postcss with the prerelease of storybook 6.2

@dominikhaid this is already fixed in the prerelease + installing the @storybook/addon-postcss module.

@seonghyeonkimm sorry for the confusion. --prerelease updates you to the most recently released version, which is the alpha version 99% of the time since I release alphas all the time. However, occasionally I release a patch version without releasing an alpha afterward, and then that becomes the upgrade target. It’s is a bug in the upgrade script, but a corner case.

@danspratling Thanks for the guide! You are correct that addon-postcss isn’t automatically added as a dependency when you upgrade because the deprecation is the only real “change”. Adding addon-postcss is a solution for people that want to opt-in to using postcss (and then you can further configure it as outlined in your guide). Thanks again 😄

@vdh did you try @storybook/addon-postcss by @phated which is our proposed solution? Examples in the linked PR above.

@shilman @storybook/core and @storybook/react are still pinned to the very old version of css-loader (^3.0.0 / ^3.6.0), which pins to the older postcss^7 version.

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.17 containing PR #13669 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.16 containing PR #13655 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

^ I strongly agree with @trm217 😄 The most reliable workaround I think is the “resolution”, but even that requires us to use “yarn”. I know many people love yarn but in some environment we must use NPM…

@shilman the workaround for this problem seems to be unreliable (I did not manage to get any of the solutions mentioned in this thread working). In my opinion, the “has workaround” label should be removed.

I had the same issue in a project with postcss-mixins and postcss-nested. I ended up downgrading those packages to older versions for now (postcss-mixins 6.2.3 & postcss-nested 4.2.3).

I also had an issue with tailwind in storybook, ended up doing this ugliness, but it works: Import already compiled tailwind from node_modules .storybook/preview.js:

...
import 'tailwindcss/dist/base.css'
import 'tailwindcss/dist/components.css'
import 'tailwindcss/dist/utilities.css'
...

Specify somewhere that we are running a storybook .storybook/main.js:

...
global.__isStorybook = true
...

Disable tailwind postcss plugin if running within a storybook context postcss.config.js:

...
const plugins = {
  tailwindcss: {}
}

if (global.__isStorybook) {
  delete plugins.tailwindcss
}

module.exports = {
  plugins
}

...

As a workaround for TailwindCSS, I opted to first, build out the CSS and then adding it to the (.storybook/preview-head.html), I think this method is more robust and easier to maintain. Example repo.

Thank you @dazuaz, this approach fixed my issue.

I’m using Storybook with NextJS ( but not tailwind ) and I was facing this error:

ERROR in ./src/styles/globals.css (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/@storybook/core/node_modules/postcss-loader/src??ref--7-2!./src/styles/globals.css)
Module build failed (from ./node_modules/@storybook/core/node_modules/postcss-loader/src/index.js):
TypeError: Invalid PostCSS Plugin found at: plugins[0]

The approach you show in your repo helped me getting rid of it.

@dazuaz It seems like storybook itself looks for postcss.config.js and triggers Tailwind when it sees Tailwind in the plugin list. I couldn’t get it to work even with a custom storybook Webpack config, storybook stills use the top-level PostCSS config. However, using Tailwind compat works, so that’s what I’m using for now.

@kawinie Are you able to run next without any errors? or tailwind build ./styles/tailwind.css -o ./public/storybook/tailwind.storybook.css ,make sure you check the examples package.json

storybook will trigger tailwind build if you import it in .storybook/preview.js

Are you able to clone the repo and run it?

As a workaround for TailwindCSS, I opted to first, build out the CSS and then adding it to the <head> (.storybook/preview-head.html), I think this method is more robust and easier to maintain. Example repo.

Great news @eric-burel ! Awesome job figuring that out. Thanks to you we’re one step closer to a first class nextjs/storybook integration 🎉

The styled-jsx-plugin-postcss issue is fixed by upgrading it to >3.0.2 (I was using v2), also upgraded Next 10.0.2. Now Storybook is building again. Thanks @shilman and @ndelangen for narrowing done the issue. I’ve now have a full working example of Next 10 + Storybook v6, including advanced features of Next like styled-jsx support.

it was more of a tailwind issue than of tsdx. https://github.com/tailwindlabs/tailwindcss/issues/2795. got it working by commenting the "@tailwind components"

I was using tsdx for building a react component library and it is throwing errors even after setting up this for PostCSS 7. Got it working with non tsdx version easily with the sample @4lejandrito shared.

Hi, I’ve a similar issue with styled-jsx-plugin-postcss and next, where the build hangs instead of failing.

(Non minimal) reproduction here: https://github.com/VulcanJS/vulcan-next/tree/bugfix/styled-jsx-postcss-storybook-build-fail, in main.js we can see that removing the plugin will make the build work again

Edit: I’ve cross-posted to Next github where it is probably more suited.

@4lejandrito thanks you so much for taking the time to set up the sample repo for reference. I did try the instructions for post-css-7-compatibility-build… However, I was getting some weird errors… I am trying to use this as part of rushjs monorepo… Tried your repo and it is working perfectly fine… Will try to incorporate my stories to yours and see if it works…

@4lejandrito would you mind sharing your storybook setup or a sample repo on this setup… I am having trouble getting my tailwind 2.0 working with postcss@8