Kevin Powell - Community•2y ago

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 doesn't work. Let me know it. Thank you for you time.

2 Replies

Chris Bolson•2y ago

I am the first to admit that I don't know much about Tailwind but as far as I can tell you have set up the transition but not told it to actually transition anything. Wouldn't you need to add an event such as a hover to initiate the transition? Sorry if I am way off the mark.

PsyzenOP•2y ago

Simply put I have Google Logo the big G image. 1. I want that G image to be in a white circle to stay still. Because now I have layout shifts.. 2. When the animation happens the width changes to the left while image doesn't move and reveals word Google. This is also ok to be done in normal CSS. I will convert it myself to Tailwind.

Gaming

Programming

Tailwind CSS transition not working.