为什么CSS::-webkit-scrollbar在Firefox中无效

Firefox不支持::-webkit-scrollbar，仅识别scrollbar-width和scrollbar-color两个标准属性，且后者需scrollbar-thumb-与scrollbar-track-成对使用才生效；Tailwind Scrollbar插件须启用nocompatible: true模式才能为Firefox生成对应规则。

Firefox根本不解析::-webkit-scrollbar

这不是 bug，也不是你选择器写错——Firefox 从没实现过这套伪元素 API。它压根不识别 ::-webkit-scrollbar、::-webkit-scrollbar-thumb 这些语法，连报错都不会有，纯静默跳过。你写的整条规则块在 Firefox 的 CSSOM 里等于不存在。

scrollbar-width 和 scrollbar-color 是 Firefox 唯一支持的滚动条控制方式

Firefox 只认两个标准属性，且必须同时出现才生效：

1. scrollbar-width: auto | thin | none —— 注意：thin 是建议值，macOS 下受系统设置影响，Windows 基本忽略
2. scrollbar-color: <thumb> <track> —— 顺序不能反，只写一个颜色无效；不支持圆角、阴影、hover 等任何额外样式
3. 这两个属性仅对 overflow: auto 或 overflow: scroll 的容器生效，且必须写在该容器的选择器上（如 .modal-body），不能只挂 body 或 html 上

Tailwind Scrollbar 插件在 Firefox 中失效的根源

默认配置下，tailwind-scrollbar 插件只输出 ::-webkit-scrollbar 规则，对 Firefox 完全跳过。必须显式启用兼容模式：

1. 在 tailwind.config.js 的 plugins 数组中写成：require('tailwind-scrollbar')({ nocompatible: true })
2. 否则 scrollbar-none、scrollbar-thumb-blue-500 等类名在编译后 CSS 里查不到任何对应规则
3. 颜色类必须成对使用：scrollbar-thumb-blue-500 scrollbar-track-gray-200 才会生成 scrollbar-color: #3b82f6 #e2e8f0；单独写 scrollbar-thumb-blue-500 在 Firefox 下无效果

@supports 分离写法是跨浏览器唯一可靠方案

别把 WebKit 和 Firefox 规则混在同一块 CSS 里，否则 Firefox 会因语法不识别而跳过整段。正确做法是用特性检测隔离：

1. Firefox 分支：@supports (scrollbar-width: thin) { .container { scrollbar-width: thin; scrollbar-color: #6c757d #f8f9fa; } }
2. WebKit 分支：@supports selector(::-webkit-scrollbar) { .container::-webkit-scrollbar { width: 8px; } ... }
3. 移动端 iOS Safari 几乎不可控：自 iOS 16.4 起仅部分支持 ::-webkit-scrollbar，且滚动条默认隐藏、仅滚动瞬间浮现，写的样式基本没机会渲染

真正容易被忽略的是：Firefox 的 scrollbar-color 不继承、不传播，也不接受变量或计算值——必须硬编码两个颜色，且容器本身得真实触发滚动上下文（固定高度 + overflow-y: auto + 内容溢出），否则规则再对也白搭。