为什么任何后Why嵌套插件都不能工作？

Question

(4:3)检测到嵌套CSS，但CSS嵌套尚未正确配置。请在配置中的尾风之前启用CSS嵌套插件。看这里如何：https://tailwindcss.com/docs/using-with-preprocessors#nesting

我的postcss.config.js文件：

  plugins: [
    "postcss-import",
    "tailwindcss/nesting",
    "tailwindcss",
    "autoprefixer",
  ],
};

我试着写成这样：

  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

就像这样：

  plugins: [
    require("postcss-import"),
    require("tailwindcss/nesting"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

使用此项目的Github回购：https://github.com/frkam/test-app

当我尝试使用嵌套时，我得到了以下信息：在这里输入图像描述

Answer 1

正如Ed上面提到的，CRA5不允许覆盖postcss.config，但是现在可以使用类似于克拉科的东西

在Felipe 评论中可以找到一个例子

这对我有用。因此，我希望这会有所帮助:)

我的craco.config

module.exports = {
  style: {
    postcss: {
      loaderOptions: (postcssLoaderOptions) => {
        postcssLoaderOptions.postcssOptions.plugins = [
          require('tailwindcss/nesting'),
          require('tailwindcss'),
          require('postcss-mixins'),
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 0,
            },
          ],
        ]

        return postcssLoaderOptions
      },
    },
  },
}