如何用Tailwind CSS的scroll-smooth类实现流畅滚动效果？

本文共计902个文字，预计阅读时间需要4分钟。

直接加 `scroll-smooth` 不生效，大概率是因为 Ta 标签的样式覆盖了。

检查你的 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。