Fehler: PostCSS-Plugin tailwindcss erfordert PostCSS 8

Lesezeit: 5 Minuten

Benutzer-Avatar
NIFO

Ich habe die neue tailwindcss Version 2.0 installiert und erhalte folgenden Fehler. Ich habe versucht, postcss und tailwindcss zu deinstallieren, aber es funktioniert nicht. Brauchen Sie Hilfe.


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

Hier ist mein Paket.json

  "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

Sie integrieren Tailwind in ein Tool, das auf einer älteren Version von PostCSS basiert. Sie können dieses Dokument verwenden https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

  • Vue 3 ist eine Sache, die noch keine postcss 8-Unterstützung hat. Die obige Anleitung funktioniert ohne Probleme.

    – Jens Törnell

    23. November 2020 um 12:49 Uhr

  • Ich erhalte folgende Fehler: npm ERR! ERESOLVE unable to resolve dependency tree,npm ERR! Found: [email protected] Irgendeine Hilfe?

    – Pathos

    14. Dezember 2020 um 4:43 Uhr

  • Ich verwende Vue 3.0.7, das PostCSS 8 unterstützen sollte, aber ich erhalte immer noch diesen Fehler. Meine package-lock.json zeigt, dass PostCSS v8.2.7 ist, und ich kann den Compat-Build nicht installieren, da er mit der PostCSS 8-Anforderung in @vue/compiler-sfc 3.0.7 in Konflikt steht.

    – Peter Lenjo

    6. März 2021 um 8:05 Uhr

  • Ich verwende Vue2 und diese Problemumgehung funktioniert nicht.

    – cjohnson318

    14. März 2021 um 3:37 Uhr

  • In meinem Fall habe ich Garn 2+ verwendet, was ebenfalls nicht funktioniert. Das Herunterstufen von Yarn für dieses Projekt auf 1 löste das Problem.

    – Königlich

    5. August 2021 um 19:22 Uhr

Benutzer-Avatar
Kemmie001

npm uninstall tailwindcss postcss autoprefixer

dann

vue add tailwind 

um das vue CLI-Plugin zu verwenden https://www.npmjs.com/package/vue-cli-plugin-tailwind

  • Bestätigte Arbeit mit dem neuesten Vue3 + Typescript.

    – Callam Delaney

    20. Mai 2021 um 21:38 Uhr

  • Großartig für diejenigen, die vue cli verwenden. Ich habe das Vite-Verfahren verwendet, deshalb habe ich diesen Fehler erhalten.

    – Emmanuel David

    30. Oktober 2021 um 21:49 Uhr

  • Das funktioniert bei mir nicht. Ich erhalte Cannot find module postcss-import

    – Der-Null-Zeiger-

    7. Dezember 2021 um 8:48 Uhr

Benutzer-Avatar
Khalid EDAIG

hat bei mir funktioniert:

npm install [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

  • Ich erhalte folgende Fehler: npm ERR! ERESOLVE unable to resolve dependency tree,npm ERR! Found: [email protected] Irgendeine Hilfe?

    – Pathos

    14. Dezember 2020 um 4:42 Uhr

  • Danke, das ist ein Live-Saver, mein Problem mit der Installation von Laravel Breeze wurde behoben

    – Ahmed Osama

    10. Januar 2021 um 15:26 Uhr

  • Ein Thread auf GitHub von Tailwind (sorry, no link) schlägt beides vor ^ muss möglicherweise mit einem Escapezeichen versehen werden \ vor jeder Instanz von ^

    – Mark Gavagan

    8. September 2021 um 18:16 Uhr


  • Legende. Ich rannte npm uninstall tailwindcss postcss autoprefixer zuerst aber das hat es für mich sortiert. Aufbau war erfolgreich. Vielen Dank!

    – Störung höherer Ordnung

    5. März um 15:17 Uhr

  • Funktioniert gut mit Vue3 + TS

    – Atif Bashir

    19. März um 4:11

Benutzer-Avatar
jovialcore

Diese Lösung unten sollte perfekt funktionieren.

Führen Sie die folgenden Befehle aus

npm uninstall tailwindcss postcss autoprefixer

npm install [email protected]:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

EDIT: Einige fehlerhafte Leerzeichen entfernt.

Benutzer-Avatar
Theakash

Deinstallieren Sie Tailwind und installieren Sie es stattdessen mit dem Kompatibilitäts-Build neu

npm uninstall tailwindcss postcss autoprefixer
npm install [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

  • Sie müssen dieses Ding bald reparieren. Ich habe dasselbe festgestellt, als ich letzte Woche versucht habe, es mit dem vue cli-Projekt und heute mit dem packetJS-Projekt zu verwenden. Vielen Dank

    – BL Λ CK

    30. November 2020 um 16:10 Uhr

  • Ein Thread auf GitHub von Tailwind (sorry, no link) schlägt beides vor ^ muss möglicherweise mit einem Escapezeichen versehen werden \ vor jeder Instanz von ^

    – Mark Gavagan

    8. September 2021 um 18:18 Uhr

Benutzer-Avatar
Jimba Tamang

Ich habe einen Abhängigkeitsbaumfehler erhalten, als ich versuche, mit der kompakten Version zu deinstallieren und zu installieren. Also musste ich mit installieren yarn stattdessen und es funktioniert.

npm uninstall tailwindcss postcss autoprefixer
yarn add [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

  • Sie müssen dieses Ding bald reparieren. Ich habe dasselbe festgestellt, als ich letzte Woche versucht habe, es mit dem vue cli-Projekt und heute mit dem packetJS-Projekt zu verwenden. Vielen Dank

    – BL Λ CK

    30. November 2020 um 16:10 Uhr

  • Ein Thread auf GitHub von Tailwind (sorry, no link) schlägt beides vor ^ muss möglicherweise mit einem Escapezeichen versehen werden \ vor jeder Instanz von ^

    – Mark Gavagan

    8. September 2021 um 18:18 Uhr

Sie müssen uninstall all diese

npm uninstall autoprefixer postcss tailwindcss

Führen Sie dann diesen Befehl aus, er wird generiert tailwind.css Datei automatisch

vue add tailwind 

  • Wenn Sie auf Probleme stoßen, müssen Sie möglicherweise stattdessen unseren PostCSS 7-Kompatibilitäts-Build verwenden. tailwindcss.com/docs/…

    – Hany Alsammann

    22. April 2021 um 20:33 Uhr


1216840cookie-checkFehler: PostCSS-Plugin tailwindcss erfordert PostCSS 8

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy