scroll-smooth类不起作用，首先确认Tailwind配置中corePlugins.scrollBehavior为true，且类需作用于html或可滚动容器（如overflow-y-auto的div），而非a标签；JS滚动需显式传behavior:'smooth'参数。
scroll-smooth 类不起作用？先确认是否启用了 smooth scroll 功能
直接加 scroll-smooth 不生效，大概率是因为 Tailwind 默认不启用平滑滚动——它只是个 CSS 类别名，背后依赖浏览器原生的 scroll-behavior: smooth。而 Tailwind 只有在配置中显式开启该特性后，scroll-smooth 才会被生成。
检查你的 tailwind.config.js，确保 corePlugins 中未禁用 scrollBehavior：
module.exports = {
corePlugins: {
scrollBehavior: true // 必须为 true（默认就是 true，但可能被手动关掉）
}
}
- 如果项目早期自定义过
corePlugins，很容易漏掉这一项 - 改完配置需重启开发服务器，否则新类不会编译进 CSS
- Vite / Next.js 等框架下，若使用了 `@tailwind base`，也必须保证
html或body元素是滚动容器（见下一条）
为什么锚点跳转还是“咔”一下，没过渡？
即使 scroll-smooth 生效，平滑滚动仍需满足滚动容器明确——浏览器只会对设置了 scroll-behavior: smooth 的**最近可滚动祖先**应用动画。常见误区是直接给 body 加类，但现代框架（如 Next.js、Remix）常把根滚动容器设为 html 或某个 wrapper div。
- 最稳妥做法：在
html标签上添加scroll-smooth（即） - 若用自定义滚动容器（如 ），确保该元素本身可滚动且高度受限
- 不要只给
a标签加scroll-smooth——它不控制滚动行为，只影响自身样式scroll-smooth 和 JavaScript 滚动冲突怎么办？
当同时使用
scroll-smooth和Element.scrollIntoView({ behavior: 'smooth' })或window.scrollTo({ behavior: 'smooth' })时，CSS 行为和 JS 行为会叠加，但优先级取决于调用时机和目标容器。容易出现动画卡顿、重复触发或被 JS 强制覆盖。- 二者可共存，但建议统一入口：要么全用 CSS（靠
scroll-smooth+ 原生锚点链接），要么全用 JS（关闭scroll-smooth，手动控制） - 若必须混合使用，确保 JS 调用的目标元素属于同一个滚动上下文（例如都作用于
html，而非一个在div、一个在body） - 调试技巧：在 DevTools 的 Elements 面板中，选中滚动容器，看 Computed 标签下
scroll-behavior是否为smooth
兼容性与降级处理要注意什么？
scroll-behavior: smooth在 Safari 15.4+、Chrome 61+、Firefox 36+ 支持良好，但旧版 Safari（≤15.3）和部分安卓 WebView 仍不支持。Tailwind 不提供自动降级，得自己兜底。- 不要依赖
scroll-smooth实现关键导航逻辑（比如跳转失败就卡住） - 可加简单检测判断是否支持：
if ('scrollBehavior' in document.documentElement.style)，再决定是否启用 JS fallback - 极简降级方案：保留锚点 href，让不支持的浏览器退回到原生跳转（无动画但功能完整）
真正麻烦的不是加不加类，而是滚动上下文是否清晰、配置是否激活、以及是否和 JS 滚动逻辑打架——这三处出问题，比写错 class 名更难定位。
- 不要只给
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
