La configuración de Nextjs con postcss nesting no funciona.

Estoy utilizando Next.js con Tailwind CSS y me enfrento a la dificultad de agregar postcss-nesting a mi aplicación de Next.js.

Aquí está la configuración a continuación para lo mismo:

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: {},
  },
};

En mi archivo CSS personalizado, estoy tratando de usarlo de la siguiente manera:

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

Luego, obtengo el error:

"(2:3) Se detectó CSS anidado, pero la anidación CSS no se ha configurado correctamente.
Habilita un complemento de anidación de CSS *antes* de Tailwind en tu configuración.

NOTA: También intenté cambiar mi postcss.config.js a:

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

como se menciona en la documentación, pero dice:

Se pasó un complemento de PostCSS como una función usando require(), pero debe proporcionarse como una cadena.