Skip to content
Latchkey

Storybook build "PostCSS plugin" error in CI

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".

storybook
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.
Terminal
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
// 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.

Related guides

Tired of flaky CI? Latchkey auto-heals failed jobs and retries them for you. Start free →