Tailwindcss: SVG Hover not working as expected.

[chintanbanugaria]

Hey guys,

I am having an issue on hover of svg element. Here's my code
<a href="/dashboard" class="text-grey-darker text-base text-center leading-normal hover:text-blue px-2 py-2 m-2"> <svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-grey-darker h-6 align-middle m-2" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm-5.6-4.29a9.95 9.95 0 0 1 11.2 0 8 8 0 1 0-11.2 0zm6.12-7.64l3.02-3.02 1.41 1.41-3.02 3.02a2 2 0 1 1-1.41-1.41z"/></svg> Dashboard </a>

On hover only the text(i.e. Dashboard) changes its color. I have following in my tailwind.js
svgFill: ['hover'],

Am I missing something ?
Thanks,

[adamwathan]

You have this code on your SVG element:

<svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-grey-darker h-6 align-middle m-2" ...>

So you are setting it to text-grey-darker no matter what. Remove text-grey-darker from your SVG and everything will work as expected, you don't even need the hover stuff generated for the svgFill module.

<a href="/dashboard" class="text-grey-darker text-base text-center leading-normal hover:text-blue px-2 py-2 m-2">
  <svg xmlns="http://www.w3.org/2000/svg" class="fill-current h-6 align-middle m-2" viewBox="0 0 20 20">
    <path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm-5.6-4.29a9.95 9.95 0 0 1 11.2 0 8 8 0 1 0-11.2 0zm6.12-7.64l3.02-3.02 1.41 1.41-3.02 3.02a2 2 0 1 1-1.41-1.41z"/>
  </svg>
  Dashboard
</a>

[adamwathan]

Here's a JSFiddle:

https://jsfiddle.net/m1uv5ck7/

[chintanbanugaria]

Oh.. silly me. That did the trick. Thanks.