Tailwind CSS 不提供 scroll-smooth 类，生效需直接设置 html { scroll-behavior: smooth; }，并确保 href 与 id 严格一致、目标元素已渲染、无 display: none、且兼容浏览器支持。
Tailwind CSS 没有 scroll-smooth 类，直接写 class="scroll-smooth" 完全无效。 它不是官方工具类，也不是通过 tailwind.config.js 可启用的特性——浏览器根本不会识别这个类名。
为什么 scroll-smooth 不生效？
这是最常见的误解源头。你搜到的教程或代码片段里出现的 scroll-smooth，基本都源于对原生 CSS 属性 scroll-behavior 的误传或命名混淆。Tailwind 从未提供、也未计划封装该类。
- 浏览器只认
scroll-behavior: smooth这个 CSS 声明，不认任何叫scroll-smooth的类 - 即使你在
tailwind.config.js里手动 extend 出一个scroll-smooth工具类，它也必须最终编译为scroll-behavior: smooth才起作用 - 设在任意普通元素（如
<div>）上，若该元素不可滚动（无 <code>overflow），属性照样被忽略真正该加在哪？html 还是 body？
必须加在**根滚动容器**上，对页面级锚点跳转（
#id）而言，最稳妥的是html元素。-
html { scroll-behavior: smooth; }是全局生效的最小必要条件 - 部分旧版 Safari 或 Chrome 对
body上的设置支持不稳定，body加了也不一定管用 - 不要加在
div.content等局部容器上——除非你明确只希望它内部子元素的scrollIntoView()平滑，和锚点跳转无关 - 如果页面用了
height: 100vh; overflow: hidden等布局，可能让html失去滚动能力，此时属性自然失效
点了链接没反应 or 跳了但不平滑？先查这四点
90% 的“不生效”问题和
scroll-behavior本身无关，而是 DOM 或触发链断了。立即学习“前端免费学习笔记（深入）”；
-
href和目标id必须完全一致：大小写、空格、连字符都区分，href="#Contact"对不上id="contact" - 目标元素不能是
display: none或尚未挂载（React/Vue 中异步加载后才渲染的区块，需等useEffect或mounted后再触发跳转） - 固定定位的导航栏会遮挡锚点顶部——用
scroll-margin-top给目标元素留白，比如scroll-margin-top: 72px; - Safari 15.4 以下版本不支持
scroll-behavior: smooth，会静默退化为瞬时跳转，不报错也不警告
需要 JS 控制时，别绕远路
当你要带偏移、判断可见性、或兼容老浏览器时，直接调用原生 API 更可靠。
- 用
element.scrollIntoView({ behavior: 'smooth', block: 'start' })，不要手写window.scrollTo+ 定时器 - 即使已设
html { scroll-behavior: smooth; }，调用scrollIntoView()时仍需显式传{ behavior: 'smooth' }，否则默认是'auto' - 避免混用：不要一边靠 CSS 实现锚点跳转，一边又用 JS 强制
scrollTo，容易冲突或丢失scroll事件
真正卡住你的，从来不是少写一行 CSS，而是目标元素没挂载、id 拼错了、导航栏盖住了、或者 Safari 正默默放弃平滑——这些细节比类名本身重要得多。
-
