Tailwindcss: Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '.hover:bg-grey' is not a valid selector.

[valh1996]

Hello,

I don't know why this error appears. Indeed, I have this error in the console when I right-click on some elements, mainly buttons. Here are some mistakes that all seem to be getting closer:

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '.hover:bg-grey' is not a valid selector.

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '.w-1/3' is not a valid selector.

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '.md:w-1/2' is not a valid selector.

I would like to point out that I do not use QuerySelectorAll() on my side.

Thank you for your help!

Best regards,
Valentin

[devcircus]

You possibly need to escape some of tailwind's unusual characters like "/" and ":". Not sure though as I give specific classes to elements that need to be used in selectors.

[adamwathan]

This error is coming from a Chrome extension you have installed that isn't properly escaping CSS classes, I'd try disabling all extensions and verifying that the error goes away then enabling them one at a time to find out which one it is.

[tlgreg]

If somebody finds this with their own code: querySelector does work with escaped selectors.

Just looking at the ID of the extension seems like this is something built-in into Brave browser.

[valh1996]

Problem solved, thank you all for your answers 💯!

Solution: I updated Brave to its latest version. And from the settings, I checked the "Hide the Brave Rewards button" box.