Tailwind CSS滚动条仅在hover时显示的问题求助

问题原因 #

浏览器默认滚动条行为是仅在容器 hover 时显示，Tailwind 的 overflow-y-scroll 或 overflow-auto 不会覆盖这一默认行为，因此需要自定义滚动条样式来强制其始终可见。

解决方案 #

方法1：自定义Tailwind工具类（推荐） #

在项目全局CSS文件（如globals.css）中添加自定义工具类，集成到Tailwind体系中，方便组件直接调用：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .scrollbar-permanent {
    /* Firefox 配置 */
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
  }

  /* WebKit浏览器（Chrome、Safari）配置 */
  .scrollbar-permanent::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar-permanent::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .scrollbar-permanent::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
    border: 2px solid #f1f1f1;
  }

  .scrollbar-permanent::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }
}

修改组件中的容器类名：

<div className="grid grid-cols-2 grid-rows-5 w-full mt-3 overflow-y-scroll scrollbar-permanent">

方法2：使用Tailwind Scrollbar插件（若已安装） #

如果你已经安装了tailwind-scrollbar插件，先确保插件已配置在tailwind.config.js中：

module.exports = {
  plugins: [
    require('tailwind-scrollbar'),
  ],
}

然后修改容器类名，添加插件提供的强制显示类：

<div className="grid grid-cols-2 grid-rows-5 w-full mt-3 overflow-y-scroll scrollbar scrollbar-visible">

注：部分插件版本可能使用scrollbar-always替代scrollbar-visible，请根据插件版本调整。

方法3：内联样式（快速测试用） #

若仅需临时验证效果，可直接给容器添加内联样式：

<div 
  className="grid grid-cols-2 grid-rows-5 w-full mt-3 overflow-y-scroll"
  style={{
    scrollbarWidth: 'thin',
    scrollbarColor: '#888 #f1f1f1'
  }}
>

该方式仅适配Firefox，WebKit浏览器需额外添加CSS，不推荐长期使用。

效果验证 #

修改完成后，滚动条会始终显示在容器右侧，用户无需 hover 即可发现并操作，提升导航易用性。

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