TailwindCss: if base colour is defined on child div (description), hover property of main div does not work

Question

I have applied hover: text-white but when I hover on it, the first child (label) changes color but not second child (description).

    <div
      className={`border-solid border-border-light bg-screen-grey flex flex-col gap-[60px] items-start pt-8 pb-6 px-5 border-[0.5px] rounded-[8px] cursor-pointer hover:bg-primary-base hover:text-white`}
#     >
  
      <div className="self-stretch flex flex-col gap-[24px] items-start">
        <div className="text-lg font-semibold leading-[32px] w-full">
          {label}
        </div>
        <div className="leading-[20px] text-secondary-600 text-base w-full ">
          {description}
        </div>
      </div>
    </div>

The description field always get base colour (text-secondary-600) even when hover is applied.

I want to retain the base color and also apply hover:text-white

Any Solution

Answer 1

The text-secondary-600 gets priortized because it's on the child itself. One way to solve this problem is by adding a group to the parent div and use group-hover for the child

<div
  className={`group border-solid border-border-light bg-screen-grey flex flex-col gap-[60px] items-start pt-8 pb-6 px-5 border-[0.5px] rounded-[8px] cursor-pointer hover:bg-primary-base hover:text-white`}>

  <div className="self-stretch flex flex-col gap-[24px] items-start">
    <div className="text-lg font-semibold leading-[32px] w-full">
      {label}
    </div>
    <--- Add group-hover:text-white --->
    <div className="leading-[20px] text-secondary-600 group-hover:text-white text-base w-full ">
      {description}
    </div>
  </div>
</div>