Horizontal scrolling tabs

[steveoh]

I have a small area to add tabs and I need more tabs in my tablist than there is horizontal space for. To allow the tabs to scroll i've added a div around the tablist that allowed it to scroll.

 <Tabs onSelectionChange={(key) => console.log(key)}>
  <TabList aria-label="Project details" className="overflow-y-hidden overflow-x-scroll pb-4">
    <Tab id="details">Details</Tab>
    <Tab id="features">Features</Tab>
    <Tab id="reference">Reference</Tab>
  </TabList>

Then I want to scroll the tab into view when it's clicked on but I'm not sure how to access the tab to use scrollIntoView. I've also explored the tailwind scroll snapping without any luck.

Does anyone have any advice for how to achieve this?

[steveoh]

🦗 Happy new year :)