# Tailwind styles not loaded on :hover

**URL:** <https://forum.pinegrow.com/t/tailwind-styles-not-loaded-on-hover/4853>\
**Category:** Bug Reports\
**Created:** [January 19, 2021, 10:06pm UTC](https://forum.pinegrow.com/t/tailwind-styles-not-loaded-on-hover/4853 "2021-01-19T22:06:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![BonoBoos](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@BonoBoos](https://forum.pinegrow.com/u/BonoBoos)\
**Post date:** [January 19, 2021, 10:06pm UTC](https://forum.pinegrow.com/t/tailwind-styles-not-loaded-on-hover/4853/1 "2021-01-19T22:06:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [January 20, 2021, 10:56am UTC](https://forum.pinegrow.com/t/tailwind-styles-not-loaded-on-hover/4853/2 "2021-01-20T10:56:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BonoBoos](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@BonoBoos](https://forum.pinegrow.com/u/BonoBoos)\
**Post date:** [January 25, 2021, 3:15pm UTC](https://forum.pinegrow.com/t/tailwind-styles-not-loaded-on-hover/4853/3 "2021-01-25T15:15:50Z")

</div>

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.