generated class with has-[role=*] showing syntax error warning

[imaksp]

What version of Tailwind CSS are you using?
4.1.11

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

postcss, Angular 20.1

What version of Node.js are you using?
22.x

What browser are you using?
N/A

What operating system are you using?
MacOS 15

Reproduction URL
https://play.tailwindcss.com/BxrVeJ46Lj

Describe your issue

it generates following css with classes like has-[role=checkbox]:w-px:

.has-\[role\=checkbox\]\:w-px {
  &:has(*:is(role=checkbox)) {
    width: 1px;
  }
}

getting following syntax error with generated css:

▲ [WARNING] Unexpected "=" [css-syntax-error]

    src/styles.css:864:19:
      864 │     &:has(*:is(role=checkbox)) {

let me know whether it is safe to ignore.

[wongjn]

It is incorrect CSS syntax, but it's because the class name is incorrect Tailwind syntax. It should be has-[[role=checkbox]]:w-px, (double square brackets).

[imaksp]

Ok, thanks, it was coming from origin-ui lib will fix it at my side.