[英]Tailwind in React project - getting "Cannot find module 'autoprefixer'" error during setup
I'm following the documentation for setting up Tailwind in a React project over on https://tailwindcss.com/docs/guides/create-react-app .我正在关注在https://tailwindcss.com/docs/guides/create-react-app上的 React 项目中设置 Tailwind 的文档。 I've been following the steps, but when I get to the part where I'm supposed to run
npx tailwindcss init
in order to generate a tailwind.config.js
file, I get the following error:我一直在执行这些步骤,但是当我到达应该运行
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
I've checked that I have autoprefixer
in my node_modules
folder and tried reinstalling it, but I get the same error.我检查了我的
node_modules
文件夹中是否有autoprefixer
并尝试重新安装它,但我得到了同样的错误。 In my package.json
, I have the following:在我的
package.json
中,我有以下内容:
...
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
...
as per the documentation.根据文档。 My
craco.config.js
file is as follows:我的
craco.config.js
文件如下:
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
again, as per the documentation.再次,根据文档。 I've also tried reinstalling the
@craco/craco
package to no avail, so at this point I'm stuck.我也尝试重新安装
@craco/craco
package 无济于事,所以此时我被卡住了。 Any help would be appreciated.任何帮助,将不胜感激。
Can you try this:你可以试试这个:
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
here: https://github.com/tailwindlabs/tailwindcss/issues/2831这里: https://github.com/tailwindlabs/tailwindcss/issues/2831
I have faced same problem.我遇到了同样的问题。
at first I faced “Cannot find module 'autoprefixer'” error during setup.起初我在安装过程中遇到“找不到模块'autoprefixer'”错误。
than I tried "yarn" instead of "npm".比我尝试“纱线”而不是“npm”。
rest of process will be remain same. rest 的过程将保持不变。
it works now.现在可以了。
The issue is sometimes you install tailwind
instead of tailwindcss
问题是有时您安装的是
tailwind
而不是tailwindcss
pnpm add tailwindcss
-- not -- - 不是 -
pnpm add tailwind
This worked for me这对我有用
npm install tailwindcss@latest postcss@latest autoprefixer@latest
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
This is simple way for Creating The Tailwind Configuration File这是创建 Tailwind 配置文件的简单方法
npm install tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init
Just use:-只需使用:-
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
instead of,代替,
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
This worked for me.这对我有用。
I updated npm and nodejs and error is gone.我更新了 npm和nodejs并且错误消失了。 Maybe it is a compatibility error.
也许这是一个兼容性错误。
npm update -g npm
{yourpackagemanager} upgrade nodejs -y
npm updated from " 6.11.3 " to " 6.14.17 ". npm 从“ 6.11.3 ”更新到“ 6.14.17 ”。
nodejs updated from " v12.10.0 " to " v18.9.1 ". nodejs 从“ v12.10.0 ”更新为“ v18.9.1 ”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.