tailwind how to make nav tabs always show scroll bar? - reactjs

Question

I have a nav with tabs.
But because it has a lot of tabs the user needs to scroll right to see them all.
The issue is on first load the user might not know this and think what is shown is all the tabs.
So I want to show a scrollbar on it all the time.
<nav
className="-mb-px flex space-x-8 overflow-x-auto"
aria-label="Tabs"
>
I have tried:
<nav
className="-mb-px flex space-x-8 overflow-x-scroll"
aria-label="Tabs"
>
But it did nothing.
I would also like to style the scrollbar with a smaller height and a different main and background color for it if possible.
The nav itself exists inside:
<div className=" pb-3 lg:fixed z-10 bg-white grid grid-cols-1 mr-16 ">
Thank you

Answer 1

For the scrollabar to show all the time,Use overflow-x-scrollAnd Make sure you add the fixed width to the parent element.
For styling scrollbar ,Tailwind CSS doesn't provide a built-in way . However, you can use the various ::-webkit-scrollbar pseudo-elements to style it.
so add the following in your main index.css file
#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;
}
}
So the final code goes like:
<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>
Final output (with custom styling of the scrollbar)