Estoy usando Vue 3 e intento agregarle tailwindcss desde el siguiente tutorial. https://tailwindcss.com/docs/guides/vue-3-vite#install-tailwind-via-npm
He instalado las dependencias usando el siguiente comando,
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9Pero cuando traté de crear los archivos de configuración usando el siguiente comando
npx tailwindcss init -pMe esta dando el siguiente error.
npx: instalado 83 en 5.2s No se puede encontrar el módulo 'autoprefixer' Requerir pila:
- /~/.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
No sé por qué autoprefixer no detecta porque ya lo instalé. Incluso el paquete.json lo tiene.
{ "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" ] }Puede usar el siguiente comando usando tailwindcss cli con la última versión y el indicador --postcss o -p
npx tailwindcss-cli@latest init --postcssO sigue estos pasos:
Después de instalar esas dependencias, intente crear los siguientes archivos raíz del proyecto sin ejecutar ese comando:
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: {}, } }Luego, en su archivo CSS principal, agregue:
@tailwind base; @tailwind components; @tailwind utilities;Correr:
npx tailwindcss-cli@latest init -pTuve el mismo problema cuando ejecuté el comando con la versión de nodo 14.15.0. Aparentemente, usar el nodo 15.5 lo resolvió por mí. Creo que hay un problema con npm o algo así. 
tuve el mismo problema
Degradé el paquete tailwindcss a 1.0.5 de la última
ahora esta funcionando
Desinstale, ejecute este comando:
npm uninstall tailwindcss postcss autoprefixerDespués de desinstalar este módulo, ejecute este comando:
npm install tailwindcss@latest postcss@latest autoprefixer@latest