Storybook build "PostCSS plugin" error in CI

By Daniel Zoghalchali·Latchkey

Storybook processes CSS through PostCSS. If a plugin named in postcss.config.js (Tailwind, autoprefixer) is not installed or uses the wrong entry point, the build fails while compiling styles.

What this error means

The build fails with "Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'" or "It looks like you're trying to use tailwindcss directly as a PostCSS plugin".

Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'
(@/postcss.config.js)

Common causes

A PostCSS plugin not installed in CI

The config references tailwindcss or autoprefixer, but the package is missing from a clean install.

A plugin whose PostCSS entry point moved

Newer Tailwind uses a separate @tailwindcss/postcss entry; referencing tailwindcss directly fails.

How to fix it

Install the PostCSS plugins

1. Add every plugin the postcss.config.js references to devDependencies.
2. Commit the lockfile.
3. Re-run the Storybook build.

npm install -D autoprefixer postcss tailwindcss

Use the correct PostCSS entry point

For newer Tailwind, reference the dedicated PostCSS plugin package in the config.

// postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};

How to prevent it

• Keep all PostCSS plugins in package.json and the lockfile.
• Use the plugin entry point that matches the installed major version.
• Build Storybook in CI so CSS pipeline errors surface before publish.

Frequently asked questions

Related guides

References

• GitHub Actions documentation