如何在Tailwind CSS中移除水平滚动条？

Question

我在看TailwindCSS v3的YouTube视频中尝试了它们的新功能"Snap Feature"，但是当我在本地机器上实现时，它会显示一个类似于第一张图片下方的水平条。

但是在视频中却没有出现这种水平条。附图如下，但我已经按照视频中的代码编写了相同的内容。

视频参考链接：https://youtu.be/mSC6GwizOag?t=630

<div class="relative mt-32">
    <h1 class="text-5xl font-extrabold tracking-tight text-center underline capitalize decoration-emerald-400">Get away this winter</h1>
    <ul class="mt-10 pb-8 px-[50vw] w-full flex gap-8 snap-x overflow-x-auto self-center">

        <li class="snap-center">
            <div class="relative flex-shrink-0 max-w-[95vw] overflow-hidden rounded-3xl">
                <img src="https://images.unsplash.com/photo-1542144612-1b3641ec3459?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="" class="absolute inset-0 object-cover object-bottom w-full h-full " />
                <div class="absolute inset-0 w-full h-full bg-gradient-to-br from-black/75"></div>

                <div class=" relative h-96 w-[768px] p-12 flex flex-col justify-between items-start">
                    <div>
                        <p class="font-medium text-stone-50">Destination</p>
                        <h2 class="w-2/3 mt-3 text-3xl font-semibold tracking-tight text-white">amit deka</h2>
                    </div>

                    <a href="#" class="px-4 py-3 text-sm font-medium bg-white rounded-lg text-slate-900"> browse</a>
                </div>
            </div>
        </li>

        <li></li>*4 times
    </ul>
</div>

- Amit Deka

Answer 1

我目前正在尝试使用滚动捕捉功能和 tailwindcss 进行实验。由于我还没有找到相应的 tailwind 类，因此通过添加额外的 CSS 类来摆脱了滚动条。

/* Hide scrollbar for Chrome, Safari and Opera */
.container-snap::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.container-snap {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

因此，关于你的代码，当你将 .container-snap 类添加到 ul 元素时，滚动条将消失：

<div class="relative mt-32">
<h1 class="text-5xl font-extrabold tracking-tight text-center underline capitalize decoration-emerald-400">Get away this winter</h1>
<ul class="container-snap mt-10 pb-8 px-[50vw] w-full flex gap-8 snap-x overflow-x-auto self-center">

    <li class="snap-center">
        <div class="relative flex-shrink-0 max-w-[95vw] overflow-hidden rounded-3xl">
            <img src="https://images.unsplash.com/photo-1542144612-1b3641ec3459?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="" class="absolute inset-0 object-cover object-bottom w-full h-full " />
            <div class="absolute inset-0 w-full h-full bg-gradient-to-br from-black/75"></div>

            <div class=" relative h-96 w-[768px] p-12 flex flex-col justify-between items-start">
                <div>
                    <p class="font-medium text-stone-50">Destination</p>
                    <h2 class="w-2/3 mt-3 text-3xl font-semibold tracking-tight text-white">amit deka</h2>
                </div>

                <a href="#" class="px-4 py-3 text-sm font-medium bg-white rounded-lg text-slate-900"> browse</a>
            </div>
        </div>
    </li>

    <li></li>*4 times
</ul>

- 2Up1Down