React heroicons icons are always black

Question

I'm using @heroicons/react: ^1.0.5 and I'm trying to style the icons by applying another color. I'm using tailwindcss to manage my CSS.

When I declare the following component inside a button tag

<PencilIcon className='text-white' />

I get the following result on my browser (Chrome 95)

The exact same code works when I access the app on my phone with Chrome 95 (the pencil icon is white).

This is the generated HTML for the icon:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" class="text-white">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
</svg>

When I open the devtools I can see that the computed color of the svg tag is indeed white but the computed color for the path tag is rgb(17, 24, 39) which is inherited from the following CSS rule I have in my global CSS file.

*
{
    font-family: Inter, sans-serif;
    @apply text-gray-900;
}

Commenting the @apply directive solves my issue but I'm curious as to why it's behaving in this way. Especially when the Chrome on my phone can handle it okay.