Estoy usando Vue versión 3.2.10 sin Vite e intento instalar Tailwind CSS versión 2.2.14 (más reciente) .
IMPORTANTE: la versión 3.0.6 de Vue comenzó a ser compatible con PostCSS 8 (consulte el tercer punto en la documentación de GitHub para la actualización , en "características")
Después de seguir cuidadosamente las instrucciones de instalación y luego ejecutar npm run serve , sigo recibiendo este error:
error in ./src/assets/main.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-usersAquí está mi archivo package.json:
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-regular-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/vue-fontawesome": "^3.0.0-4", "@headlessui/vue": "^1.4.1", "core-js": "^3.6.5", "date-fns": "^2.23.0", "firebase": "^8.9.0", "vue": "^3.0.0", "vue-router": "^4.0.0-0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "autoprefixer": "^10.3.4", "postcss": "^8.3.6", "postcss-cli": "^8.3.1", "tailwindcss": "^2.2.14" }Como se indicó anteriormente, Vue 3.0.6 y posteriores definitivamente son compatibles con PostCSS 8. Además, las instrucciones Tailwind CSS para la " compilación compatible con PostCSS 7 " NO funcionan.
Después de seguir esas instrucciones, me sale este error:
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: postcss@7.0.36 npm ERR! node_modules/postcss npm ERR! dev postcss@"^7" from the root project npm ERR! postcss@"^7.0.32" from autoprefixer@9.8.6 npm ERR! node_modules/autoprefixer npm ERR! dev autoprefixer@"^9" from the root project npm ERR! autoprefixer@"^9.8.6" from @vue/cli-service@4.5.13 npm ERR! node_modules/@vue/cli-service npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.13 npm ERR! node_modules/@vue/cli-plugin-babel npm ERR! dev @vue/cli-plugin-babel@"~4.5.0" from the root project npm ERR! 3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project) npm ERR! 1 more (tailwindcss) npm ERR! 42 more (@intervolga/optimize-cssnano-plugin, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer postcss@"^8.0.0" from postcss-cli@8.3.1 npm ERR! node_modules/postcss-cli npm ERR! dev postcss-cli@"^8.3.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/mgav/.npm/eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! /Users/mgav/.npm/_logs/2021-09-08T21_09_08_052Z-debug.log¡Gracias por tu ayuda!
Parece que el problema (en algunos casos, de todos modos) no está directamente relacionado con VueJS, sino con vue-cli.
La solución que funcionó para mí es:
npm uninstall tailwindcss @tailwindcss/postcss7-compatnpm install tailwindcss@latest postcss@latest autoprefixer@latest¡Eso es todo!
Nota: Este no es mi trabajo . Lindsay Wardell (@lindsaykwardell) me dirigió a una publicación en este foro de Vuejs con la solución de Thomas Castelly (también sin identificador de StackOverflow).
No hay ningún problema con los últimos paquetes estables de vue-cli (v4.5.13 en este momento).
Parece que su problema es más sobre la gestión de las dependencias (debe leer en node.dev sobre este tema) ya que, básicamente, para usar TailwindCSS con la última versión estable de Vue3 solo es necesario instalar la última versión de las dependencias con pocos líneas de comando y funciona sin la caja.
Como ejemplo, encontrará a continuación las instrucciones para crear un proyecto mínimo de Vue3/Tailwind que funcione tal cual:
$ vue create vue3-tailwindcss $ cd vue3-tailwindcss $ npm install -D @vue/compiler-sfc tailwindcss@latest postcss@latest autoprefixer@latest $ npm run serveVersión de nodo y Vue:
$ node --version v16.5.0 $ vue --version @vue/cli 4.5.13Acerca de su problema, podría haber usado el siguiente método para que funcione con los últimos paquetes estables:
En package.json haz estos cambios:
"@vue/cli-service": "~4.5.0" => "@vue/cli-service": "^4.5.13""vue": "^3.0.0" => "vue": "^3.2.11""@vue/compiler-sfc": "^3.0.0" => "@vue/compiler-sfc": "^3.2.11" Luego elimine el archivo package-lock.json y ejecute npm install .
Fácil solución sin Vite.
Puede iniciar un nuevo proyecto utilizando una versión más reciente de Vue CLI. Simplemente vuelva a instalarlo como:
npm uninstall -g @vue/cli npm install -g @vue/cli@nextY cree un nuevo proyecto Vue 3. Soportará PostCSS 8 sin ningún problema.
Luego siga la guía de instalación de Tailwind 3 usando PostCSS . No olvide incluir sus archivos *.vue en tailwind.config.js .
Y usted está listo para ir.
Mira este repositorio que construí como guía.