reactjs - React craco 顺风 postcss 集成
问题描述
我的项目使用 craco 启动/构建,我希望集成 tailwind postcss。我已经按照本教程https://dev.to/ryandunn/how-to-use-tailwind-with-create-react-app-and-postcss-with-no-hassle-2i09 但结果,我很痛苦出现此错误:
我的配置文件如下所示:
craco.config.js (这个看起来像问题所在,因为我觉得样式可能会覆盖下面的 craco 样式,所以它导致了上述错误,但不是 100% 确定如何解决这个难题。)
module.exports = {
style: {
postcss: {
plugins: [
require("tailwindcss")("./tailwind.config.js"),
require("postcss-nested"),
require("autoprefixer"),
],
},
},
postcss.config.js
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.js'),
require('autoprefixer')
],
};
tailwind.config.js
module.exports = {
purge: ["./src/**/*.html", "./src/**/*.jsx", "./src/**/*.js", "./src/**/*.tx", "./src/**/*.tsx"],
theme: {
extend: {
screens: {
xs: { max: "400px" },
},
},
},
};
我正在运行应用程序
docker-compose up
有什么建议可以修复错误和配置吗?请提供一些代码示例提前谢谢
解决方案
您需要卸载 tailwindcss postcss 和 autoprefixer。然后使用这些特定版本重新安装它们
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
我遇到过同样的问题!此链接中有更多信息。https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
推荐阅读
- python - 如何摆脱numpy矩阵中的括号?
- javascript - hls.js:从 SourceBuffer 下载视频
- java - 我无法将我的 SpringbootApplication 与 Neo4j 连接
- python - 使用 python-vlc (libvlc) 时出现问题(win 错误 126)
- angular - 如何在Angular中为表格添加分页?
- python - 解析表 - tr.findall('td') - TypeError: 'NoneType' object is not callable
- java - 如何在圆形进度条中显示进度
- git - Git如何跟踪主分支中修改的文件
- angular - 如何将传单地图插入 Angular 模态组件
- javascript - 在summernote中按回车展开代码字段