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

Question

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"
  ]
}

@BoussadjraBrahim ok, but still same error, don't know why it is happening. I think if I install the autoprefixer in the dependencies, instead of devDevependencies it will solve the issue. — Asif Mushtaq
– Asif Mushtaq, Commented Dec 11, 2020 at 22:33
Please solve it in the answer section, it easy to see. Anw upgrade node version work for me — Thiện Sinh
– Thiện Sinh, Commented May 15, 2021 at 2:57

double-beep · Accepted Answer · 2021-07-20 09:59:32Z

47

Run:

npx tailwindcss-cli@latest init -p

edited Jul 20, 2021 at 9:59

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered Dec 12, 2020 at 13:56

Abdi Nur

5194 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simas Joneliunas · Accepted Answer · 2021-05-24 02:46:29Z

3

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

edited May 24, 2021 at 2:46

Simas Joneliunas

3,15620 gold badges32 silver badges39 bronze badges

answered May 23, 2021 at 23:18

NsdHSO

1531 silver badge9 bronze badges

Comments

Boussadjra Brahim · Accepted Answer · 2021-08-11 06:15:44Z

1

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;

edited Aug 11, 2021 at 6:15

answered Dec 11, 2020 at 22:40

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

1 Comment

Asif Mushtaq Over a year ago

I found an suggestion about updating the nodejs from this link. github.com/tailwindlabs/tailwindcss/issues/2831 I'm trying to update and let see if it solve the issue

Sumith Ekanayake · Accepted Answer · 2021-05-22 22:00:04Z

0

I had same issue

I downgrade the tailwindcss package to 1.0.5 from latest

Now it is working

answered May 22, 2021 at 22:00

Sumith Ekanayake

2,31522 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related