Tailwind 如何使导航选项卡始终显示滚动条？答案

【问题标题】：tailwind how to make nav tabs always show scroll bar?Tailwind 如何使导航选项卡始终显示滚动条？
【发布时间】：2023-02-17 17:21:53
【问题描述】：

我有一个带标签的导航。

但是因为它有很多选项卡，用户需要向右滚动才能看到所有选项卡。

问题出在第一次加载时，用户可能不知道这一点，并认为显示的是所有选项卡。

所以我想一直在上面显示一个滚动条。

      <nav
          className="-mb-px flex space-x-8 overflow-x-auto"
          aria-label="Tabs"
        >

我努力了：

       <nav
          className="-mb-px flex space-x-8 overflow-x-scroll"
          aria-label="Tabs"
        >

但它什么也没做。如果可能的话，我还想为滚动条设置较小的高度和不同的主色和背景色。

导航本身存在于内部：

 <div className=" pb-3 lg:fixed  z-10 bg-white grid grid-cols-1 mr-16  ">

谢谢

【问题讨论】：

不同的主色和背景色是什么意思？您的意思是每个导航项的背景颜色和整个导航组件的背景颜色不同吗？

标签： reactjs next.js tailwind-css

【解决方案1】：

为了让滚动条一直显示，使用overflow-x-scroll并确保将fixed width添加到父元素。

对于样式滚动条，Tailwind CSS 没有提供内置方式。但是，您可以使用各种 ::-webkit-scrollbar 伪元素来设置样式。

所以在你的主index.css文件中添加以下内容

@layer components {
  .scrollbar::-webkit-scrollbar {
    width: 15px;
    height: 15px;
  }

  .scrollbar::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #f7f4ed;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: #e0cbcb;
    border-radius: 100vh;
    border: 3px solid #f6f7ed;
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: #c0a0b9;
  }
}

所以最后的代码是这样的：

<div className=" pb-3 lg:fixed  z-10  grid grid-cols-1 mr-16 w-64 ">
      <nav
        className="-mb-px flex text-green-400 space-x-8 overflow-x-scroll scrollbar"
        aria-label="Tabs"
      >
        <div className="mx-4">Item</div>
        <div className="mx-4">Item</div>
        <div className="mx-4">Item</div>
        <div className="mx-4">Item</div>
        <div className="mx-4">Item</div>
      </nav>
    </div>

最终输出（使用滚动条的自定义样式）

【讨论】：

【解决方案2】：

现在如果我想向这个导航栏添加一个下拉菜单怎么办我无法弄清楚

【讨论】：