如何在ReactJS中用Tailwind自定义滚动条滑块大小（适配Node v12.22.9）

直接用CSS自定义滚动条样式 #

因为tailwind-scrollbar包不兼容Node v12，你可以直接通过自定义CSS结合Tailwind的方式实现，无需依赖第三方包：

1. 在全局CSS文件（如globals.css）中添加滚动条自定义样式：

/* 自定义水平滚动条轨道与滑块 */
.custom-scrollbar::-webkit-scrollbar {
  height: 6px; /* 控制滚动条整体高度，即滑块纵向大小 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1; /* 滑块颜色，可替换为项目所需Tailwind色值 */
  border-radius: 3px; /* 滑块圆角 */
}

/* 可选：滑块 hover 状态样式 */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

2. 在React组件中为容器添加自定义类名：

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

补充：兼容Firefox的样式 #

如果需要适配Firefox浏览器，在全局CSS中追加以下代码：

.custom-scrollbar {
  scrollbar-width: thin; /* Firefox滚动条宽度 */
  scrollbar-color: #cbd5e1 transparent; /* 滑块颜色、轨道颜色 */
}

内容的提问来源于stack exchange，提问作者wildanmaula