tailwind css 中不存在 scroll-smooth 类,它并非官方工具类;真正实现平滑滚动需在 html 元素上设置 css 原生属性 scroll-behavior: smooth。

scroll-smooth 在 Tailwind 中根本不存在
你搜到的 scroll-smooth 类,Tailwind CSS 官方从未提供。它不是内置工具类,也不是通过 tailwind.config.js 默认启用的特性。直接写 class="scroll-smooth" 不会生效,浏览器也认不出这个类名——它只是个常见误解的源头。
真正起作用的是 CSS 原生的 scroll-behavior 属性
平滑滚动依赖浏览器原生支持的 scroll-behavior CSS 属性,必须作用于根滚动容器(通常是 html 元素)。Tailwind 不封装它为类,但你可以用 @layer base 或直接在 CSS 文件里写:
html {
scroll-behavior: smooth;
}
注意:只设在 html 上才对全局锚点跳转有效;设在某个 div 上只影响该容器内的子元素滚动,和 <a href="#section"></a> 这类页面级跳转无关。
为什么加了 scroll-behavior: smooth 还不滚动?常见原因
-
href指向的id不存在或拼写不一致(比如href="#contact"但目标是<div id="Contact">,大小写敏感) <li>目标元素未渲染完成就触发跳转(尤其在 React/Vue 的异步组件或条件渲染中),可加 <code>setTimeout或监听DOMContentLoaded - CSS 中有
overflow: hidden或position: fixed干扰了文档流高度,导致锚点不可达 - Safari 旧版本(scroll-behavior: smooth 支持不稳定,部分场景会退回到瞬间跳转
需要 JS 控制时,用 Element.scrollIntoView 而非手动计算
当锚点跳转逻辑更复杂(比如带偏移、判断可见性、兼容无 CSS 支持环境),直接调用原生 API 更可靠:
document.getElementById('section').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
注意:scrollIntoView 的 behavior: 'smooth' 和 CSS 的 scroll-behavior 是同一套底层机制,但前者可控性更强;别用 window.scrollTo 配合定时器模拟,既难维护又容易在 Safari 上出错。
真正麻烦的从来不是加一行 CSS,而是确保目标元素存在、可滚动、没被遮挡、且在正确的上下文中被调用——这些细节比类名本身重要得多。











