Bug description

PostHog doesn't support HTML selector matches with CSS classes that contain non-alphanumeric characters. This becomes a problem for sites that use Tailwind CSS. If a customer is strictly using Tailwind, targeting HTML selectors becomes tricky.

Examples:

.rounded-sm
button[class="rounded-sm"]
.py-2.5 (notice the dot used _within_ the class)
.border-[1.5px]
.!ml-auto

Example HTML for an element like this (defined in this action):

Here's what PostHog sees:

It's worth noting that, while the class in the DOM shows like text-[15px], the Tailwind class it's actually referencing (as seen in the Styles tab in Inspector) escapes characters like [, ], .:

.text-\[15px\] {
    font-size: 15px;
}

I also tried creating an action that escaped the non-alphanumeric characters (like .border-\[1\.5px\]) but it returns a 500 error when trying to calculate:

Somewhat related: #3047