文章
tailwind css滚动条设置
<div className='p-4 bg-white rounded-lg shadow-md overflow-scroll text-xs scrollbar-hide'>
<div className="flex gap-8 w-max">
{/* STORY */}
<div className="flex flex-col items-center gap-2 cursor-pointer">
<Image src="https://ui.shadcn.com/avatars/shadcn.jpg" alt="" width={80} height={80} className="w-20 h-20 rounded-full ring-2" />
<span className="font-medium">Ricky</span>
</div>
<div className="flex flex-col items-center gap-2 cursor-pointer">
<Image src="https://ui.shadcn.com/avatars/shadcn.jpg" alt="" width={80} height={80} className="w-20 h-20 rounded-full ring-2" />
<span className="font-medium">Ricky</span>
</div>
<div className="flex flex-col items-center gap-2 cursor-pointer">
<Image src="https://ui.shadcn.com/avatars/shadcn.jpg" alt="" width={80} height={80} className="w-20 h-20 rounded-full ring-2" />
<span className="font-medium">Ricky</span>
</div>
<div className="flex flex-col items-center gap-2 cursor-pointer">
<Image src="https://ui.shadcn.com/avatars/shadcn.jpg" alt="" width={80} height={80} className="w-20 h-20 rounded-full ring-2" />
<span className="font-medium">Ricky</span>
</div>
<div className="flex flex-col items-center gap-2 cursor-pointer">
<Image src="https://ui.shadcn.com/avatars/shadcn.jpg" alt="" width={80} height={80} className="w-20 h-20 rounded-full ring-2" />
<span className="font-medium">Ricky</span>
</div>
<div className="flex flex-col items-center gap-2 cursor-pointer">
<Image src="https://ui.shadcn.com/avatars/shadcn.jpg" alt="" width={80} height={80} className="w-20 h-20 rounded-full ring-2" />
<span className="font-medium">Ricky</span>
</div>
<div className="flex flex-col items-center gap-2 cursor-pointer">
<Image src="https://ui.shadcn.com/avatars/shadcn.jpg" alt="" width={80} height={80} className="w-20 h-20 rounded-full ring-2" />
<span className="font-medium">Ricky</span>
</div>
<div className="flex flex-col items-center gap-2 cursor-pointer">
<Image src="https://ui.shadcn.com/avatars/shadcn.jpg" alt="" width={80} height={80} className="w-20 h-20 rounded-full ring-2" />
<span className="font-medium">Ricky</span>
</div>
<div className="flex flex-col items-center gap-2 cursor-pointer">
<Image src="https://ui.shadcn.com/avatars/shadcn.jpg" alt="" width={80} height={80} className="w-20 h-20 rounded-full ring-2" />
<span className="font-medium">Ricky</span>
</div>
</div>
</div>以上代码中：overflow-scroll 外层div设置使用超出部门使用滚动条
内层div：flex gap-8 w-max 这是使用w-max展示滚动的所有元素，否则会变形
外层div：自定义scrollbar-hide 用来隐藏滚动条
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
scrollbar-width: none;
}