Tailwind v4 "PostCSS plugin moved" - Fix in CI

By Kaveh Alemi·Latchkey

Tailwind v4 split the PostCSS integration into @tailwindcss/postcss. Configs that still register tailwindcss directly as a PostCSS plugin now error.

What this error means

After upgrading to Tailwind v4 the build fails telling you the PostCSS plugin has moved to a separate package.

Error: It looks like you're trying to use `tailwindcss` directly as a
PostCSS plugin. The PostCSS plugin has moved to a separate package.
Install `@tailwindcss/postcss` and update your PostCSS configuration.

Common causes

Old PostCSS config after v4 upgrade

Your postcss.config.js still lists tailwindcss: {} as a plugin, which is the v3 shape.

Missing @tailwindcss/postcss

The v4 PostCSS package was not installed during the upgrade.

How to fix it

Install and register the new plugin

1. Install @tailwindcss/postcss.
2. Reference it in the PostCSS config instead of tailwindcss.

npm install -D @tailwindcss/postcss

Update postcss.config.js

1. Replace the v3 plugin entry with the v4 package.

// postcss.config.js
module.exports = { plugins: { '@tailwindcss/postcss': {} } };

How to prevent it

• Read the Tailwind v4 upgrade guide before bumping the major.
• Pin Tailwind and its PostCSS package to the same major version.

Frequently asked questions

Related guides

References

• Node.js documentation
• npm CLI documentation
• GitHub Actions documentation