Tailwind CSS如何实现导航标签常驻显示横向滚动条并自定义样式？

单纯将overflow-x-auto替换为overflow-x-scroll无法强制常驻滚动条，是因为当前主流浏览器（macOS Safari/Chrome、移动端WebView、Windows新版Edge/Chrome）默认遵循系统设置，仅在用户滚动时才显示滚动条，该逻辑无法仅通过overflow属性修改，必须配合滚动条自定义样式覆盖默认行为。

1. 调整元素基础类名 #

首先修改nav元素的类，添加滚动条预留位置属性，避免布局抖动：

<nav
  className="-mb-px flex space-x-8 overflow-x-scroll scrollbar-gutter-stable"
  aria-label="Tabs"
>

外层嵌套的div无需大幅调整，现有类名无overflow-hidden裁切属性，不会影响滚动条显示，保留原有pb-3即可为滚动条预留足够的展示空间。

如果你的Tailwind版本低于3.3，不支持scrollbar-gutter-stable内置类，可以跳过该类，在后续自定义CSS中补充对应属性即可。

2. 添加自定义滚动条样式 #

在项目中引入Tailwind指令的全局CSS文件中，添加以下样式，即可实现滚动条常驻、自定义高度和配色的需求：

/* 适配Webkit内核浏览器（Chrome、Edge、Safari） */
nav[aria-label="Tabs"]::-webkit-scrollbar {
  height: 6px; /* 控制滚动条高度，数值越小滚动条越细 */
}
nav[aria-label="Tabs"]::-webkit-scrollbar-track {
  background: #f1f5f9; /* 滚动条轨道配色，可替换为项目对应色值 */
  border-radius: 3px;
}
nav[aria-label="Tabs"]::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* 滚动条滑块配色，可替换为项目对应色值 */
  border-radius: 3px;
}
nav[aria-label="Tabs"]::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; /* 鼠标悬停时滑块配色 */
}

/* 适配Firefox浏览器 */
nav[aria-label="Tabs"] {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9; /* 顺序为：滑块颜色 轨道颜色 */
  /* 低版本Tailwind补加下面这行即可 */
  /* scrollbar-gutter: stable; */
}

• 上述样式通过aria-label="Tabs"选择器精准匹配当前标签导航，不会影响页面其他滚动区域。如果担心选择器匹配不准，可以给nav元素加一个专属类名（比如tab-navigation），将CSS选择器替换为对应类名即可。
• 所有色值、滚动条高度、圆角数值都可以根据项目设计规范自由调整。
• 自定义滚动条样式后，浏览器会跳过系统的滚动条自动隐藏逻辑，页面加载完成后就会直接显示滚动条，用户可以直接感知到区域可横向滚动。

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