如何在Nuxt 2.15.7中使用PostCSS对象语法结合tailwindcss/nesting与postcss-nesting，解决嵌套CSS配置错误并支持深度选择器>>>

Let's break down how to resolve both of your configuration issues step by step:

First: Understand the Root Causes #

1. Your initial object syntax failed because tailwindcss/nesting requires you to pass a valid nesting plugin (like postcss-nesting) as its argument—you were passing an empty object {} instead.
2. The array syntax error ("Cannot find module '0'") happens because Nuxt 2's PostCSS parser doesn't handle direct function calls (like require('tailwindcss/nesting')(require('postcss-nesting'))) in the plugin array directly. You need to wrap this logic in a function so Node executes the require calls first.

Working Solutions #

Solution 1: Fixed Object Syntax #

Use the object syntax, but correctly pass postcss-nesting to tailwindcss/nesting:

// nuxt.config.js
build: {
  postcss: {
    plugins: {
      'postcss-import': {}, // Keep this first for proper import handling
      'tailwindcss/nesting': require('postcss-nesting'), // Pass the nesting plugin here
      'tailwindcss': {},
      'autoprefixer': {}
    }
  }
}

This works because tailwindcss/nesting is a function that accepts a nesting implementation—we’re directly passing the imported postcss-nesting module as its argument.

Solution 2: Function-Based Array Syntax (Recommended for Complex Plugins) #

If you prefer array syntax, wrap the plugin configuration in a function so Nuxt executes the require/function calls correctly:

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

By returning the plugin object from a function, Node processes the require statements and function invocations before passing the result to Nuxt, avoiding the "module not found" error.

Pre-Requisite #

Make sure you’ve installed all required dependencies:

npm install postcss-import tailwindcss autoprefixer postcss-nesting --save-dev

Verify #

After updating your config, restart your Nuxt dev server. The "Nested CSS was detected..." error should disappear, and your >>> deep selectors should work as expected.

内容的提问来源于stack exchange，提问作者Marian Klühspies