Safari dev mode style view is a mess.

[crswll]

What version of Tailwind CSS are you using?

v4.1.14

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

N/A

What version of Node.js are you using?

N/A

What browser are you using?

Safari Version 26.0 (21622.1.22.11.14)

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/URAe1z3mim

Describe your issue

In Safari, while Tailwind CSS is in dev mode, the "Styles" section in their devtools is all off. The styles are applied fine, though.

The issues is due to this CSS (or any custom rule that uses currentcolor with color-mix() so the color-mix() polyfill is used).

@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 50%, transparent);
    }
  }
}

These two alternatives seem to resolve the issue which seems to be the lack of & or just repeating the selector, thanks @RobinMalfait.