npm 启动时出现 PostCSS 错误 "tailwindcss requires PostCSS 8"
PostCSS error "tailwindcss requires PostCSS 8" when npm start
当 npm start
.
时,我的项目不断出现错误 PostCSS plugin tailwindcss requires PostCSS 8
也是一样,不过现在老了,没什么用了。 PostCSS 8 现在应该与 Tailwind 和 CRA 兼容,所以我安装了最新版本但是 returns 同样的错误。我在这里被困了将近 3 天,所以如果有任何建议或意见,我将不胜感激!
我尝试过的(但从未奏效):
- 已降级为
tailwindcss/postcss7-compat": "^2.2.17”
、PostCSS ^7.0.39
和 autoprefixer": "^9.8.8
的兼容版本
- 已升级到最新版本
tailwindcss:"^2.2.17"
、autoprefixer:"^10.4.0"
和 PostCSS ^8.3.11
- 已升级
node v16.13.0
、craco: "^6.4.0"
和 react-scripts:"^4.0.3"
。
- 在启动脚本中添加了
--openssl-legacy-provider
- 已删除包-lock.json、yarn-lock.json、节点模块和
npm install
- 多次重新启动 VScode 和浏览器。
{
"dependencies": {
"@craco/craco": "^6.4.0",
"@heroicons/react": "^1.0.4",
"@types/react-router-dom": "^5.1.8",
"autoprefixer": "^10.4.0",
"axios": "^0.24.0",
"classnames": "^2.3.1",
"cra-template-typescript": "1.1.2",
"postcss": "^8.3.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-textarea-autosize": "^8.3.3",
"react-transition-group": "^4.4.2",
"router": "^1.3.5",
"tailwindcss": "^2.2.17",
"typescript": "^4.3.5",
"yarn": "^1.22.17"
},
"scripts": {
"build:tailwind": "tailwindcss build -i src/index.css -o src/index.css",
"build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
"prestart": "npm run build:tailwind",
"prebuild": "npm run build:tailwind",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
我在这上面花了很多时间,终于找到了解决方法。
使用 tailwind CLI 而不是 postCSS 和 autoprefixer。关注 this doc。不要忘记从 craco.config.js 中删除 require('autoprefixer')
。
PostCSS官方说PostCSS8现在兼容create-react-app,可惜不行。
我看到很多人仍然和我有同样的问题,所以我希望这个答案能帮助到别人。
当 npm start
.
PostCSS plugin tailwindcss requires PostCSS 8
我尝试过的(但从未奏效):
- 已降级为
tailwindcss/postcss7-compat": "^2.2.17”
、PostCSS ^7.0.39
和autoprefixer": "^9.8.8
的兼容版本
- 已升级到最新版本
tailwindcss:"^2.2.17"
、autoprefixer:"^10.4.0"
和PostCSS ^8.3.11
- 已升级
node v16.13.0
、craco: "^6.4.0"
和react-scripts:"^4.0.3"
。 - 在启动脚本中添加了
--openssl-legacy-provider
- 已删除包-lock.json、yarn-lock.json、节点模块和
npm install
- 多次重新启动 VScode 和浏览器。
{
"dependencies": {
"@craco/craco": "^6.4.0",
"@heroicons/react": "^1.0.4",
"@types/react-router-dom": "^5.1.8",
"autoprefixer": "^10.4.0",
"axios": "^0.24.0",
"classnames": "^2.3.1",
"cra-template-typescript": "1.1.2",
"postcss": "^8.3.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-textarea-autosize": "^8.3.3",
"react-transition-group": "^4.4.2",
"router": "^1.3.5",
"tailwindcss": "^2.2.17",
"typescript": "^4.3.5",
"yarn": "^1.22.17"
},
"scripts": {
"build:tailwind": "tailwindcss build -i src/index.css -o src/index.css",
"build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
"prestart": "npm run build:tailwind",
"prebuild": "npm run build:tailwind",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
我在这上面花了很多时间,终于找到了解决方法。
使用 tailwind CLI 而不是 postCSS 和 autoprefixer。关注 this doc。不要忘记从 craco.config.js 中删除 require('autoprefixer')
。
PostCSS官方说PostCSS8现在兼容create-react-app,可惜不行。
我看到很多人仍然和我有同样的问题,所以我希望这个答案能帮助到别人。