tailwind css 中没有 scroll-smooth 类，它根本不存在；正确做法是直接在 html 元素上设置 scroll-behavior: smooth，且需确保目标元素存在、可滚动、未被遮挡，并注意 safari 兼容性及 js 调用时显式传入 behavior: 'smooth'。

Tailwind CSS 中没有 scroll-smooth 类——直接写 class="scroll-smooth" 不会生效，浏览器根本不识别这个类名。

为什么 scroll-smooth 类完全不起作用

这不是配置漏了、也不是没重启 dev server，而是根本不存在这个工具类。Tailwind 官方从未提供、也未计划支持 scroll-smooth。你看到的教程或代码片段里出现它，基本都源于对原生 CSS 属性 scroll-behavior 的误传或命名混淆。

• 浏览器只认 scroll-behavior: smooth 这个声明，不认任何叫 scroll-smooth 的类
• 即使你在 tailwind.config.js 里手动 extend 出一个 scroll-smooth，它也必须最终编译为 scroll-behavior: smooth 才起效
• 加在普通 <div> 上若该元素不可滚动（比如没设 <code>overflow），属性照样被忽略

  真正该加 scroll-behavior: smooth 的地方

  必须加在**实际发生滚动的容器**上。对页面级锚点跳转（#id）而言，唯一可靠的位置是 元素。

  

  PigX UI 前端开发

  PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

  下载
  • ✅ 正确：html { scroll-behavior: smooth; }（写在 CSS 文件里，或用 @layer base）
  • ❌ 错误：body { scroll-behavior: smooth; } —— 多数浏览器不支持，Safari 尤其不稳定
  • ⚠️ 局部滚动容器（如 <div class="h-screen overflow-y-auto">）可以加，但仅影响该容器内子元素的 <code>scrollIntoView()，和锚点跳转无关
  • 若页面用了 height: 100vh; overflow: hidden 等布局，可能让 html 失去滚动能力，此时属性自然失效

  写了 scroll-behavior: smooth 还是“咔”一下跳过去？先查这四点

  90% 的“不生效”问题和 CSS 本身无关，而是 DOM 或触发链断了。

  • href 和目标 id 必须完全一致：大小写、连字符、空格都区分（href="#Contact" 对不上 id="contact"）
  • 目标元素不能是 display: none 或尚未挂载（React/Vue 中异步加载区块，需等 useEffect 或 mounted 后再触发）
  • 固定定位导航栏会遮挡锚点顶部——用 scroll-margin-top: 72px 给目标元素留白
  • Safari 15.4 以下版本不支持 scroll-behavior: smooth，会静默退化为瞬时跳转，不报错也不警告

  JS 控制滚动时，behavior: 'smooth' 必须显式传

  即使已设 html { scroll-behavior: smooth; }，调用 scrollIntoView() 时仍需显式传参，否则默认是 'auto'：

  document.getElementById('section').scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });

  • 不要手写 window.scrollTo + 定时器模拟，既难维护又容易在 Safari 上出错
  • 移动端 Safari 对 CSS 方案支持极差（iOS 16+ 仅 JS 调用有效），所以关键路径别依赖全局 scroll-behavior
  • 混合使用 CSS 和 JS 滚动时，确保目标元素属于同一滚动上下文（比如都作用于 html，而非一个在 div、一个在 body）

  真正麻烦的从来不是加一行 CSS，而是确保目标元素存在、可滚动、没被遮挡、且在正确的上下文中被调用——这些细节比类名本身重要得多。