Tailwind v3 默认不生成滚动条样式，必须安装并配置 tailwind-scrollbar 插件，且容器需有固定高度、内容真实溢出、启用 overflow-y-auto 才能生效。
直接用 scrollbar-thin 或 scrollbar-thumb-gray-400 这类类名，不装插件、不配配置，肯定没效果——Tailwind v3 默认根本不生成任何滚动条相关 CSS 规则。
必须先装 tailwind-scrollbar 插件并正确配置
这个插件是目前最省事的跨浏览器方案，它把 WebKit 伪元素和 Firefox 的 scrollbar-color 封装成统一类名。但三步缺一不可：
- 运行
npm install --save-dev tailwind-scrollbar - 在
tailwind.config.js的plugins数组里加require('tailwind-scrollbar') - 确认
content路径覆盖所有用到这些类的文件，比如src/**/*.{js,ts,jsx,tsx}—— 漏掉就等于白配
scrollbar 类必须和溢出行为、尺寸约束一起用
只写 scrollbar-thin scrollbar-thumb-blue-500 scrollbar-track-gray-100 不会显示滚动条，因为样式本身不触发滚动行为：
- 容器必须有明确高度（如
h-64或max-h-96） - 子内容总高度必须真实超出容器高度（例如一堆
h-12的 div 堆叠） - 必须启用溢出，比如
overflow-y-auto；scrollbar类只是“美化开关”，不是“开启滚动” - 别往
<body>或<html>上硬套——WebKit 伪元素在根元素上 Safari 表现极差，Firefox 下可能完全失效
Firefox 和 Safari 的兼容性陷阱
插件虽自动转译 scrollbar-thumb- 为 scrollbar-color，但实际生效仍受限制：
立即学习“前端免费学习笔记（深入）”；
- Firefox 只认
scrollbar-color: thumb track，且该属性**仅对设置了overflow-y: auto或scroll的元素有效**，全局重置里若有scrollbar-color: auto会覆盖掉你的设置 - Safari（尤其是 macOS Ventura+）默认启用“隐藏滚动条”策略：即使写了样式，也只在悬停或拖动时显示；不能靠
overflow: overlay强制（已废弃），稳妥做法是确保容器有固定高度 +overflow-y-auto -
::-webkit-scrollbar规则对 Firefox 完全无效，别指望它能影响非 WebKit 浏览器
想彻底隐藏滚动条？别只信 scrollbar-none
scrollbar-none 只作用于当前元素，对页面级纵向滚动条无效。要隐藏整个页面的滚动条，得手动加兼容性 CSS：
在 src/index.css 或全局 CSS 中用 @layer utilities 定义：
@layer utilities {
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; }
.no-scrollbar { scrollbar-width: none; }
}
然后给 <body class="no-scrollbar"> 加上这个类，并配合 overflow-hidden 控制裁剪逻辑——否则内容可能被截断或撑破视口。
最常被忽略的其实是「触发条件」：没有固定高度、子内容没真正溢出、或伪元素挂载目标错误。这些都会导致样式编译进去了，但眼睛就是看不到效果。
