要使滚动条始终显示，请使用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>

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