SVG color fill on hover using Tailwind

Question

I've been trying to get my svg to fill in with black on hover but can't seem to do it.

I want it to have black outline like this .
And then fill like this .

This is the code I would expect to work to fill it in on hover. However, it doesn't quite work. If I take the hover: off of hover:fill-current then it just fills in black the whole time.

<svg class="h-6 w-6 text-black hover:fill-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
    stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>

Any ideas?

Answer 1

1- By default only responsive variants are generated for fill utilities. So, we need to create the required variation to activate :hover state for fill-current class.

module.exports = {
  theme: {
    extend: {
    },
  },
  variants: {
    fill: ['hover', 'focus'], // this line does the trick
  },
  plugins: [],
}

2- Consider to use a color class to obtain the exact result.

<svg class="h-6 w-6 text-black hover:fill-current hover:text-black" ... />
</svg>

Working example

Reference

Fill - Tailwind docs