Tailwind给出错误消息error:PostCSS插件postss-flexbugs修复需要PostCSS8

Question

我正试图为我的React字典应用程序安装Tailwind，但我收到了以下错误消息

编译有问题：

中的错误/src/App.js 4:019

找不到模块：错误：无法解析"/App.css'在'C:\Users\mekstein\Desktop\free dictionary\src'中

中的错误/src/index.css

模块构建失败(从./node_modules/postpass-loader/dist/cjs.js(：错误：PostCSS插件postss-flexbugs修复需要PostCSS8。最终用户迁移指南：https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users位于Processor.normalize(C:\Users\mekstein\Desktop\free dictionary\node_modules\postss\lib\Processor.js:153:15(在新的处理器上(C:\Users\mekstein\Desktop\free dictionary\node_modules\postss\lib\Processor.js:56:25(在postpass(C:\Users\mekstein\Desktop\free dictionary\node_modules\postss\lib\postss.js:55:10(在Object.loader(C:\Users\mekstein\Desktop\free dictionary\node_modules\postpass-loader\dist\index.js:96:17(

我错过了什么？

请参阅我的软件包.json

{
"name": "free-dictionary",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^7.8.2",
"postcss-pxtorem": "^5.1.1"
}
}

Answer 1

我遇到了同样的问题，现在它可以工作了。

我按照课程"；前后反应-2022-Traversy Media；并且得到了相同的错误

这些安装Tailwindcss的说明位于https://v2.tailwindcss.com/docs/guides/create-react-app

为了解决这个问题，我首先-卸载了我以前安装的npm软件包链接(package.json中的链接(-删除了安装创建的tailwind.config.js和postscc.config.js文件

然后，我在上按照v3顺风的安装说明进行操作

https://tailwindcss.com/docs/configuration

npm install-D tailwindcss postpass autoprefixernpx tailwindcss init-p

配置了我的顺风.config.js

将tailwind的每个层的@tailwind指令添加到您的中/src/index.css文件。

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

当我试图启动应用程序时，我仍然收到了你收到的错误，我通过运行修复了这个错误

npm i postss-flexbugs修复npm i postss预设env

现在npm启动加载主App.jsx页面