运行 npx tailwindcss init -p 命令时找不到模块“autoprefixer”

Question

我正在使用 Vue 3 并尝试通过以下教程将 tailwindcss 添加到其中。 https://tailwindcss.com/docs/guides/vue-3-vite#install-tailwind-via-npm

我已经使用以下命令安装了依赖项，

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

但是当我尝试使用以下命令创建配置文件时

npx tailwindcss init -p

它给了我以下错误。

npx：在 5.2 秒内安装 83 找不到模块 'autoprefixer' 需要 堆栈：

• /~/.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

我不知道为什么autoprefixer 没有检测到，因为我已经安装了它。 连 package.json 都有。

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

Answer 1

运行：

npx tailwindcss-cli@latest init -p

Answer 2

请卸载运行此命令：

npm uninstall tailwindcss postcss autoprefixer

本模块卸载后，请运行以下命令：

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Answer 3

当我使用节点版本 14.15.0 运行命令时，我遇到了同样的问题。 显然使用节点 15.5 为我解决了这个问题。我觉得是npm什么的有问题

Answer 4

您可以使用带有最新版本的 tailwindcss cli 和标志 --postcss 或 -p 使用以下命令

npx tailwindcss-cli@latest init --postcss

或按照以下步骤操作：

安装该依赖项后，尝试在不运行该命令的情况下创建以下文件项目根目录：

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: {},
  }
}

然后在你的主 CSS 文件中添加：

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

Answer 5

我有同样的问题

我将 tailwindcss 包从最新版本降级到 1.0.5

现在可以正常使用了