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 根本不渲染滚动条——那也就谈不上“隐藏”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 用 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 容器，不负责滚动 <li>若容器高度靠 JS 动态计算（如 <code>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")
滚动条是否隐藏，最终取决于「该元素是不是真正的滚动容器」——而不是你加了多少个类。很多问题其实卡在 overflow 没生效、高度没约束、父级截断这三处，反复验证比换插件更有效。