firefox仅支持scrollbar-width和scrollbar-color，须成对使用且只作用于overflow:auto/scroll的块级容器；不解析::-webkit-scrollbar；tailwind需启用nocompatible:true才生成对应规则。
Firefox 只认 scrollbar-width 和 scrollbar-color，别写 ::-webkit-scrollbar
Firefox 从 64 版本起完全不解析 ::-webkit-scrollbar 及其子伪元素，写了也白写。你看到的“没生效”，不是选择器写错，是浏览器压根不读。必须用 W3C 标准属性：scrollbar-width 控制宽度策略（auto / thin / none），scrollbar-color 控制颜色（格式为 scrollbar-color: <thumb><track></track></thumb>）。这两个属性只对根元素（html）或设置了 overflow: auto / scroll 的块级容器生效，对 textarea 或自定义 div 滚动区无效。
Tailwind 用户必须显式启用 nocompatible: true
默认的 tailwind-scrollbar 插件只输出 WebKit 规则，对 Firefox 完全跳过——scrollbar-none、scrollbar-thumb-blue-500 这些类在编译后 CSS 里根本不存在。必须在 tailwind.config.js 的 plugins 数组中这样写：
require('tailwind-scrollbar')({ nocompatible: true })
漏掉 { nocompatible: true }，就等于没装插件。开启后：scrollbar-none 编译为 scrollbar-width: none；scrollbar-thin 在 Firefox 下实际无效（thin 不是合法值），等价于没写；scrollbar-thumb- 类只有和 scrollbar-track- 成对出现时，才会生成 scrollbar-color 声明。
颜色必须成对指定，不能只设滑块
scrollbar-color 是双值属性，浏览器不会拆解或补默认值。单独写 scrollbar-thumb-blue-500，Firefox 不会生成任何规则；必须同时存在 scrollbar-thumb-blue-500 和 scrollbar-track-gray-200，插件才输出 scrollbar-color: #3b82f6 #e5e7eb。注意：scrollbar-track- 必须显式加在同一个元素上，父级样式、全局 :root 变量、CSS 继承都无效。
Win10/Win11 下 Firefox 滚动条视觉差异无法用 CSS 彻底抹平
Firefox 97+ 对 Win11 做了原生滚动条行为优化：Win11 下滚动条默认不占布局空间、hover 放大、透明度更高；Win10 下仍保留传统宽条+固定尺寸。这个差异由系统 UI 层控制，scrollbar-width: thin 或 none 都无法覆盖。唯一可靠手段是统一用 scrollbar-none 彻底隐藏视觉滚动条（滚动能力不受影响），再配合 overflow-y: auto 保证内容可滚。若必须显示，只能接受平台差异，不要强求 Win10/Win11 表现一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
