【发布时间】：2021-12-02 16:39:06
【问题描述】：
我得到了一个带有 Tailwind 的 create-react-app 项目，最初它是按照官方指南 https://tailwindcss.com/docs/installation#building-your-css 安装的兼容 PostCSS 7 的版本：
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
已安装：
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
然后，在尝试构建 css 时，使用：
tailwind build -i src/app/styles/tailwind.css -o src/app/styles/base.css
它给出了错误：
node_modules\tailwindcss\peers\index.js:91395
throw new Error('PostCSS plugin ' + plugin.postcssPlugin + ' requires PostCSS 8.\n'
+ 'Migration guide for end-users:\n' + 'https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users');
^
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
所以，然后我尝试了另一种方式，更新了 tailwind、postcss 和所有内容以及 craco 配置，再次遵循官方指南：
npm install tailwindcss@latest postcss@latest autoprefixer@latest
还按照指南安装了craco 并创建了craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
这样做，用以下方式构建 css：
tailwind build -i src/app/styles/tailwind.css -o src/app/styles/base.css
正在工作，但是当我尝试使用 npm run craco start 启动项目时，它无法编译：
Failed to compile.
./node_modules/react-widgets/styles.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-widgets/styles.css)
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Failed to compile.
./node_modules/react-widgets/styles.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-widgets/styles.css)
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
所以我陷入了一种情况，我可以编译项目，但不能编译 css，或者编译 css，但不能编译项目。
【问题讨论】：
标签： reactjs tailwind-css