Syntax Error: Error: PostCSS plugin tailwindcss/autoprefixer requires PostCSS 8.

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.

problem

vue中引入tailwindcss 启动时，命令行报错 2 种错误

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users


Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

reason

npm包版本不兼容

solution

先删除已安装的npm包 yarn npm 按需选择

• yarn remove tailwindcss postcss autoprefixer
• npm uninstall tailwindcss postcss autoprefixer

再重新安装 yarn npm 按需选择

• yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
• npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9