What version of Tailwind CSS are you using?

v3 and v4

Reproduction URL

https://play.tailwindcss.com/ySYgzSn5FT

Describe your issue

Classes like supports-[font-format(opentype)]:grid generate invalid CSS, because we currently assume that supports values that don't contain : are a CSS property and we insert a variable at the end in an attempt to make the query valid:

@supports (font-format(opentype): var(--tw)) {
  .supports-\[font-format\(opentype\)\]\:grid {
    display: grid;
  }
}

This isn't a crazy complicated thing to fix but there are a number of test cases to consider:

supports-[font-format(opentype)]:grid
supports-[content:"("]:grid
supports-[(display:grid)_and_font-format(opentype)]:grid