在 Firefox 浏览器中，::-webkit-scrollbar 这套写法本身就不会被识别，它真正支持的只有 scrollbar-width 和 scrollbar-color 这两个标准滚动条属性；并且 scrollbar-color 也不能单独随便写，必须同时提供 scrollbar-thumb- 和 scrollbar-track- 对应配置才会生效。至于 Tailwind Scrollbar 插件，如果你希望它在 Firefox 中正确输出对应的滚动条样式规则，就需要开启 nocompatible: true 模式。
Firefox根本不支持解析::-webkit-scrollbar
这不是浏览器 bug，也不是你的 CSS 选择器写错了，而是 Firefox 从一开始就没有实现这套伪元素 API。像 ::-webkit-scrollbar、::-webkit-scrollbar-thumb 这样的语法，Firefox 完全不会识别；更常见的情况是，它甚至不会给出错误提示，而是直接静默忽略。也就是说，这类 CSS 规则即使写得再完整，在 Firefox 的 CSSOM 中基本也等于不存在。
scrollbar-width 和 scrollbar-color 才是 Firefox 唯一支持的滚动条样式方案
在 Firefox 里，自定义滚动条样式只认这两个标准属性，而且通常需要配合使用才更容易生效：
scrollbar-width: auto | thin | none—— 需要注意，thin只是建议值，macOS 下会受到系统设置影响，而 Windows 中很多情况下几乎会被忽略scrollbar-color:—— 颜色顺序不能写反，只写一个颜色不会生效；同时它也不支持圆角、阴影、hover 状态等更多高级样式- 这两个属性只对设置了
overflow: auto或overflow: scroll的滚动容器有效，并且必须直接写在该容器的选择器上（例如.modal-body），不能只写在body或html上期待全局生效
Tailwind Scrollbar 插件在 Firefox 里失效的真正原因
在默认配置下，tailwind-scrollbar 插件通常只会输出 ::-webkit-scrollbar 相关规则，因此在 Firefox 中看起来就像完全无效。想让它兼容 Firefox，必须明确开启兼容模式：
- 在
tailwind.config.js的plugins数组中配置为：require('tailwind-scrollbar')({ nocompatible: true }) - 否则像
scrollbar-none、scrollbar-thumb-blue-500这类常见类名，在最终编译出的 CSS 中可能根本查不到 Firefox 可用的对应规则 - 颜色相关类名必须成对出现：
scrollbar-thumb-blue-500 scrollbar-track-gray-200才会生成scrollbar-color: #3b82f6 #e2e8f0；如果只写scrollbar-thumb-blue-500，那么在 Firefox 浏览器下依然不会看到任何效果
@supports 分开写是跨浏览器兼容滚动条样式最稳妥的方案
不要把 WebKit 和 Firefox 的滚动条规则混写在同一段 CSS 中，否则 Firefox 遇到自己不认识的语法时，往往会直接忽略相关内容。更可靠的做法，是通过特性检测把不同浏览器的写法拆开：
- Firefox 分支：
@supports (scrollbar-width: thin) { .container { scrollbar-width: thin; scrollbar-color: #6c757d #f8f9fa; } } - WebKit 分支：
@supports selector(::-webkit-scrollbar) { .container::-webkit-scrollbar { width: 8px; } ... } - 移动端 iOS Safari 基本很难精细控制：从 iOS 16.4 开始虽然只提供了部分
::-webkit-scrollbar支持，但滚动条默认仍是隐藏状态，只会在滚动瞬间短暂浮现，因此即便写了样式，很多时候也几乎没有实际渲染机会
还有一个非常容易被忽视的细节是：Firefox 的 scrollbar-color 不会继承，也不会自动传播，同时通常也不适合依赖变量或计算值——你需要明确写出两个颜色值，并确保目标容器确实形成了真实的滚动上下文（例如固定高度 + overflow-y: auto + 内容已经溢出），否则即使 CSS 语法完全正确，最终也依然不会生效。
