Tailwind CSS标签页数量过多时如何实现横向滚动效果

核心修改点 #

• 移除外层容器错误的sm:overflow-hidden类，避免大屏下超出内容被直接截断
• 给大屏端标签导航的<nav>容器添加横向滚动相关类，开启横向滚动能力
• 给每个标签项添加flex-shrink-0类，防止标签在flex布局下被压缩宽度
• （可选）添加滚动条隐藏样式，保留滚动能力的同时让界面更整洁，不破坏原有视觉效果

代码实现 #

如果需要隐藏滚动条，先在全局CSS文件中添加通用样式：

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

修改后的标签页组件完整代码如下：

<div className="grid grid-cols-1 gap-4 lg:col-span-3 ">
  <div className="p-6">
    {/* Hero section */}
    <div className="relative">
      {/* 移除原有的sm:overflow-hidden，避免大屏下截断超出内容 */}
      <div className="relative">
        <div className="pb-3">
          <div className="sm:hidden">
            <label htmlFor="tabs" className="sr-only">
              Select a tab
            </label>
            {/* 移动端下拉选择逻辑保持不变 */}
            <select
              id="tabs"
              name="tabs"
              className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
              defaultValue={
                tabs.find((tab) => tab?.current)?.name || "default"
              }
            >
              {tabs.map((tab) => (
                <option key={tab.name}>{tab.name}</option>
              ))}
            </select>
          </div>
          <div className="hidden sm:block">
            <div className="border-b border-gray-200">
              <nav
                className="-mb-px flex space-x-8 overflow-x-auto overflow-y-hidden scroll-smooth no-scrollbar"
                aria-label="Tabs"
              >
                {tabs.map((tab) => (
                  <a
                    key={tab.name}
                    href="#"
                    className={classNames(
                      tab.current
                        ? "border-indigo-500 text-indigo-600"
                        : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-200",
                      // 新增flex-shrink-0防止标签被压缩变形
                      "whitespace-nowrap flex flex-shrink-0 py-4 px-1 border-b-2 font-medium text-sm"
                    )}
                    aria-current={tab.current ? "page" : undefined}
                  >
                    {tab.name}
                    {tab.count ? (
                      <span
                        className={classNames(
                          tab.current
                            ? "bg-indigo-100 text-indigo-600"
                            : "bg-gray-100 text-gray-900",
                          "hidden ml-3 py-0.5 px-2.5 rounded-full text-xs font-medium md:inline-block"
                        )}
                      >
                        {tab.count}
                      </span>
                    ) : null}
                  </a>
                ))}
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

效果说明 #

• 移动端（sm断点以下）仍然保持原有的下拉选择交互，不受任何修改影响
• 大屏端标签数量超出可视区域宽度时，自动支持鼠标/触控板横向滑动、触屏设备左右滑动查看所有标签
• 配置的scroll-smooth类会给滚动添加平滑过渡效果，交互更自然
• 如果需要保留滚动条提示用户可横向滚动，直接删除nav标签上的no-scrollbar类即可

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