CSS rule for `::placeholder` > `@supports` > `color-mix` does not have the correct selector in local dev

[jameskirkby]

What version of Tailwind CSS are you using?

4.1.15

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

15.5.6

What version of Node.js are you using?

22.16.0

What browser are you using?

Chrome 141.0.7390.108

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/3fRxLMkUkj

Describe your issue

CSS rule for ::placeholder > @supports > color-mix does not have the correct selector in local dev, however it does have the correct output in builds.

Local dev:

@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
    ::placeholder {
        color: currentcolor;
        @supports (color: color-mix(in lab, red, red)) {
            & {
                color: color-mix(in oklab, currentcolor, transparent);
            }
        }
    }
}

Builds:

@supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
        color:currentColor
    }

    @supports (color: color-mix(in lab,red,red)) {
        ::placeholder {
            color:color-mix(in oklab,currentcolor 50%,transparent)
        }
    }
}

From local testing, this means that the placeholder colour is not updated in local dev (however it is correct in builds).

The issue can be reproduced on the Reproduction URL linked above

[thecrypticace]

We just released a fix for this in 4.1.16 — update and it should start working again 👍

Play should get updated soon — you can switch to the insider build in play to see it working now though