React craco 顺风 postcss 集成答案

【问题标题】：React craco tailwind postcss integrationReact craco 顺风 postcss 集成
【发布时间】：2021-02-05 15:55:39
【问题描述】：

我的项目使用 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

对修复错误和配置有什么建议吗？请提供一些代码示例提前致谢

【问题讨论】：

尝试使用postcss 而不是postcss-nested 插件。我按照同一篇文章让 Tailwind 与 CRA 合作。删除require("postcss-nested"), 行和yarn add postcss

标签： reactjs docker-compose tailwind-css postcss craco

【解决方案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

【讨论】：