reactjs - React craco tailwind 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

https://stackoverflow.com/questions/64485516/

相关文章:

reactjs - 如何使用代理将 Flask API 和 React 前端微服务部署到 Googl

python - 异常值处理部分零值过多怎么办?

java - 对于 IntelliJ 中的 Java 项目,Run 命令究竟做了什么?从 ./mvn

python - 如何为带有输入的代码编写单元测试 (Python)

c# - 自动展开PropertyGrid中的一些属性

graphql - 在 Gatsby 上渲染 Contentful Reference (many)

python - pygame双显示器和全屏

docker - 使用 .Net Core 3.1 api (docker) 运行 Heroku 时

git - 无法推送到 bitbucket 403 "authentication failed"

html - 输入类型 "email"在:focus state时变为 "text"