5.0.0-4 existing postcss config does not work with new defaults

Version

@nuxtjs/tailwindcss^5.0.0-4 “nuxt-edge”: “latest” “@nuxt/bridge”: “npm:@nuxt/bridge-edge”,

Steps to reproduce

I have the following existing postcss config in my project:

postcss: {
      plugins: {
        "postcss-nested": {},
        autoprefixer: {},
      },
    },

The resultant postcss config after the defaults are merged is as follows:

{                                                                                                                                                                                      
  'postcss-nesting': {},
  'postcss-custom-properties': {},
  tailwindcss: { }, // ... my config 
  'postcss-nested': {},
  autoprefixer: {},
}

I get Tailwind warning me that: “Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin before Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting”

So I see a few issues here:

1. Is there a way to turn off your default config (remove 'postcss-nesting': {}, 'postcss-custom-properties': {} and use postcss-nested ?

2. How can I keep the plugin order correct to make sure Tailwind is happy with me?

I have a large codebase so refactoring all the css to use the nesting standard instead of the scss-compatible nested standard is not something I’m able to do right now.

I was struggling to get a codesandbox set up to show a reproduction - It kept crashing with 502 errors, so In left it. Hopefully the above info is enough to understand the issue. I can look further into a reproduction if necessary.

[visualval]

this worked for me

  build: {
    postcss: {
      order: ['tailwindcss/nesting', 'tailwindcss', 'autoprefixer'],
      plugins: {
        "postcss-nested": false
      }
    },
},

[jonathanjameswatson]

As a temporary fix on Nuxt 3 with Vite you can add the following module:

import type { Plugin } from 'postcss'

import { defineNuxtModule } from '@nuxt/kit'

const order = (names: Plugin[]) => {
  const tailwindNesting = names.splice(
    names.findIndex((plugin) => plugin.postcssPlugin === 'tailwindcss/nesting'),
    1
  )[0]
  names.unshift(tailwindNesting)
}

export default defineNuxtModule({
  hooks: {
    'vite:extend'({ config }) {
      order(config.css.postcss.plugins)
    },
  },
})