在TailwindCs中滚动

Question

我在顺风css中的水平滚动有问题(不是滚动(：

<div class="flex  items-center mb-10 overflow-x-auto  flex-none carousel pr-10 
opacity-at-end  mt-16 flex-row-reverse">
<?php $tags = $data->tags; ?> @foreach ($tags as $tag)
<a class=" flex-none">
</a>
<a class="active bg-white tertiary-color fs-18 fw-400 radius rounded-[30px] 
pt-4 pb-3 px-5 min-h-[44px] text-center ml-5 flex-none">
{{ $tag->name }}
</a> @endforeach
</div>

Answer 1

父元素必须有一个集合width或max-width，溢出才能工作。您可以使用tailwind的最大宽度实用程序类向父元素添加max-width，如下所示：

<div class="max-w-md">
<div class="flex items-center mb-10 overflow-x-auto flex-none carousel pr-10 opacity-at-end mt-16 flex-row-reverse">
<?php $tags = $data->tags; ?> 
@foreach ($tags as $tag)
<a class=" flex-none"></a>
<a class="active bg-white tertiary-color fs-18 fw-400 radius rounded-[30px] pt-4 pb-3 px-5 min-h-[44px] text-center ml-5 flex-none">
{{ $tag->name }}
</a>
@endforeach
</div>
</div>

Answer 2

您可以替换overflow-x-scroll而不是overflow-x-auto，并将宽度缩小一些，这样您就可以只看到2-3个项目的滚动行为。

以下是您可以检查的代码，

<script src="https://cdn.tailwindcss.com"></script>
<div class="carousel opacity-at-end mx-auto mb-10 mt-16 flex w-1/2 flex-none flex-row-reverse items-center overflow-x-scroll bg-slate-300 p-4 pr-10">
<a class="flex-none"> </a>
<a class="active tertiary-color fs-18 fw-400 radius ml-5 min-h-[44px] flex-none rounded-[30px] bg-slate-400 px-5 pt-4 pb-3 text-center"> $tag->name </a>
<a class="flex-none"> </a>
<a class="active tertiary-color fs-18 fw-400 radius ml-5 min-h-[44px] flex-none rounded-[30px] bg-slate-400 px-5 pt-4 pb-3 text-center"> $tag->name </a>
<a class="flex-none"> </a>
<a class="active tertiary-color fs-18 fw-400 radius ml-5 min-h-[44px] flex-none rounded-[30px] bg-slate-400 px-5 pt-4 pb-3 text-center"> $tag->name </a>
<a class="flex-none"> </a>
<a class="active tertiary-color fs-18 fw-400 radius ml-5 min-h-[44px] flex-none rounded-[30px] bg-slate-400 px-5 pt-4 pb-3 text-center"> $tag->name </a>
<a class="flex-none"> </a>
<a class="active tertiary-color fs-18 fw-400 radius ml-5 min-h-[44px] flex-none rounded-[30px] bg-slate-400 px-5 pt-4 pb-3 text-center"> $tag->name </a> a
</div>

我手动添加了5-6个标签，而不是for循环。查看全视图