Vue3: PostCSS plugin tailwindcss requires PostCSS 8

created at 03-20-2022 views: 84

problem

 ERROR  Failed to compile with 1 error                                                                                                                                             4:45:27 PM

 error  in ./src/assets/tailwind.css

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

solution

$  npm uninstall autoprefixer postcss tailwindcss
$ vue add tailwind  - selecting minimal option

The specific process is as follows

azheng@lishizheng:/mnt/e/shizheng_coding/vue3_express/vue_express_tailwind_map_web/client$  npm uninstall autoprefixer postcss tailwindcss

removed 45 packages, and audited 1480 packages in 12s

3 packages are looking for funding
  run `npm fund` for details

72 vulnerabilities (61 moderate, 11 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
azheng@lishizheng:/mnt/e/shizheng_coding/vue3_express/vue_express_tailwind_map_web/client$ vue add tailwind  - selecting minimal option
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing vue-cli-plugin-tailwind...


added 1 package in 3s

3 packages are looking for funding
  run `npm fund` for details
✔  Successfully installed plugin: vue-cli-plugin-tailwind

? Generate tailwind.config.js minimal
? tailwind.config.js already exists! Do you want to replace it? Yes

🚀  Invoking generator for vue-cli-plugin-tailwind...
📦  Installing additional dependencies...


added 97 packages, removed 126 packages, and changed 1 package in 12s
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-tailwind

Then restart npm run serve, success

created at:03-20-2022
edited at: 03-20-2022: