React 项目中的 Tailwind - 在设置过程中出现“找不到模块‘autoprefixer’”错误

Question

我正在关注 https://tailwindcss.com/docs/guides/create-react-app 上在 React 项目中设置 Tailwind 的文档。我一直在按照这些步骤操作，但是当我到达应该运行

npx tailwindcss init

以生成

tailwind.config.js

文件的部分时，出现以下错误：

Cannot find module 'autoprefixer'
Require stack:
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\commands\build.js
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\commands\index.js
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\main.js
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli.js

我检查了我的

autoprefixer

文件夹中是否有

node_modules

并尝试重新安装它，但我得到了同样的错误。在我的

package.json

中，我有以下内容：

...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
...

根据文档。我的

craco.config.js

文件如下：

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

再次，根据文档。我也尝试重新安装

@craco/craco

软件包但无济于事，所以在这一点上我陷入了困境。任何帮助将不胜感激。

Answer 1

你能试试这个吗：

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

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

这里：https://github.com/tailwindlabs/tailwindcss/issues/2831

Answer 2

我也遇到过同样的问题。

起初我在安装过程中遇到“找不到模块'autoprefixer'”错误。

我尝试使用“yarn”而不是“npm”。

其余过程将保持不变。

现在可以使用了。

Answer 3

这对我有用

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

Answer 4

问题是有时您安装

tailwind

而不是

tailwindcss

pnpm add tailwindcss

-- 不是--

pnpm add tailwind

Answer 5

这是创建 Tailwind 配置文件的简单方法

npm install tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init

Answer 6

只需使用：-

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

而不是，

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

这对我有用。

Answer 7

我更新了 npm 和 nodejs，错误消失了。也许这是兼容性错误。

npm update -g npm

{yourpackagemanager} upgrade nodejs -y

npm 从“6.11.3”更新为“6.14.17”。

nodejs 从“v12.10.0”更新为“v18.9.1”。

Answer 8

就我而言，在复制项目时我错过了

postcss.config.js

文件，该文件包含以下内容

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

我将它添加到项目的根目录中，并且工作正常，放在这里以防有人使用 postcss。

Answer 9

我也在CI中使用ui.shadcn.com和tailwindcss，我的问题是package.json文件中的

autoprefixer

，

postcss

和

tailwindcss

位于

devDependencies

而不是

dependencies

。

由于我的 CI 处于生产模式，我遇到了与您相同的错误，只需将它们更改为

dependencies

即可快速

npm i

为我解决了所有问题。