Invalid PostCSS Plugin found – AutoPrefixer, PostCSS, PostCSS CLI

By Joey

Filed under Javascript

I recently encountered this error in my Terminal when working with TailwindCSS and attempting to build my final CSS file.

Invalid PostCSS Plugin found at: plugins[1]

The plugin error was referring to AutoPrefixer. When I commented out Autoprefixer as a plugin in my postcss.config.js file and ran my build script again (postcss tailwind.css -o style.css), the error was gone and the CSS file was built – but without AutoPrefixer.

The solution?

Downgrading Autoprefixer to version 9 did the trick.

So, in my package.json file – I downgraded autoprefixer to version 9.x.

Then, I just ran npm i to downgrade the package.

PostCSS 8

PostCSS was updated to version 8, however, PostCSS CLI has not yet been updated to handle PostCSS plugins which use the new PostCSS 8+ API. Autoprefixer uses the new PostCSS 8 API since version 10.

This is documented under known issues in the PostCSS GitHub page.

Once PostCSS CLI is updated to handle plugins that use the new PostCSS 8+ API, this will likely not be an issue. But until then, you may need to downgrade some PostCSS plugins to avoid errors.

Want to learn how to build fast, responsive WordPress Themes with modern tools?

Check out my course on Modern WordPress Theme Development.

  • Timber and Twig for clean HTML templates
  • Tailwind CSS for consistent styling
  • Git and Github for versioning your theme
  • Gulp for creating a ready-to-upload theme
  • How to integrate Advanced Custom Fields into your theme