需在 tailwind.config.js 的 theme.extend.utilities 中注册 scrollbar-hide，覆盖 WebKit、Firefox 和 IE/Edge 语法，并确保目标元素有溢出内容和滚动上下文。
tailwind.config.js 里怎么配 scrollbar-hide 类
Tailwind 默认不提供 scrollbar-hide 这类工具类，必须手动扩展。不是加个 class 就能用，得先在配置里注册它，否则编译后压根不会生成对应 CSS。
- 打开
tailwind.config.js，在theme.extend的utilities下添加自定义规则（注意：v3.0+ 推荐用plugins方式，但extend.utilities更直接、兼容性更好） - 必须同时覆盖 WebKit（Chrome/Safari）、Firefox 和 IE/Edge 旧语法，只写
-webkit-scrollbar会漏掉 Firefox 滚动条 - 隐藏行为分「完全不可见」和「透明但仍可滚动」两种，多数人要的是前者，所以得设
width: 0+height: 0，不能只靠opacity: 0
module.exports = {
theme: {
extend: {
utilities: {
'scrollbar-hide': {
'&::-webkit-scrollbar': {
display: 'none',
},
'&::-moz-range-thumb': { /* 注意：这不是滚动条，别误配 */ },
'&': {
'-ms-overflow-style': 'none', /* IE/Edge */
'scrollbar-width': 'none', /* Firefox */
}
}
}
}
}
}为什么直接写 scrollbar-hide 在 div 上没反应
常见错误是以为加了 class 就生效，其实有三个隐性前提全满足才行：目标元素必须有溢出内容、自身需有滚动上下文、且该元素是滚动容器本身（不是它的父级或子级）。
- 如果父容器设置了
overflow: hidden，子元素即使内容溢出也不会触发滚动，scrollbar-hide自然无效 - Flex 或 Grid 容器中，子项默认不创建滚动上下文，得显式加
overflow-y: auto或overflow-y: scroll - React/Vue 中动态渲染内容后才溢出？记得 class 要加在滚动容器上，不是加在数据列表的 wrapper 上
- 用 Chrome DevTools 检查：选中元素 → Styles 面板看是否命中
::-webkit-scrollbar规则；Firefox 则看scrollbar-width: none是否被应用
隐藏滚动条但保留滚动能力的关键 CSS 属性
核心不是“删掉滚动条”，而是让滚动条不可见但不干扰滚动逻辑。不同浏览器机制差异大，漏掉任一属性都可能在某个浏览器里失效或导致滚动卡顿。
-
-webkit-scrollbar设为display: none是最稳妥的 WebKit 隐藏方式；用width: 0有时会导致拖拽区域残留 - Firefox 必须用
scrollbar-width: none（值只能是auto/thin/none），-moz-appearance: none无效 - IE/Edge 旧版靠
-ms-overflow-style: none，这个属性在现代 Edge 已废弃，但留着无害 - 千万别对
body直接用scrollbar-hide：全局隐藏会影响整个页面滚动体验，尤其在 macOS 上触控板惯性滚动会异常
移动端 Safari 隐藏滚动条的特殊处理
iOS Safari 对滚动条控制更严格，单纯 CSS 隐藏后，手指滑动可能变迟钝，甚至触发页面整体回弹（rubber banding）。这不是 bug，是系统级交互策略。
立即学习“前端免费学习笔记（深入）”；
- 确保滚动容器有
-webkit-overflow-scrolling: touch（虽然 v15+ 已默认启用，但显式声明更稳） - 避免在滚动容器上同时设
transform或will-change，这会破坏 iOS 的原生滚动优化 - 如果隐藏后滑动不跟手，试试加
overscroll-behavior-y: contain，防止滚动穿透到父层 - 真机测试比模拟器重要：iOS 模拟器常不触发真实滚动条行为，务必用 Safari 真机调试
滚动条隐藏看着简单，实际是跨浏览器、跨设备的样式博弈。最容易被忽略的是：Firefox 和 Safari 的隐藏机制完全不共享规则，少写一行就漏一个平台。
