Some time ago, I inquired about a way to avoid repeating the same prefix in TailwindCSS like `hover:` multiple times here.
Someone was able to solve the issue using javascript, which seems to be working perfectly fine for now.
However, a commenter mentioned that using `${className}` is not ideal.
The specific line in question is:
element.classList.add(`${pseudo}:${className}`);
// example output: "hover:bg-blue-500"
At this juncture, I am uncertain whether it is correct or not, as ultimately it will simply add a string in the developer tools.
JavaScript will automatically translate it into browser-friendly code.
Previously:
<div class="text-white">
After:
// ✅ This is what I obtain
<div class="text-white hover:bg-blue-500">
// This could be what the individual is concerned about happening
// Or it may be an unknown bug he referenced
<div class="text-white ${pseudo}:${className}">
As you can see, the browser correctly adds it.
I am unsure where the script might be incorrect, so I intend to rectify it to prevent any bugs in the future.
Currently, I am solely utilizing HTML and CSS. Perhaps the bug might only occur in React and frameworks where you are unable to use classList.add() but need to directly input the class in the return?
If anyone knowledgeable and experienced knows about the bug being mentioned, please inform me.
(And also, if it is something not worth worrying about, kindly let me know so I can implement it across all my projects.)