Useful trick if you ever need to use inline styles because a value is coming from the database or something but also need to change those styles on hover or similar — Use those values to set CSS variables using inline styles, then use arbitrary values to read the variables 🧠
@adamwathan i don’t see how it’s necessary to use tailwind for the non-hovered state. it feels like it’s just there for the sake of it
@adamwathan How would you apply bg opacity to those colors? I tried with bg-opacty-10 or /10, but it doesn't work play.tailwindcss.com/qLbGj1TFv7
@adamwathan Thanks, Adam. I wasn't aware of this neat trick. Can use it in of my apps where I included a few hidden divs just to get the class not removed !
@adamwathan I use this pattern a ton. I was actually working on a plugin a while back that would automate most of that, so you could just use tw`hover:bg-[${dynamicValue}]` and let the helper function add and manage the inline styles for you and add the dynamic utility to the safelist
@adamwathan I think there should be a simple syntax to use variables in class utilities. Something like `bg-$varialbeName`