Tailwind 默认不提供滚动条类，scrollbar 等类必须通过安装并配置 tailwind-scrollbar 插件才能生效；未安装插件、未在 plugins 中引入、或 content 路径未覆盖模板文件，均会导致类名无法编译进 CSS。
scrollbar 类本身不生效，全局自定义滚动条必须靠插件或手动 CSS —— Tailwind 默认不提供任何滚动条工具类，scrollbar 这类类名只有装了 tailwind-scrollbar 插件后才存在，且它默认只作用于**单个元素**，不是全局。
为什么直接加 scrollbar 类没反应？
因为：scrollbar 是 tailwind-scrollbar 插件提供的类，不是 Tailwind 原生功能。没装插件、没配 plugins、或 content 路径没扫到用到该类的文件，都会导致编译后 CSS 里压根没有对应规则。
- 插件未安装 →
scrollbar、scrollbar-thumb-blue-500等类名不会被识别 - 插件已装但没在
tailwind.config.js的plugins数组里require('tailwind-scrollbar')→ 类名不生成 -
content配置漏掉模板路径（比如没包含src/**/*.{js,ts,jsx,tsx}）→ JIT 模式下类名无法被扫描捕获，即使写了也无效
想全局生效，得把颜色类挂到
插件支持继承：你在根元素上加 scrollbar-thumb-gray-400 和 scrollbar-track-white，所有子级带 scrollbar 或 scrollbar-thin 的容器会自动继承这些颜色，不用每个地方重复写。
- 必须同时加基础滚动条启用类（如
scrollbar或scrollbar-thin）和颜色类，否则颜色不生效 - 推荐写法：
- Firefox 只认
scrollbar-color: #9ca3af #f9fafb，插件已自动转译，但若你项目里有其他 CSS 覆盖了scrollbar-color，就会失效
scrollbar-none 不等于“全局隐藏”，它只对当前元素有效
很多人误以为加了 scrollbar-none 就能一劳永逸隐藏所有滚动条 —— 实际上它只让**当前元素**的滚动条不可见，但仍保留滚动能力；而且必须配合 overflow-y-auto 等溢出行为才有意义。
-
scrollbar-none不是全局开关，它不作用于body或html的原生滚动条（浏览器默认滚动条） - 要隐藏页面级滚动条（比如全屏模态框时），得单独给
body加overflow-hidden，再用自定义容器接管滚动 - 真要全局禁用滚动条样式，只能手写 CSS：
.no-scrollbar::-webkit-scrollbar { display: none; }+scrollbar-width: none+-ms-overflow-style: none，然后在body上加这个类
Firefox 兼容性最容易被忽略
插件虽自动处理 scrollbar-color，但 Firefox 对伪元素（::-webkit-scrollbar）完全无视，所以你在 DevTools 里看到 scrollbar-thumb-blue-500 的样式在 Firefox 下查不到 —— 这不是 bug，是浏览器机制决定的。
- 检查 Firefox 是否生效：右键页面 → “查看页面信息” → “样式” 标签页，搜索
scrollbar-color，确认值是否是你设的颜色 - 如果没生效，大概率是其他 CSS（比如重置库、CSS-in-JS 注入）覆盖了
html或body的scrollbar-color - 不要试图用
!important强行覆盖 —— 插件生成的scrollbar-color已经足够高优先级，问题通常出在选择器范围或层叠顺序
真正起效的点就三个：装插件、配 plugins、挂类到根元素。其余都是围绕这三点排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
