PostCSS nested not fully working

Version

@nuxtjs/tailwindcss: v3.3.4 nuxt: v2.14.11

Reproduction Link

https://codesandbox.io/s/funny-hugle-1tyt8?file=/pages/index.vue

Steps to reproduce

I can’t append to class names.

I thought maybe I was doing something stupid but the example at postcss-nested doesnt work either.

.test {
  color: red;

  &_working {
    color: green;
  }

  & .nested {
    color: blue;
  }
}

What is Expected?

.test {
  color: red
}
.test_working {
    color: green;
}
.test .nested {
    color: blue;
}

What is actually happening?

.test {
  color: red
}
.test {
&_working {
    color: green;
}
}
.test .nested {
    color: blue;
}

[Atinux]

Hi @csheppard

Nuxt does not include postcss-nested by default, but it is really easy to add postcss plugins:

export default {
  build: {
    postcss: {
      plugins: {
        "postcss-nested": {}
      }
    }
  }
}

I updated your sandbox and it’s working: https://codesandbox.io/s/postcss-plugin-with-nuxt-tailwind-gyfo8?file=/nuxt.config.js:292-379

I also updated the documentation: https://tailwindcss.nuxtjs.org/examples/postcss-plugin

PS: sorry for the late answer

[gangsthub]

Ok, mystery solved 😅 https://github.com/nuxt-community/tailwindcss-module/releases/tag/v4.0.1

postcss-nesting is not the same as postcss-nested!

👀

So, instead of

.something {
  .somethingElse {
    color: green;
  }
}

You need to do:

.something {
  & .somethingElse {
    color: green;
  }
}

Which is compliant with https://drafts.csswg.org/css-nesting-1/