What version of Tailwind CSS are you using?

v4.3.0

What build tool (or framework if it abstracts the build tool) are you using?

Tailwind Play. Also reproduced locally with @tailwindcss/cli@4.3.0.

What version of Node.js are you using?

N/A in Tailwind Play. Locally reproduced with Node.js v24.6.0.

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/luachSvslr

Describe your issue

The automatically generated not-* variant does not seem to negate custom variants that are implemented with container style queries correctly.

In the reproduction, this explicitly defined negative variant works:

@variant not-has-a {
  @container not style(--a) {
    @slot;
  }
}

<div class="bg-red-200 not-has-a:bg-green-200">Works</div>

But relying on Tailwind to generate the not-* version of this variant does not work:

@variant has-b {
  @container style(--b) {
    @slot;
  }
}

<div class="bg-red-200 not-has-b:bg-green-200">Does not work</div>

The generated CSS for not-has-b:bg-green-200 puts not after the style query:

.not-has-b\:bg-green-200 {
  @container style(--b) not {
    background-color: var(--color-green-200);
  }
}

I expected the generated CSS to put not before the style query condition, equivalent to the manually defined not-has-a variant:

.not-has-b\:bg-green-200 {
  @container not style(--b) {
    background-color: var(--color-green-200);
  }
}

This affects custom variants that use CSS container style queries, such as variants implemented with @container style(...).