必须开启nocompatible: true模式，否则tailwind scrollbar插件在firefox中不生成scrollbar-width和scrollbar-color规则，导致scrollbar-none、scrollbar-thumb-*等类失效；且颜色类需scrollbar-thumb-与scrollbar-track-成对使用才生效。
Firefox 不认 ::-webkit-scrollbar，只支持 scrollbar-width 和 scrollbar-color 两个标准属性；默认的 tailwind-scrollbar 插件不生成这些规则，所以你在 Firefox 里写的 scrollbar-thin、scrollbar-thumb-blue-500 全部失效——不是你写错了，是插件根本没输出对应 CSS。
必须开启 nocompatible: true 模式
插件默认行为是“兼容优先”，只给 Chrome/Safari 输出 ::-webkit-scrollbar 规则，对 Firefox 完全跳过。不加这个配置，scrollbar-none、scrollbar-thumb- 等类名在编译后 CSS 文件里查不到任何内容。
- 在
tailwind.config.js的plugins数组中，必须显式传参：require('tailwind-scrollbar')({ nocompatible: true }) - 只写
require('tailwind-scrollbar')是无效的 - 开启后，
scrollbar-none才会编译为scrollbar-width: none，scrollbar（无后缀）才等价于scrollbar-width: auto
scrollbar-thin 在 Firefox 中实际做什么？
它什么也不做——Firefox 不支持 scrollbar-width: thin（该值无效），也完全忽略 ::-webkit-scrollbar 相关声明。你看到的“细”效果只存在于 Chrome/Safari；在 Firefox 下，scrollbar-thin 等价于没写，滚动条宽度仍是浏览器默认值。
- 想隐藏 Firefox 滚动条视觉轨道，只能用
scrollbar-none（或旧版插件的scrollbar-hidden） -
scrollbar-none只隐藏视觉，不影响滚动能力（滚轮、触控板、方向键仍有效） - 若容器本身没触发滚动上下文（比如没设
overflow-y-auto），scrollbar-none就没意义
Firefox 颜色类生效的前提：必须成对出现
scrollbar-thumb-blue-500 单独写，在 Firefox 下不会生成任何 scrollbar-color 声明。因为该属性需要两个值：thumb-color track-color，插件只在同时存在 scrollbar-thumb- 和 scrollbar-track- 类时才输出完整规则。
- ✅ 正确：
scrollbar-thumb-blue-500 scrollbar-track-gray-200 - ❌ 无效：
scrollbar-thumb-blue-500（Firefox 下无颜色） - ⚠️ 注意：
scrollbar-track-必须显式指定，不能靠父级继承或全局样式替代 - iOS Safari 不支持
scrollbar-color，需额外加[&::-webkit-scrollbar]:hidden降级
最易被忽略的一点：nocompatible 模式不仅影响 Firefox，它还解锁了 scrollbar-w-8、scrollbar-thumb-rounded-full 等高级类；没开这个开关，这些类在所有浏览器里都无效——不是 bug，是设计如此。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
