2 replies

Tailwind CSS transition not working.

<div class="mt-6">
  <p class="text-sm">Or sign up with:</p>
  <div class="flex justify-center mt-2">
    <a href="#" class="bg-white rounded-full flex justify-center items-center transition-all duration-1000 ease-in-out" id="googleButton">
      <img src="../assets/icons/google/g-logo-48.png" alt="Google" class="bg-white rounded-full">
      <span class="left-full font-semibold" id="googleText"></span>
    </a>
  </div>
</div>

<div class="mt-6">
  <p class="text-sm">Or sign up with:</p>
  <div class="flex justify-center mt-2">
    <a href="#" class="bg-white rounded-full flex justify-center items-center transition-all duration-1000 ease-in-out" id="googleButton">
      <img src="../assets/icons/google/g-logo-48.png" alt="Google" class="bg-white rounded-full">
      <span class="left-full font-semibold" id="googleText"></span>
    </a>
  </div>
</div>

For the most part everything works. The only thing that doesn't work is the animation speed. No matter what I do nothing happens. I could make it work in regular CSS but that would defeat the point learning in Tailwind CSS.
So if anyone has any clue why

transition-all duration-1000 ease-in-out

transition-all duration-1000 ease-in-out

doesn't work. Let me know it. Thank you for you time.

KP-C

Kevin Powell - Community•3y ago•

2 replies

Psyzen

Tailwind CSS transition not working.

<div class="mt-6">
  <p class="text-sm">Or sign up with:</p>
  <div class="flex justify-center mt-2">
    <a href="#" class="bg-white rounded-full flex justify-center items-center transition-all duration-1000 ease-in-out" id="googleButton">
      <img src="../assets/icons/google/g-logo-48.png" alt="Google" class="bg-white rounded-full">
      <span class="left-full font-semibold" id="googleText"></span>
    </a>
  </div>
</div>

<div class="mt-6">
  <p class="text-sm">Or sign up with:</p>
  <div class="flex justify-center mt-2">
    <a href="#" class="bg-white rounded-full flex justify-center items-center transition-all duration-1000 ease-in-out" id="googleButton">
      <img src="../assets/icons/google/g-logo-48.png" alt="Google" class="bg-white rounded-full">
      <span class="left-full font-semibold" id="googleText"></span>
    </a>
  </div>
</div>

transition-all duration-1000 ease-in-out

transition-all duration-1000 ease-in-out

doesn't work. Let me know it. Thank you for you time.

Tailwind CSS transition not working.

Similar Threads

Tailwind CSS transition not working.

Similar Threads

Similar Threads

Similar Threads