Special character in group-has-[xxx] not escaped

[HexMox]

What version of Tailwind CSS are you using?

v3.4.13

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

postcss-cli 8.4.47, Next.js 14.2.8

What version of Node.js are you using?

v18.20.4

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

N/A

Describe your issue

The colon in css result .group:has(xxx) is unescaped

[RobinMalfait]

Hey! When you are using a selector inside of has then you have to escape the special characters yourself.

v3 example: https://play.tailwindcss.com/Oa45Tb30EK v4 example: https://play.tailwindcss.com/xoIM1xRiNn

The reason why is because you can also use .sm:hover for example where the styles only apply if the sm class is being hovered. In this case you probably don't want the : to be escaped so from Tailwind CSS's perspective we use the contents as-is and let you decide how you want to handle it.

Here is an example with hover: https://play.tailwindcss.com/jmam25ysYU

---

That said, if you are writing these classes in a JavaScript string, then \ is not enough, and you probably want \\. Once you do that, then the amount of \ don't line up anymore because once your class ends up in the DOM it will have a single \ instead of \\ as seen in the JS file.

In this case, you can use String.raw to get around this, e.g.:

const myClass = String.raw`group-has-[.sm\:sticky]/root:bg-white`

Because of the String.raw tagged template literal, a single \ is sufficient and this will now match the generated CSS as well.

Hope this helps!