反应Craco顺风的Postcss集成 [英] React craco tailwind postcss integration

问题描述

我的项目使用craco来启动/构建，我希望集成顺风的postcss.我已按照本教程

My project use craco to start/build, I wish to integrate tailwind postcss. I have follow this tutorial https://dev.to/ryandunn/how-to-use-tailwind-with-create-react-app-and-postcss-with-no-hassle-2i09 But as a result, I am suffering with this error:

我的配置文件如下所示:

My config files looks like below:

craco.config.js(这看起来像是问题所在，因为我觉得该样式可能会覆盖下面的craco样式，因此导致了上述错误，但不是100％确定如何解决此难题.)

craco.config.js (this one looks like where problem lies, as I feel like the style may overriding craco style underneath, so it caused above error, but not 100% sure how to resolve this puzzl.)

module.exports = {
  style: {
    postcss: {
      plugins: [
        require("tailwindcss")("./tailwind.config.js"),
        require("postcss-nested"),
        require("autoprefixer"),
      ],
    },
  },

postcss.config.js

postcss.config.js

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};

tailwind.config.js

tailwind.config.js

module.exports = {
    purge: ["./src/**/*.html", "./src/**/*.jsx", "./src/**/*.js", "./src/**/*.tx", "./src/**/*.tsx"],
    theme: {
        extend: {
          screens: {
            xs: { max: "400px" },
          },
        },
      },
  };

我从以下位置运行该应用程序

I am running the app from

docker-compose up

是否有解决错误和配置的建议?请提供一些代码示例预先感谢

Any suggestions to fix the error and config? Please advise with some code example Thanks in advance

推荐答案

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

You need to uninstall tailwindcss postcss and autoprefixer. Then re install them with these specific versions

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

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

I had the same issue! There is more info in this link. https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

这篇关于反应Craco顺风的Postcss集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！