hover: stops working when adding bg-gradient-to-r

[MoElaSec]

• login, signup, admin -> hover:bg-gray-700 works fine
• Home -> when adding bg-gradient-to-r hover: get's ignored

---

login and other links that don't have gradient work fine just exactly like I want.
However, Home link when I add bg-gradient-to-r hover: gets ignored
, and yes when I remove it hover works fine

this is how it looks:

see how the login hover effect looks like!
I would like Home to also have a hover effect and the same goes for all links + supports gradient

<div class="hidden sm:block sm:ml-6">
          <div class="flex space-x-4">
            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
            <a href="/" class="bg-gradient-to-r from-indigo-600 via-blue-800 to-gray-900 hover:bg-gradient-to-r from-indigo-100 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Home</a>

            {% if (current_user.is_authenticated) and (current_user.username == username.admin) %}
              <a href="/admin" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Admin</a>
            {% endif %}

            {% if not current_user.is_authenticated %}
              <a href="/login" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Login</a>

              <a href="/signup" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Signup</a>
            {% endif %}
            {# <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a> #}
          </div>
</div>

[olets]

You're using

bg-gradient-to-r hover:bg-gradient-to-r from-indigo-600 from-indigo-100 via-blue-800 to-gray-900

To change the background on hover, you'll need at least one of hover:from-<some color>, hover:via-<some color>, or hover:to-<some color>.

In addition your hover:bg-gradient-to-r is unnecessary (it duplicates the styles inherited from bg-gradient-to-r, and your from-indigo-600 isn't doing anything (it's overrided by by your from-indigo-100).

[MoElaSec]

thankx for your reply 😊 I indeed found the documentation here:
https://tailwindcss.com/docs/gradient-color-stops#hover

but didn't find my issue and then later forgot to update it with the answer 😅