Перекрытие при попытке создать область выделения React Tailwind Flex ⇐ CSS

[Anonymous]

Я хочу создать область выделения с помощью Tailwind в React, но почему-то все это перекрывается. Я пробовал устанавливать различные классы, такие как flex-nowrap, flex-shrink-0 и gap-x. Ничего из этого не сработало. Код компонента Marquee:

импортировать React из 'реагировать'; интерфейс MarqueeProps расширяет React.PropsWithChildren { className?: string; } функция экспорта по умолчанию Marquee(p: MarqueeProps) { const реквизит: MarqueeProps = { className: '', ...p }; вернуть {props.children {props.children ; } Код вызова:

{slideshow.map((src) =>

)} // Где слайд-шоу — это список строк. Анимация попутного ветра:

расширить: { анимация: { marquee1: 'marquee1 20 с линейная бесконечность', marquee2: 'marquee2 20 с линейная бесконечность' }, ключевые кадры: { шатер1: { '0%': {transform: 'translateX(0%)' }, '100%': {transform: 'translateX(-100%)' } }, выделение2: { '0%': { Transform: 'translateX(100%)' }, '100%': {transform: 'translateX(0%)' } } } } Вот что он производит на данный момент. https://imgur.com/a/RfgHtpr