带有 postcss 嵌套的 Nextjs 配置不起作用

Question

我正在使用带有 tailwindcss 的 nextjs，我在将 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

有同样的错误。使用时：

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

得到这个链接：https://nextjs.org/docs/messages/postcss-shape

它显示了应该如何编写新配置（删除包装字符串的require('package') 函数）。新的 postcss.config.js：

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

这为我解决了嵌套配置问题。

Answer 2

我有同样的问题

1. 安装postcss-nesting：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