Tailwind styles not loaded on :hover

General Bug Reports
1

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

2

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.
    Bob
3

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.