Cannot find module 'autoprefixer' when running npx tailwindcss init -p command

user_2769917 0
Viewed 10037

I'm using Vue 3 and trying to add tailwindcss into it from the following tutorial. https://tailwindcss.com/docs/guides/vue-3-vite#install-tailwind-via-npm

I have installed the dependencies using the following command,

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

But when I tried to create the configuration files using the following command

npx tailwindcss init -p

It is giving me the following error.

npx: installed 83 in 5.2s Cannot find module 'autoprefixer' Require stack:

  • /~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/build.js
  • /~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/index.js
  • /~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/main.js
  • /~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli.js

I don't know why autoprefixer is not detecting because I have already installed it. Even the package.json have it.

{
  "name": "wooclime",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "autoprefixer": "^9.8.6",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "postcss": "^7.0.35",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}
vuejs3 tailwind-css npm vue.js css
5 Answers

Run:

npx tailwindcss-cli@latest init -p
user_146261810

You could use the following command using the tailwindcss cli with latest version an the flag --postcss or -p

npx tailwindcss-cli@latest init --postcss

Or follow these steps :

After installing that dependencies try to create the following files project root without running that command :

tailwind.config.js

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Then in your main CSS file add :

@tailwind base;
@tailwind components;
@tailwind utilities;
user_81728570

I had the same problem when I ran the command with node version 14.15.0. Apparently using node 15.5 solved it for me. I think there's a problem with npm or something.enter image description here

enter image description here

user_144632820

Please uninstall run this command:

npm uninstall tailwindcss postcss autoprefixer

After this module is uninstall, please run this command:

npm install tailwindcss@latest postcss@latest autoprefixer@latest
user_115559080

I had same issue

I downgrade the tailwindcss package to 1.0.5 from latest

Now it is working

user_16859140
Related