Tailwind CSS 隐藏滚动条（全场景适配）

Tailwind 本身无内置的「隐藏滚动条」类，但可通过自定义工具类 或行内样式组合实现，以下是不同场景的最优方案（兼容 Chrome/Firefox/Safari/Edge）：

一、核心方案：自定义全局工具类（推荐，复用性高）

在 tailwind.config.js 中添加滚动条隐藏的工具类，后续可直接通过类名使用：

javascript 复制代码

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    // 自定义工具类：hide-scrollbar
    function ({ addUtilities }) {
      addUtilities({
        '.hide-scrollbar': {
          /* Chrome, Safari, Edge */
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none', /* Firefox */
          '&::-webkit-scrollbar': {
            display: 'none', /* Chrome/Safari/Edge 隐藏滚动条 */
          },
        },
      });
    },
  ],
};

使用方式 ：直接给滚动容器加 hide-scrollbar 类（保留滚动功能，仅隐藏滚动条）：

jsx 复制代码

<div className="w-80 h-60 overflow-y-auto hide-scrollbar">
  {/* 滚动内容 */}
  <p>超长内容...</p>
</div>

二、临时方案：行内样式组合（无需改配置）

若不想修改 tailwind.config.js，可直接通过 Tailwind 类 + 原生样式组合实现：

jsx 复制代码

<div 
  className="w-80 h-60 overflow-y-auto"
  style={{
    msOverflowStyle: 'none', // IE/Edge
    scrollbarWidth: 'none', // Firefox
  }}
  className="w-80 h-60 overflow-y-auto [&::-webkit-scrollbar]:hidden"
>
  滚动内容
</div>

关键：[&::-webkit-scrollbar]:hidden 是 Tailwind 动态伪类语法，专门针对 Chrome/Safari 隐藏滚动条；
scrollbarWidth: 'none' 适配 Firefox，msOverflowStyle: 'none' 适配 IE/Edge。

三、细分场景适配

场景	实现方式
仅隐藏纵向滚动条	`overflow-y-auto hide-scrollbar`（横向滚动条保留）
仅隐藏横向滚动条	`overflow-x-auto [&::-webkit-scrollbar]:hidden` + `scrollbar-width: none`
全局隐藏所有滚动条	在 `globals.css` 中添加： `css<br>body {<br> -ms-overflow-style: none;<br> scrollbar-width: none;<br>}<br>body::-webkit-scrollbar { display: none; }<br>`

避坑点

保留滚动功能 ：必须保留 overflow-y-auto/overflow-x-auto，否则容器会失去滚动能力；
Safari 兼容性 ：部分 Safari 版本需加 -webkit- 前缀，上述方案已覆盖；
动态内容滚动：隐藏滚动条后，鼠标滚轮/触摸滑动仍可正常操作，不影响交互。

下一步迭代建议

需要我为你编写「隐藏滚动条但保留滚动提示（如 hover 时显示滚动条）」的 Tailwind 自定义类吗？