Tailwind styles not loaded on :hover

I’m using Pinegrow 5.99 and when I select a button component that is styled with Tailwind to make the text white on hover:text-white, and the button background hover:bg-indigo-500, but when I click on the :hover state in the style panel, only the button background will change. The text will remain black.

Here’s the Tailwind code for the button;

<a class="flex px-4 py-1 mb-3 ml-2 text-lg leading-normal text-white border-0 rounded bg-indigo-bp1 md:bg-transparent md:text-black lg:px-10 md:py-2 md:mb-0 md:ml-8 lg:ml-12 md:text-xl focus:outline-none md:hover:text-white hover:bg-indigo-bp1" value="/bestel" name="order-page" ""> <svg class="w-6 h-6 lg:w-7 lg:h-7 md:hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
    </svg><span class="underline sr-only sm:not-sr-only sm:ml-3 lg:text-xl" style="font-family: 'Inter', sans-serif; text-decoration-color: var(--ac1); font-weight: 400;">Bestel</span></a>

The idea is that the button will be displayed as an icon with underline text for a nice subtle icon on larger screens, whilst becoming a filled button on smaller devices with no text at all.

Ps, it’s not a breaking bug but it’s something that caught my eye

Hi @BonoBoos,
Nice bug find!
So, I did a copy paste of your code into my own Tailwind project. There seems to be two typos.

  1. Unless you have custom styling, it should be hover:bg-indigo-500, not hover:bg-indigo-bp1.
  2. There is a set of empty quotes at the end of you link open tag that is throwing a parse error.
    Once those are corrected, you are right - performing an actual hover gives the correct styling, but the Styles panel hover does not. We will look into it.

Hi Bob!

Thanks for coming back to me on this. I’m using custom styling for tailwind. Instead of magic numbers to ramp up the colors (and sizes) using my own convention base-plus-minus. Need more contrast? Base plus one (-bp1). Need less contrast? Base minus one (-bm1). So it’s the same; a reference to a color.

The empty quotes I have not seen but will check them out. Probably some placeholder stuff that I forgot to clean up.