Search code examples
node.jsnpmtailwind-csspostcsspostcss-cli

''postcss' is not recognized as an internal or external command, operable program or batch file


Even though I have postcss installed I still get the above error in the terminal when I try to build. I'm using this in conjunction with tailwindcss and my postcss.config.js file looks like this:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        require('cssnano'),
    ]
}

I've already updated all my packages and cleared the NPM cache. This isn't happening with any of my other builds. Could there be an error in my package.json file? Here is a portion of that:

"devDependencies": {
    "@wordpress/scripts": "^19.2.2",
    "dir-archiver": "^1.1.1",
    "node-sass": "^7.0.1",
    "postcss-cli": "^9.1.0",
    "rtlcss": "^3.5.0"
  },
  "rtlcssConfig": {
    "options": {
      "autoRename": false,
      "autoRenameStrict": false,
      "blacklist": {},
      "clean": true,
      "greedy": false,
      "processUrls": false,
      "stringMap": []
    },
    "plugins": [],
    "map": false
  },
  "scripts": {
    "build": "postcss css/styles.css -o build/styles.css",
    "watch": "node-sass sass/ -o ./ --source-map true --output-style expanded --indent-type tab --indent-width 1 -w",
    "compile:css": "node-sass sass/ -o ./ && stylelint '*.css' --fix || true && stylelint '*.css' --fix",
    "compile:rtl": "rtlcss style.css style-rtl.css",
    "lint:scss": "wp-scripts lint-style 'sass/**/*.scss'",
    "lint:js": "wp-scripts lint-js 'js/*.js'",
    "bundle": "dir-archiver --src . --dest ../_s.zip --exclude .DS_Store .stylelintrc.json .eslintrc .git .gitattributes .github .gitignore README.md composer.json composer.lock node_modules vendor package-lock.json package.json .travis.yml phpcs.xml.dist sass style.css.map yarn.lock"
  },
  "main": "index.js",
  "dependencies": {
    "autoprefixer": "^10.4.4",
    "gsap": "^3.11.4",
    "npm-check-updates": "^16.6.2",
    "postcss": "^8.4.21",
    "swiper": "^8.4.6",
    "tailwindcss": "^3.2.4"
  }

Solution

  • npm installs dependencies and devDependencies into node_modules, which is very rarely in your PATH. Node ships with a helpful command npx which can do this for you with npx postcss. Scripts in package.json run with node_modules/.bin in their PATH, so I'd also check that you're running npm run build and not just the postcss command. Otherwise, just install it globally.