tailwind css first-child and last-child

Question

can you guys help me with this problem I am having with first-child and last-child while using tailwind css. I have been debugging but cannot see the problem.

Here is what the radio buttons look like

So, basically I have a radio button group which I created by using headless ui. The code for the radio button is below. I did not paste the entire code, just the part where there is a problem. So basically I have a items array and I am mapping over it to create each individual radio button.

    <div className="inline-block ml-2 mt-3">
        {items.map((item) => (
            <RadioGroup.Option
             as="div"
             key={item.value as number | string}
             value={item}
             className="inline-block w-[72px] h-[30px] cursor-pointer bg-[#f8f8f8] border-solid border border-[#b2b2b2] first-child:rounded-l-2xl last-child:rounded-r-2xl"
             >
                {({ checked }): JSX.Element => (
                <RadioGroup.Label
                as="p"
                className={`text-center p-1 text-sm first-child:rounded-l-2xl last-child:rounded-r-2xl ${
                  checked && 'bg-[#d7d7d7]'
                  } ${!disabled && 'text-[#989898]'}`}
                >
                  {item.label}
                </RadioGroup.Label>
                )}
            </RadioGroup.Option>
         ))}
    </div>

and my tailwind.css file has the below code

.first-child\:rounded-l-2xl:first-child {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.last-child\:rounded-r-2xl:last-child {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

Because I want to get the round corners for the first radio button and last radio button, I used the first-child and last-child. Looks like the tailwind css worked for the button itself but when I also applied the styles to the click effect, the first-child and last-child was applied to all of them. Can someone help me? I have been stuck for an hour debugging this thing. Thanks in advance!

Answer 1

//just use like this

first-child --> first
last-child --> last

<li class="flex py-4 first:pt-0 last:pb-0"></li>



<div class="first:rounded-l-2xl last:rounded-r-2xl w-full h-full">

</div>

Answer 2

use like this i hope work for you

<RadioGroup.Label class="[&>*:first-child]:bg-gray-700"></RadioGroup.Label>