PostCSS "Loading PostCSS Plugin failed" - Fix Config in CI

PostCSS found the plugin but failed while loading it. Either the plugin threw during initialization, it was registered in the wrong form, or it targets a different PostCSS major than the one installed.

What this error means

The build fails with Loading PostCSS Plugin failed: <message> (sometimes X is not a function or a PostCSS 8 incompatibility note), naming the plugin and config file.

build output

Loading PostCSS Plugin failed: tailwindcss is not a function
(@/app/postcss.config.js)

# or a major-version mismatch:
Loading PostCSS Plugin failed: It looks like you're trying to use
tailwindcss directly as a PostCSS plugin.

Common causes

Wrong plugin invocation form

Plugins must be referenced correctly for your PostCSS version - as a map ({ tailwindcss: {} }) or an array of called/uncalled functions. Mixing the forms makes PostCSS treat a non-function as a plugin.

Plugin moved to a separate package

Some tools split their PostCSS plugin into a dedicated package (e.g. a @tailwindcss/postcss package in newer majors). Using the old direct reference then fails to load.

PostCSS major mismatch

A plugin built for PostCSS 7 loaded under PostCSS 8 (or vice versa) throws at initialization.

How to fix it

Use the correct plugin form and package

Reference the plugin in the form your PostCSS major expects, from the package that ships the PostCSS plugin.

postcss.config.js

// postcss.config.js (object form)
module.exports = {
  plugins: { tailwindcss: {}, autoprefixer: {} },
}

Align PostCSS and plugin majors

Install plugins that support your PostCSS version.

Terminal

npm ls postcss
npm install -D autoprefixer@latest   # a postcss-8-compatible release

How to prevent it

Reference plugins in the form your PostCSS major requires.
Follow the tool's docs for which package ships its PostCSS plugin.
Keep PostCSS and its plugins on compatible majors.