tailwind css 没有 scroll-smooth 类，class="scroll-smooth" 完全无效；真正生效的是 html { scroll-behavior: smooth }，且需确保 href 与 id 严格一致、目标元素可见、无 display: none、并设置 scroll-margin-top 避免导航栏遮挡。
直接说结论：Tailwind CSS 没有 scroll-smooth 类，写 class="scroll-smooth" 完全无效，浏览器直接忽略，控制台也不会报错——这不是配置问题，是根本不存在。
为什么 scroll-smooth 类名不生效
你搜到的教程、代码片段或 AI 生成内容里出现的 scroll-smooth，基本都源于对原生 CSS 属性 scroll-behavior: smooth 的误传或命名混淆。Tailwind 官方从未提供、也未计划支持该工具类。它不是内置类，不能通过 tailwind.config.js 的 extend 或 plugins “启用”——即使你手动加进去，最终也必须编译成 scroll-behavior: smooth 才起作用。
更关键的是：scroll-behavior 是浏览器原生能力，只在**可滚动的容器**上生效，且对页面级锚点跳转（a[href="#section"]）而言，唯一可靠的作用对象是 html 元素。
真正该加在哪？html 还是 body？
必须加在 html 元素上：
html { scroll-behavior: smooth; }
不要加在 body 上——旧版 Safari 和部分 Chrome 版本对 body 上的设置支持不稳定，甚至完全忽略；也不要加在 div.content 等局部容器上，那只会让它的 scrollIntoView() 平滑，和锚点跳转无关。
检查是否生效的最简单方法：打开开发者工具 → 选中 html 元素 → 查看 Computed 面板，确认 scroll-behavior 值为 smooth，且未被 !important 覆盖（某些 UI 库重置样式时会写 html, body { scroll-behavior: auto !important; }）。
点了链接没反应 or 跳了但不平滑？先查这四点
90% 的“不生效”问题和 scroll-behavior 本身无关，而是 DOM 或触发链断了：
-
href和目标id必须完全一致：大小写、连字符、空格都区分，href="#Contact"对不上id="contact" - 目标元素不能是
display: none或尚未挂载（React/Vue 中异步加载后才渲染的区块，需等useEffect或mounted后再触发跳转） - 固定定位的导航栏会遮挡锚点顶部——用
scroll-margin-top: 72px给目标元素留白（值等于头部高度） - Safari 15.4 以下版本不支持
scroll-behavior: smooth，会静默退化为瞬时跳转，不报错也不警告
需要 JS 控制时，别绕远路
当你要带偏移、判断可见性、或兼容老浏览器时，直接调用原生 API 更可靠：
document.getElementById('section').scrollIntoView({ behavior: 'smooth', block: 'start' });
注意两点：
- 即使已设
html { scroll-behavior: smooth; }，调用scrollIntoView()时仍需显式传{ behavior: 'smooth' }，否则默认是'auto' - 别用
window.scrollTo+ 定时器模拟——既难维护，又容易在 Safari 上出错；scrollIntoView是同一套底层机制，可控性更强
真正麻烦的从来不是加一行 CSS，而是确保目标元素存在、可滚动、没被遮挡、且在正确的上下文中被调用——这些细节比类名本身重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
