Nextjs config with postcss nesting doesn't work

Question

I am using nextjs with tailwindcss and i am facing the difficulty in adding postcss-nesting to my nextjs app.

Here is the configuration below for the same :

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

In my custom css file i am trying to use it like

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

then i am getting the error

"(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.

NOTE : I also tried changing my postcss.config.js to

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

as mentioned in the docs but it says

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

Answer 1

Had same error. When used:

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

Got this link: https://nextjs.org/docs/messages/postcss-shape

It shows how new config should be written (remove the require('package') function wrapping the strings). New postcss.config.js:

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

This fixed the nesting config issue for me.

Answer 2

I had same issue

1. install 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