反应Craco顺风的Postcss集成

如何解决反应Craco顺风的Postcss集成

我的项目使用craco来启动/构建，我希望集成顺风的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