scrollbar-hide 类无效的根源在于目标元素未成为滚动容器，需同时满足：显式设置 overflow-y-auto 等、有固定高度约束、父级无 overflow-hidden 截断，且在 Firefox 中确保 scrollbar-width 规则生效。
scrollbar-hide 类加了没反应？先确认滚动上下文是否成立
直接加 scrollbar-hide 类却看不到效果，大概率不是插件没装对，而是目标元素根本没成为滚动容器。这个类只隐藏「已存在」的滚动条，不负责触发滚动。
- 目标元素必须显式设置
overflow-y-auto、overflow-x-scroll等类（不能靠父级继承） - 必须有固定高度约束：比如
h-64、max-h-80，否则内容不溢出，滚动上下文压根不会创建 - 检查父容器是否用了
overflow-hidden——它会切断子元素的滚动上下文，导致子项即使设了overflow-y-auto也无效 - Flex/Grid 子项默认不创建滚动上下文，需单独加
overflow-y-auto，不能只依赖容器布局
Firefox 里滚动条还在？重点查 scrollbar-width 是否生效
Firefox 只认 scrollbar-width: none，但它只在该元素自身是滚动容器时才起作用。如果父级 overflow: hidden 或子项没设 overflow-y: auto，Firefox 根本不渲染滚动条——那也就谈不上“隐藏”。
- 用 DevTools 选中目标元素 → Styles 面板搜索
scrollbar-width，看规则是否被应用且未被覆盖 - 临时删掉父级的
overflow-hidden，观察滚动条是否“闪现”再消失 -
scrollbar-hide在 Firefox 中依赖 JIT 编译器正确注入规则，确保tailwind.config.js的content路径包含.jsx和.tsx（例如["./src/**/*.{js,ts,jsx,tsx}"]）
React/Vue 动态渲染后滚动条又出现？别把类挂错位置
数据加载前容器高度为 0，没溢出；加载后内容撑高，但 scrollbar-hide 类早已挂载，浏览器没重算滚动上下文——问题不在类失效，而在滚动容器本身是否持续具备溢出条件。
- 必须把
scrollbar-hide加在滚动容器上，即那个同时满足「有固定高度」+「设置了overflow-y-auto」的元素 - 不要加在数据 wrapper 上（比如
<div className="list-wrapper">），它可能只是个 flex 容器，不负责滚动 - 若容器高度靠 JS 动态计算（如
useResizeObserver），内容更新后需强制触发重排，例如el.style.transform = 'scale(1)'或el.offsetHeight
该用 scrollbar-hide 还是 scrollbar-none？别混用
两者底层都写 display: none + scrollbar-width: none，但实现路径不同：scrollbar-hide 是轻量插件，scrollbar-none 来自 tailwind-scrollbar 插件，多一层运行时注入逻辑。
立即学习“前端免费学习笔记（深入）”；
- 混用会导致 CSS 规则重复，JIT 编译器可能因优先级问题漏掉某条（尤其
-ms-overflow-style在旧 Edge 中容易被忽略） - 只要隐藏滚动条，选
scrollbar-hide更稳妥；如果后续要定制颜色、圆角等，再换tailwind-scrollbar并用scrollbar-none - 全局配置里只启用一个插件，
plugins数组别同时写require("tailwind-scrollbar-hide")和require("tailwind-scrollbar")
