This is probably not a problem with npm. There is likely additional logging output above. Exit status 1

Question

I want to integrate tailwind.css in my react.js app but after doing some steps while I go to run my app it shows error like I have attach picture in the following.

     ["scripts": {
        "start": "npm run watch:css && react-scripts start",
        "build": "npm run build:css && react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "build:css": "postcss src/components/books/CSS/talwind.css -o src/components/books/CSS/main.css",
        "watch:css": "postcss src/components/books/CSS/talwind.css -o src/components/books/CSS/main.css"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": \[
          ">0.2%",
          "not dead",
          "not op_mini all"
        \],
        "development": \[
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        \]
      },
      "devDependencies": {
        "autoprefixer": "^10.0.1",
        "postcss-cli": "^8.2.0",
        "tailwindcss": "^1.9.6"
      }
    }][1]

enter image description here

Here is my terminal snippet that show what error exactly I'm facing.

score 0 · Answer 1 · answered Oct 30 '20 at 16:25

0

Try to downgrade autoprefixer dependency like suggested here: https://github.com/parcel-bundler/parcel/issues/5160"

answered Oct 30 '20 at 16:25

MWO

2,627
2
10
25

Contents not found please provide useful link – makt Oct 31 '20 at 14:24

score 0 · Answer 2 · answered Oct 30 '20 at 16:42

This is the generic error message you will receive from npm when packages throw an error:

This is probably not a problem with npm. There is likely additional logging output above. Exit status 1

Like it says, it is not a problem with npm and you need to look at the preceeding lines to figure out what your actual problem is. The image you posted tells you exactly what the error is and what you should do about it:

Error: PostCSS plugin autoprefixer requires PostCSS 8

Migration guide for end users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

From that page, and from your config, it looks like you're using create-react-app. Since that's the case, you will probably need to downgrade your dependencies. Per a note on that page:

Create React App ❌ Support this PR to get PostCSS 8 in CRA 4.0. For now, you need to avoid using PostCSS 8 plugins.

Per this similar question, you may have to downgrade:

autoprefixer to "^9.0.0"
postcss-cli to "^7.0.0"

@MDABDULKADIR to confirm, you now have `"autoprefixer": "^9.0.0"` & `"postcss-cli": "^7.0.0"`? Is the error exactly the same? `Error: PostCSS plugin autoprefixer requires PostCSS 8`? Can you try removing `node_modules` and re-run `npm install`? — Ben, Oct 31 '20 at 16:04

score 0 · Answer 3 · answered Jan 09 '21 at 18:03

Do the following steps

first uninstall tailwindcss postcss autoprefixer

npm uninstall tailwindcss postcss autoprefixer

then reinstall with postcss 7, autoprefixer 9

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Hope it will resolve your issue.

This is probably not a problem with npm. There is likely additional logging output above. Exit status 1

3 Answers3