Why is my TailwindCSS translate-y not working?

Question

I'm trying to make my navlink translate upwards and an underline appears when hovered, but the translate doesn't seem to be working. Can anyone help me find the error? I'm using tailwindcss.

<ul class="flex items-center gap-14 font-YSDarkSemiBold text-lg">
    <li class="group relative">
        <a href="#">
            <span class="group-hover:-translate-y-6 transition-all">Techno
                Conference</span>
            <span
                class="absolute left-0 right-0 mx-auto -bottom-2 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="group-hover:-translate-y-6 transition-all">Techno
                Academy</span>
            <span
                class="absolute left-0 right-0 mx-auto -bottom-2 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="group-hover:-translate-y-6 transition-all">Hackathon
                6.0</span>
            <span
                class="absolute left-0 right-0 mx-auto -bottom-2 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>

Thanks in advance!

Answer 1

transform does not have any visual effect on the <span> elements since they are display: inline by default. You could consider applying display: inline-block to them:

<script src="https://cdn.tailwindcss.com"></script>

<ul class="flex items-center gap-14 font-YSDarkSemiBold text-lg">
  <li class="group relative">
    <a href="#">
      <span class="group-hover:-translate-y-6 transition-all inline-block">Techno
                Conference</span>
      <span class="absolute left-0 right-0 mx-auto -bottom-2 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="group-hover:-translate-y-6 transition-all inline-block">Techno
                Academy</span>
      <span class="absolute left-0 right-0 mx-auto -bottom-2 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="group-hover:-translate-y-6 transition-all inline-block">Hackathon
                6.0</span>
      <span class="absolute left-0 right-0 mx-auto -bottom-2 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>