Nextjs 配置与 postcss 嵌套不起作用

Question

我正在将 nextjs 与 tailwindcss 结合使用，并且在将 postcss-nesting 添加到我的 nextjs 应用程序中时遇到困难。

以下是相同的配置：

next.config.js

const withPlugins = require("next-compose-plugins");
module.exports = withPlugins([], {});

postcss.config.js

module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
    "tailwindcss/nesting",
    "postcss-nested",
  ],
};

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./src/components/**/*.{js,ts,jsx,tsx}",
    ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
};

在我的自定义 css 文件中，我尝试像这样使用它

.toolbar_navigation_items {
  li {
    @apply text-3xl;
  }
}

然后我收到错误

"(2:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.

注意：我还尝试将 postcss.config.js 更改为

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

正如文档中提到的，但它说

A PostCSS Plugin was passed as a function using require(), but it must be provided as a string.

Answer 1

我有同样的问题

1. 安装 postcss 嵌套：npm install -D postcss-nesting

2. postcss.config.js：

module.exports = {
  plugins: {
    "tailwindcss/nesting": "postcss-nesting",
    tailwindcss: {},
    autoprefixer: {},
  },
};

https://tailwindcss.com/docs/using-with-preprocessors#nesting