How to custom default scrollbar using Tailwind in ReactJS-CodePudding

I have code below :

<div className={cx('overflow-x-scroll')}>
     <TabNavigation data={tabs}/>
</div>

I need a custom size thumb scrollbar, from big to small. I am using the tailwind-scrollbar package but my machine is not supported because my project is using node v12.22.9. I have also been browsing but still can't find the answer.

CodePudding user response：

Tailwind-scroll bar does not provide a solution to change the size of the scrollbar. You can use CSS to do that:

/* Select the scrollbar track */
::-webkit-scrollbar-track {
  /* Change the background color */
  background-color: #f1f1f1;
}

/* Select the scrollbar thumb */
::-webkit-scrollbar-thumb {
  /* Change the background color */
  background-color: #888;

  /* Change the size of the thumb */
  height: 30px;
  width: 30px;
}