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!

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Sep 05 '22 at 12:44

score 12 · Answer 1 · answered Sep 07 '22 at 11:30

12

//just use like this

instead of first-child --> first and 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>

answered Sep 07 '22 at 11:30

raghava

144
5

score 0 · Answer 2 · answered Oct 27 '22 at 11:47

I want to target the first element of the list. But when I do with first: then it doesn't work for me:

So, I target the Item with index. let's see the code

          <ul className="text-[#AFB8BD] first:text-black">
            {[
              "Industrial",
              "New Construction",
              "Renovations",
              "Start-up",
              "Tenant Improvements",
            ].map((item, index) => (
              <li
                key={index}
                className={`text-lg pb-5 ${
                  index === 0 ? "text-[#456173]" : "text-[#AFB8BD]"
                }`}
              >
                {item}
              </li>
            ))}
          </ul>

tailwind css first-child and last-child

2 Answers2