CSS Custom Properties implementation guide on Hover in Tailwind CSS
I'm confused about I'm working on a personal project and Hey everyone, I'm running into an issue that's driving me crazy... I'm trying to use CSS custom properties to change the colors of certain elements when hovered, but it seems like the changes are not taking effect as expected when using Tailwind CSS. I'm defining custom properties in a CSS file like this: ```css :root { --primary-color: #3490dc; --hover-color: #1d68a7; } ``` Then in my Tailwind styles, I set a couple of elements to use these properties: ```html <div class="bg-[var(--primary-color)] hover:bg-[var(--hover-color)] text-white p-4 rounded"> Hover over me </div> ``` However, when I hover over the div, it doesn't change to the `--hover-color`. Instead, it just stays the same. I also tried adding `!important` to my Tailwind classes but that didn't help. I verified that Tailwind is processing my custom properties correctly by checking the generated CSS. One thing I noticed is that this behavior only happens when I use the `bg-[var(--primary-color)]` syntax. If I replace it with a fixed color like `bg-blue-500`, the hover state works perfectly. I'm using Tailwind CSS version 2.2.19 and I've confirmed that it supports arbitrary values like this. Is there something I'm missing, or is this a known scenario with Tailwind and CSS variables on hover? Any help would be appreciated! I'm working on a service that needs to handle this. Am I missing something obvious? This is part of a larger service I'm building. Thanks in advance! I'd really appreciate any guidance on this.