TailwindCSS中translate-y属性不生效问题排查求助

问题根源是：行内元素不支持CSS transform属性，你用来包裹导航文字的<span>默认是行内元素，所以group-hover:-translate-y-6不会生效。

修复步骤： #

• 给包含导航文字的<span>添加inline-block类，将其转为行内块级元素，这样transform属性就能正常工作了。
• 可选：如果hover后下划线位置需要微调，可以调整它的bottom值（比如从-bottom-2改成-bottom-4），配合文字上移的距离让布局更协调。

修改后的代码： #

<ul class="flex items-center gap-14 font-YSDarkSemiBold text-lg">
    <li class="group relative">
        <a href="#">
            <span class="inline-block group-hover:-translate-y-6 transition-all">Techno
                Conference</span>
            <span
                class="absolute left-0 right-0 mx-auto -bottom-4 w-0 h-1 bg-tcLinearGradient transition-all group-hover:w-[70px] rounded-full group-hover:shadow-[0px_0px_6px_1px_#FF6E6EB3]"></span>
        </a>
    </li>
    <li class="group relative">
        <a href="#">
            <span class="inline-block group-hover:-translate-y-6 transition-all">Techno
                Academy</span>
            <span
                class="absolute left-0 right-0 mx-auto -bottom-4 w-0 h-1 bg-taLinearGradient transition-all group-hover:w-[70px] rounded-full group-hover:shadow-[0px_0px_6px_1px_#FFFD96B3]"></span>
        </a>
    </li>
    <li class="group relative">
        <a href="#">
            <span class="inline-block group-hover:-translate-y-6 transition-all">Hackathon
                6.0</span>
            <span
                class="absolute left-0 right-0 mx-auto -bottom-4 w-0 h-1 bg-hackLinearGradient transition-all group-hover:w-[70px] rounded-full group-hover:shadow-[0px_0px_6px_1px_#246FFFB3]"></span>
        </a>
    </li>
</ul>

补充说明： #

行内元素（如<span>、默认状态的<a>）无法应用transform、margin-top/bottom等属性，转为inline-block或block后就能正常使用这些CSS特性了。调整下划线的bottom值是为了让文字上移后，下划线的相对位置更合理，你可以根据实际需求调整这个数值。

内容的提问来源于stack exchange，提问作者Christopher Nathanael Tessy