CSS для первого и последнего ребенка попутного ветра ⇐ CSS

[Anonymous]

Можете ли вы, ребята, помочь мне с этой проблемой, с которой я столкнулся с первым дочерним элементом и последним дочерним элементом при использовании CSS попутного ветра. Я занимаюсь отладкой, но не вижу проблемы.
Вот как выглядят переключатели


Итак, по сути, у меня есть группа переключателей, которую я создал с помощью безголового пользовательского интерфейса. Код переключателя приведен ниже. Я не вставлял весь код, а только ту часть, где есть проблема. Итак, по сути, у меня есть массив элементов, и я сопоставляю его для создания каждого отдельного переключателя.

Код: Выделить всё

{items.map((item) => (

{({ checked }): JSX.Element => (

{item.label}

)}

))}

и мой файл Tailwind.css содержит приведенный ниже код

Код: Выделить всё

.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;
}

Поскольку я хочу получить закругленные углы для первого и последнего переключателей, я использовал first-child и Last-child. Похоже, CSS-код попутного ветра работал для самой кнопки, но когда я также применил стили к эффекту щелчка, ко всем из них были применены стили first-child и Last-child. Может ли кто-нибудь мне помочь? Я застрял на час, отлаживая эту штуку. Заранее спасибо!







Подробнее здесь: https://stackoverflow.com/questions/736 ... last-child