How to use Tailwind Nested Declarations with postcss.config.js without require()

Question

I'm trying to use nested declarations in Tailwind, so, in their docs they show postcss.config.js using require() from CommonJS:

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

I need the same behavior, but in another format, not using the require() format, example:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Answer 1

You need to install postcss-import via npm/yarn and then change your postcss.config.js to:

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

Also: When you use tailwindcss to transpile your CSS make sure you have the --postcss flag enabled.