J'ai installé la nouvelle version 2.0 de TailwindCSS et j'ai l'erreur suivante. J'ai essayé de désinstaller PostCSS et TailwindCSS mais cela ne fonctionne pas. Besoin d'aide.
"name": "nifo-school",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"react": "^16.3.0",
"@ivanv/vue-collapse-transition": "^0.2.1",
"autoprefixer": "^10.0.2",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"electron": "^8.0.0",
"electron-drag": "^2.0.0",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
"postcss-cli": "^=8.0",
"react-collapse": "^5.0.1",
"summernote": "^0.8.18",
"tailwindcss": "^2.0.1",
"v-click-outside": "^3.1.2",
"vue": "^2.6.11",
"vue-html-editor": "^0.2.1",
"vue-i18n": "^8.22.1",
"vue-router": "^3.2.0",
"vue2-editor": "^2.10.2",
"vuex": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"babel-eslint": "^10.1.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^9.5.0",
"node-sass": "^4.12.0",
"postcss": "^=8.1",
"sass-loader": "^8.0.2",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
"vue-template-compiler": "^2.6.11"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
}
}```
Thanks for help
Voici mon package.json
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
at new Processor (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
at postcss (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
at /Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/src/index.js:140:12
@ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/util/SlideInfo.vue?vue&type=style&index=0&lang=css& 4:14-393 14:3-18:5 15:22-401
@ ./src/components/util/SlideInfo.vue?vue&type=style&index=0&lang=css&
@ ./src/components/util/SlideInfo.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Grades.vue?vue&type=script&lang=js&
@ ./src/views/Grades.vue?vue&type=script&lang=js&
@ ./src/views/Grades.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://172.20.12.3:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
25 Réponses :
Vous intégrez le vent arrière avec un outil qui repose sur une ancienne version de PostCSS. Vous pouvez utiliser ce doc https://tailwindcss.com/docs/installation# Post-CSS-7-Compatibilité-Build
Vue 3 est une chose qui n'a pas encore le support PostCSS 8. Le guide ci-dessus fonctionne très bien sans tracas.
J'obtiens les erreurs suivantes: npm err! Eresolve ne peut pas résoudre l'arborescence de dépendance , npm err! Trouvé: tailwindcss@2.0.2 Une aide?
J'utilise Vue 3.0.7, qui devrait avoir le support pour PostCSS 8, mais j'obtiens toujours cette erreur. Mon package-Lock.json montre que le PostCSS est à V8.2.7, et je ne peux pas installer la construction de compat car il entre en conflit avec l'exigence PostCSS 8 dans @ vue / compiller-sfc 3.0.7.
J'utilise Vue2, et cette solution de contournement ne fonctionne pas.
Dans mon cas, j'utilisais Yarn 2+, ce qui ne fonctionne pas non plus. La rétrogradation du fil pour ce projet à 1 a résolu le problème.
Vue version 3.0.6 a commencé à prendre en charge PostCSS 8 (voir le 3ème point dans la documentation GitHub, sous "Fonctionnalités" à github.com/vuejs/vue-next/blob/master/… ). Même ainsi, j'ai toujours "Erreur: PostCSS Plugin TailwindCSS nécessite PostCSS 8" - C'est une question sur la pile à stackoverflow.com/ Q / 69109763/1459653
Ce lien semble ne plus ne plus rien compatibilité à la compatibilité.
a fonctionné pour moi:
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
J'obtiens les erreurs suivantes: npm err! Eresolve ne peut pas résoudre l'arborescence de dépendance , npm err! Trouvé: tailwindcss@2.0.2 Une aide?
Merci , Ceci est un épargnant en direct, résolu mon problème avec l'installation de Laravel Breeze
Un fil sur Github de Tailwind (désolé, aucun lien) suggère que chaque ^ peut devoir être échappé avec un \ avant chaque instance de ^
Légende. J'ai couru npm désinstaller TailWindCSS PostCSS AutoPrefixer Tout d'abord, mais cela l'a trié pour moi. Build a réussi. Merci beaucoup!
Fonctionne bien avec Vue3 + TS
J'utilise cette réponse pour tous mes projets: D
Désinstaller le vent arrière et réinstaller en utilisant la construction de compatibilité à la place
npm uninstall tailwindcss postcss autoprefixer npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Ils doivent bientôt réparer cette chose. Je rencontre la même chose quand j'essayais de l'utiliser la semaine dernière avec Vue CLI Project et aujourd'hui avec Parcel JS Project. Merci
Un fil sur Github de Tailwind (désolé, aucun lien) suggère que chaque ^ peut devoir être échappé avec un \ avant chaque instance de ^
J'ai eu le même problème en utilisant Laravel 8, alors essayez de désinstaller le vent arrière en utilisant "NPM désinstaller TailwindCSS" et l'installez en utilisant
npm installer tailwindcss @ compat
Ensuite, exécutez "npx tailwindcss init" si vous n'avez pas le fichier tailwing.config.js
Après ensuite, exécuter NPM Run Watch.
Suivez toujours la documentation de Laravel pour en savoir plus lorsque vous êtes coincé https://laravel.com/docs/8.x/mix#tailwindcss
Cela n'a pas fonctionné pour moi sur Laravel 8, mais cela l'a fait: tailwindcss. com / docs /…
La solution ci-dessus a fixé le problème PostCSS de TailDwindCSS, mais j'ai fait face à une autre erreur, qui est:
TypeError: getProcessEdPlugins n'est pas une fonction
La solution est pour mettre à niveau la version nœud , dans mon cas, j'ai passé de V10 à V15 qui a résolu mon problème.
Curieusement, j'ai eu ce problème sur une machine de développement. . . mais pas l'autre, avec un fichier package.json identique, et en utilisant un nœud / npm identique (15.5 / 7.3). J'ai supprimé Node_Modules, réinstallé. Je ne l'ai pas réparé.
La correction finale, qui est bizarre, est après la réinstallation du module de nœud, tout ce que j'ai fait, c'est:
npm i tailwindcss --save-dev
puis
npm uninstall tailwindcss
(Remarque, pas en utilisant le package de compatibilité) et cela a bien fonctionné. Je dois utiliser - Legacy-Peer-Deps lors de la réinstallation du Node_Modules, donc en quelque sorte, l'ordre d'installation était important dans mon scénario. . .
avait le même problème et a fait ce qui suit à résoudre;
Cette solution ci-dessous devrait fonctionner parfaitement.
Exécutez les commandes suivantes
npm uninstall tailwindcss postcss autoprefixer npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
éditer: supprimé certains espaces erranés.
La deuxième ligne erre avec le code d'erreur E404 ... Je vais modifier votre message pour refléter correctement ce qu'il devrait être, à l'avenir, être plus explicatif dans vos réponses
C'est une bonne idée de les installer avec - Enregistrer-dev ou -d car ce ne sont que des dépendances de développement.
Deuxième ligne - NPM ERR! Impossible de lire la propriété «nom» de null
vous devez puis exécuter cette commande, il générera npm désinstaller AutopRefixer postcss tailwindcss tailwind .css Fichier automatiquement vue add tailwind
Si vous rencontrez des problèmes, vous devrez peut-être utiliser notre build de compatibilité PostCSS 7 à la place. tailwindcss.com/docs/…
J'ai tout essayé et j'avais toujours TypeError: GetProcessEdPlugins n'est pas une erreur de fonction . Ce qui a résolu le problème pour moi a été la mise à niveau de la version NodeJS.
Pour vérifier la version de nœud installée
npm cache clean -f
ma version de nœud était v10.23.0 et utilisait Ubuntu. J'ai mis à niveau vers v14.15.4 .
Voici comment j'ai mis à niveau le nœud
sudo apt update curl -sL https://deb.nodesource.com/setup_14.x | sudo bash - sudo apt-get install -y nodejs node -v
aussi j'ai nettoyé le cache pour être plus Bien sûr
node -v
Après la mise à niveau, je supprime le dossier Node_modules à l'intérieur du projet. Ran npm install puis exécuter npm run dev dans le dossier du projet.
C'est la seule solution qui a fonctionné pour moi, donc le partager.
J'obtenais une erreur d'arborescence de dépendance lorsque j'essaye de désinstaller et d'installer avec une version compacte. J'ai donc dû installer avec yarn à la place et cela fonctionne.
npm uninstall tailwindcss postcss autoprefixer yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Pour le fil 2, yarn ajouter tailwindcss @ npm: @ tailwindcss / postcss7-compat @ ^ 2.0.2 postcss @ ^ 7 autoprefixer @ ^ 9
vue add tailwind
Confirmé travailler avec le dernier VUE3 + TypeScript.
Idéal pour ceux qui utilisent Vue CLI. J'ai utilisé la procédure Vite, c'est pourquoi j'ai eu cette erreur.
Cela ne fonctionne pas pour moi. Je reçois Impossible de trouver le module PostCSS-IMPORT
Je suis sur un Mac en utilisant VueJS 3 (@ VUE / CLI 4.5.11). Pour moi, les deux commandes suivantes ont résolu le problème:
npm uninstall tailwindcss postcss autoprefixer npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Ceci:
Pour résoudre cette erreur, désinstallez le vent arrière et réinstallez à l'aide de la construction de compatibilité à la place:
npm uninstall tailwindcss postcss autoprefixer npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Solution de Documentation Tailwind V2
Cette solution a en effet fonctionné pour mon environnement.
Cela résout-il le problème et permet-il le vent arrière 3?
Il devient ridicule. 2022, et c'est encore un peu brisé?
Il n'est pas nécessaire de rétrograder vers postcss 7 , vous pouvez désormais que cela fonctionne facilement avec postcss 8 - voir stackoverflow.com/a/68605148/840897
La réponse acceptée est désormais obsolète.
En ce qui concerne la v2.0, le vent arrière CSS dépend de PostCSS 8. La réponse précédemment acceptée indique comment rétrograder à PostCSS 8
, veuillez procéder à ce qui suit pour que tout fonctionne sur toutes les dernières versions
yarn add @ sistorbook / addon-Postcss
puis modifiez votre .storybook / main.js
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
{
name: "@storybook/addon-postcss",
options: {
postcssLoaderOptions: {
implementation: require("postcss"),
},
},
},
],
};
Vous avez besoin de livre de contes pour le vent arrière?
Merci pour cela - très utile pour les mises à niveau en août 2021!
Mec, tu mérites un Oscar. Merci d'avoir partagé
Tout le monde ne dirige pas le livre de contes qui voit cette erreur (je suis l'un d'eux) ....
En n'utilisant pas Vue, j'espère que cela aide les autres avec un problème similaire. Dans mon cas, j'utilisais TailwindCSS avec Gulp (^ 4.0.2) et j'ai pu résoudre l'erreur en supprimant le vent arrière et ses dépendances:
npm désinstaller tailwindcss gulp-Postcss AutopRoPrefixer
les a ensuite installés mais a explicitement spécifié le plugin postcss en version 9:
npm installer tailwindcss autoprefixer gulp-poscsss @ 9
J'ai essayé avec gulp-Postcss @ le dernier , mais j'ai trouvé qu'il continuait d'installer la version 8.3.1 et n'a pas résolu l'erreur. Plus d'informations peuvent être vues ici: https://github.com / postcss / postcss / wiki / postcss-8-for-end-usrs
Sinon, je ferais écho à l'utilisation de la version de compatibilité du vent arrière.
Pour ceux qui sont de mise à niveau vers Tailwind 3, et rencontrant ce problème, Les instructions suivantes Depuis le dépannage de Tailwind sont ce qui l'a corrigé pour moi.
spécifiquement, modifier vos scripts de démarrage et de création:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
vous ' Je dois installer simultanément et npm-run-all , cependant.
>:
"start": "concurrently \"npm run start:css\" \"react-scripts start\"", "start:css": "tailwindcss -o src/tailwind.css --watch", "build": "tsc && npm run build:css && react-scripts build", "build:css": "NODE_ENV=production tailwindcss -o src/tailwind.css -m",
Cela signifiera que vous devrez importer tailwind.css au lieu de index.css dans Votre fichier d'index index. {tsx, js} Pour le projet.
Et si cela a fonctionné pour vous, gardez à l'esprit que vous n'avez plus besoin de @ craco / craco installé.
Oui, cela a fonctionné pour moi. Merci. Doit également suivre ces étapes si la configuration a été effectuée à l'aide de PostCSS précédemment. À l'heure actuelle, il faut utiliser TailwindCli pour effectuer la configuration. Notez que Tailwind CSS V3.0 nécessite PostCSS 8, et ne prend plus en charge PostCSS 7. Si vous ne pouvez pas passer à PostCSS 8, nous vous recommandons d'utiliser Tailwind CLI au lieu d'installer le vent arrière en tant que plugin postcss. < a href = "https://tailwindcss.com/docs/upgrade-guide" rel = "nofollow noreferrer"> tailwindcss.com/docs/upgrade-guide tailwindcss.com/docs/installation
J'ai également fait face à ce problème lors de la mise à niveau. Auparavant, j'ai fait la configuration à l'aide de PostCSS.
La documentation officielle indique
Notez que Tailwind CSS V3.0 nécessite PostCSS 8, et ne prend plus en charge PostCSS 7. Si vous ne pouvez pas passer à PostCSS 8, nous vous recommandons d'utiliser CLI Tailwind au lieu d'installer le vent arrière en tant que plugin postcss.
Donc, cette fois, j'ai fait la configuration en utilisant CLI. https://tailwindcss.com/docs/installation
Yarn Supprimez TailWindCSS PostCSS AutoPrefixer
yarn add --v tailwindcss @ le dernier @ tailwindcss / typography @ dernier @ tailwindcss / forms @ letest @ tailwindcss / aspect ratio @ dernier @ tailwindcss / line-cllamp @ dernier postcss @ dernier autoprefixer @ dernier < / p>
npx tailwindcss -i ./src/assets/css/style.css -o ./src/assets/css/tailwind.css --watch
et dans package.json besoin de faire ce changement
https://tailwindcss.com/docs / Content-Configuration # it-juste-isn-t-working-properly
mon package.json
"start": "simultanément \" npm run start: css \ "\" react-scripts start \ "",
"Démarrer: CSS": "Tailwindcss -o SRC / Assets / CSS / Tailwind.css --watch",
"build": "tsc && npm run build: css && react-scripts build",
"build: css": "node_env = production tailwindcss -o src / actifs / css / tailwind.css -m",
This answer helped me to resolve the issue https://stackoverflow.com/a/70492649/7225816
avec vue 3 et tailwindcss 3 La configuration ci-dessus fonctionne bien avec les derniers PostCSS, AutopRefixer, Vue 3 et Tailwind 3 tailwind.config.js postcss.config.js postcss.config.js module.exports = {
plugins: {
tailwindcss: {
config: './tailwind.config.js'
}
}
}
Cela a fonctionné pour moi: Exécution de "NPM Installer TailWindCSS PostCSS" et "NPM installer Tailwindcss AutopRefixer"
Cette installation séparante de PostCSS et d'autopréfixer indépendamment.
Équivalent du fil pour ceux qui sont coincés avec PostCSS V8 en raison de l'utilisation d'un framework comme Vuepress v1:
yarn add -d tailwindcss @ npm: @ tailwindcss / postcss7-compat postcss @ ^ 7 autoprefixer @ ^ 9
Désinstaller simplement le vent arrière et réinstaller en utilisant la construction de compatibilité à la place:
npm uninstall tailwindcss postcss autoprefixer npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
NPM Désinstaller TailwindCSS npm install -d tailwindcss @ dernier postcss @ dernier autoprefixer @ dernier
npm installer tailwindcss @ dernier postcss @ dernier autoprefixer @ dernier
Vous devez désinstaller le tailwindcss, le postcss et l'autopréfixer, puis installer les versions compatibles:
npm uninstall tailwindcss postcss autoprefixer npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9