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
- Add every plugin the
postcss.config.jsreferences todevDependencies. - Commit the lockfile.
- Re-run the Storybook build.
Terminal
npm install -D autoprefixer postcss tailwindcssUse 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.jsonand 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
Storybook webpack5 vs vite builder mismatch in CIFix a Storybook builder mismatch in CI - the framework package and the installed builder disagree (react-vite…
Storybook (Vite) "Rollup failed to resolve import" in CIFix Storybook Vite build "Rollup failed to resolve import" in CI - the production Rollup pass could not resol…
Storybook addon "Cannot find module '@storybook/...'" in CIFix Storybook "Cannot find module '@storybook/...'" in CI - a Storybook package listed in config is not insta…