Tailwind中-scroll-mt在Testimonials区块不生效的问题求助

你遇到的问题核心是属性应用位置错误，同时属性值的逻辑也搞反了，以下是具体修正方案：

问题根源 #

锚点跳转的目标是<h2 id="testimonials">元素，但你把-scroll-mt-20加在了父级<section>上，该属性无法作用到锚点目标上。另外，-scroll-mt-*是用来减少滚动时元素到顶部的间距，而你需要的是增加间距，应该使用scroll-mt-*类。

修正步骤 #

1. 移除section标签上的-scroll-mt-20类
2. 给锚点目标<h2 id="testimonials">添加scroll-mt-*类，比如scroll-mt-32（对应8rem的顶部间距，可根据你的导航栏高度调整数值）

修正后的代码片段：

<!-- Testimonials Section -->
<section class="mt-24 text-4xl lg:text-5xl font-bold space-y-24"> 

  <h2 id="testimonials" class="font-bold scroll-mt-32">Testimonials</h2>
  <!-- 其余内容保持不变 -->
</section>

补充说明 #

• scroll-mt-*的数值需要匹配你的导航栏高度，比如导航栏高度为64px，就用scroll-mt-16；高度为80px，就用scroll-mt-20
• 你的根元素已经添加了scroll-smooth类，这部分无需修改

内容的提问来源于stack exchange，提问作者Wolf Cutter