scrollbar-hide 插件无效需确认三件事：npm包已安装、tailwind.config.js中plugins数组引入require("tailwind-scrollbar-hide")、content路径覆盖.jsx/.tsx文件。
scrollbar-hide 插件装了没效果？先确认三件事
插件本身不自动生效，必须同时满足：npm 包已安装、tailwind.config.js 的 plugins 数组里明确引入、项目 content 路径覆盖了 JSX/TSX 文件。漏掉任一环节都会让 scrollbar-hide 类完全不编译进 CSS。
常见踩坑点：
-
content配置写成["./src/**/*.{js,ts}"]，却没包含.jsx或.tsx—— JIT 引擎扫不到类名，自然不会生成对应样式 - 只加了
npm install tailwind-scrollbar-hide，但没在tailwind.config.js里写require("tailwind-scrollbar-hide") - 把
scrollbar-hide加在父容器上，而该容器本身没设overflow-y-auto等触发滚动上下文的类 —— 它不是滚动容器，插件规则压根不匹配
Firefox 下 scrollbar-hide 失效？检查滚动容器是否“真存在”
scrollbar-width: none 在 Firefox 中只对**实际承担滚动行为的元素**生效。如果父级用了 overflow: hidden，或 Flex/Grid 子项没显式设 overflow-y: auto，Firefox 根本不渲染滚动条 —— 也就谈不上“隐藏”。
验证方法：
立即学习“前端免费学习笔记（深入）”；
- 用 DevTools 选中目标元素 → Styles 面板搜索
scrollbar-width，看是否被应用且未被覆盖 - 临时删掉父级的
overflow: hidden，观察滚动条是否“闪现”再消失 - 确保该元素有固定高度（如
h-64）或max-h-类，否则内容不溢出，滚动上下文不成立
scrollbar-hide 和 tailwind-scrollbar 的 scrollbar-none 能混用吗？
能，但不推荐。两者都操作同一套底层属性（display: none + scrollbar-width: none + -ms-overflow-style: none），只是注入路径不同。
混用后果：
- CSS 规则重复，体积略增，无功能影响
- 若两个插件都启用，JIT 编译器可能因优先级问题漏掉某一条规则（尤其在旧 Edge 中
-ms-overflow-style容易被忽略） -
scrollbar-hide更轻量，适合只要隐藏；tailwind-scrollbar适合后续要定制滑块颜色、圆角等
React/Vue 中动态渲染后滚动条又出现？别挂错位置
滚动条复现不是插件失效，而是滚动上下文被破坏。典型错误是把 scrollbar-hide 加在数据 wrapper 上（比如 <div className="list-wrapper">），而真实滚动容器是其子元素（如 <div className="scrollable-content">）。
关键点：
-
scrollbar-hide必须加在**实际设置了overflow-y-auto的那个 DOM 元素上** - 异步加载或列表长度变化后，DOM 高度重算，但类早已挂载 —— 重点检查该元素是否仍满足“有溢出内容 + 有固定高度”两个条件
- 避免用
overflow: hidden封死父容器，否则子容器即使有scrollbar-hide也失去滚动能力
