Tailwind 的 -scroll-mt-* 工具类需直接作用于带 id 的锚点元素（如 ），而非其父容器，否则滚动定位时无法生效。
tailwind 的 `-scroll-mt-*` 工具类需直接作用于带 `id` 的锚点元素（如 `
`），而非其父容器，否则滚动定位时无法生效。
在单页应用或长页面中，使用锚点链接（如 href="#testimonials"）跳转时，浏览器默认会将目标元素顶部紧贴视口顶端，常被固定导航栏遮挡。Tailwind 提供的 -scroll-mt-* 类（对应 CSS scroll-margin-top）正是为解决此问题而设计——它为元素定义“滚动快照区域”的上边距，使浏览器在滚动定位时自动预留指定空间。
但关键在于：该类必须直接添加到具有 id 的目标元素上，而非包裹它的 标签上。由于浏览器滚动时锚点定位的是 #testimonials 元素本身，只有该元素设置了 scroll-margin-top，才能触发偏移计算。
✅ 正确写法如下：
<section class="mt-24 text-4xl lg:text-5xl font-bold space-y-24">
<h2 id="testimonials" class="font-bold -scroll-mt-20">Testimonials</h2>
<!-- 后续 testimonial 内容保持不变 -->
<figure class="px-14">
<blockquote class="bg-slate-800 dark:bg-slate-800 p-8 rounded-2xl">
<p class="text-2xl italic">
<q>Manga<span class="text-indigo-300">Verse</span> is a manga lover's dream come true!</q>
</p>
</blockquote>
<figcaption class="text-xl italic font-medium mt-6">— Clark Keneth</figcaption>
</figure>
<!-- 其他 testimonials... -->
</section>⚠️ 注意事项：
- 确保页面已启用 scroll-smooth（你已在 上正确设置 class="scroll-smooth"），否则滚动无动画效果；
- -scroll-mt-* 值建议根据导航栏高度设定（如 -scroll-mt-16 ≈ 4rem，适配常见固定头部）；
- 该属性仅在元素参与滚动定位（即作为锚点被跳转）时生效，对普通布局无影响；
- 若仍无效，请检查是否启用了 scroll-behavior: smooth 的全局样式冲突，或确认 Tailwind 版本 ≥ v3.3（scroll-mt 系列工具类自此版本起正式支持）。
通过将 -scroll-mt-20 移至
