Issue using 'inherit' with Tailwind CSS

Question

When I use the inherit property on a <span> it doesn't take the color of the parent, but it instead takes the color of the sibling.

My JSX:

<div className={`relative flex items-center justify-center bg-blue-500`}>
    <span
        className={`bg-rose-600 border-4 border-inherit h-16 w-16 absolute top-1 rounded-full duration-500 ${Menus[active].dis}`}>
    </span>
    <div className={`bg-white max-h-[4.4rem] max-w-[360px] px-6 rounded-t-xl mt-6`}>
</div>

I want the span to take the blue color, not the white one.

I tried to put important on the bg-color of the parent, but that doesn't work.

Any ideas?

Answer 1

You are missing border-color in your parent:

<div class="... border-amber-400 "> 👈 add border color here 
  <span class="border-inherit ... "> </span>
  <div class="... "></div>
</div>

Complete code:

<div class="relative flex items-center justify-center border-amber-400 bg-blue-500">
  <span class="absolute top-1 h-16 w-16 rounded-full border-4 border-inherit bg-rose-600 duration-500"> </span>
  <div class="mt-6 max-h-[4.4rem] max-w-[360px] rounded-t-xl bg-white px-6"></div>
</div>