React craco tailwind postcss 集成

Question

我的项目使用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样式下面的样式，所以导致上面的错误，但不确定如何解决这个难题）。

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

有没有修复错误和配置的建议？ 请给出一些代码示例。 提前致谢

- sefirosu

---

尝试使用postcss替代postcss-nested插件。我遵循了同一篇文章使Tailwind在CRA中工作。删除require("postcss-nested"),行和yarn add postcss。 - drichar

Answer 1

您需要卸载 tailwindcss postcss 和 autoprefixer。然后使用这些特定版本重新安装它们。

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

我也遇到了同样的问题！这个链接里有更多信息。https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

- JayMGonzalez