how to get class in javascript with colon syntax for making dynamic class like tailwind css-CodePudding

i want to make dynamic class for hover , focus ,check and others. but I can't able to get those class format(hover:bg-sky-700) for using colon(:).it shows error in console. please provide an idea to make dynamic class like tailwinds. thank you.

<div ></div>

enter image description here

CodePudding user response：

If your class name contains reserved characters(., :, # etc.) you need to escape it to avoid ambiguity using CSS.escape:

// be careful you don't want to escape the leading "." since it meant to be indicating a class selector
const element = document.querySelector(`.${CSS.escape('hover:bg_green')}`);
console.log(element);

<div ></div>