Tailwind Animation utilities are not working

[thm1d]

I am trying to create a spin component but it's not animating.
here is my code

<div class="relative flex justify-center items-center h-3">
    <div class="rounded-full animate-spin ease duration-300 w-5 h-5 border-2 border-white"></div>
</div>

[chr-ge]

I copied your code into tailwind play and its spinning. https://play.tailwindcss.com/iKd6C9dhPj
You're trying to animate the spin correct?

[thm1d]

Yes, I was trying to make a spinner. There was a problem with my tailwind installation. I then used the CDN build and it started spinning.

[simonswiss]

Hey!

Your element might be actually spinning, but you can't see it because of the rounded-full class 😅

Here's the same code with rounded instead of rounded-full (+ some background color and different height), as you can see the element with animate-spin is spinning 👍

https://play.tailwindcss.com/Zo6XeEp1bP

[thm1d]

There was a problem with my tailwind installation. I then used the CDN build and it started spinning.

[thm1d]

I used the CDN build and changed the code to this and it worked :

<div wire:loading class="absolute top-0 right-0 mr-2 mt-2">
  <svg class="animate-spin h-4 w-4 rounded-full bg-transparent border-2 border-transparent border-opacity-50" style="border-right-color: white; border-top-color: white;" viewBox="0 0 24 24"></svg>
</div>

[tom-oroshi]

I was having the same issue with pulse, using CDN worked for me as well. Thanks for posting this.

[PhilippSchreiber]

Using the CDN version for fixing this is not a fix, tbh. It's just throwing the whole idea of tailwind away, because you loose the benefits of having only the classes of your code inside of the CSS:

[PhilippSchreiber]

For me applying "absolute" to the element with "animate-spin" solved the problem.

[JacquesvanWyk]

This might not be answer for all but i ran the command npm run production and that stripped all the purged all the unused classes but when i ran npm run dev all came back.

[harddownloader]

I had the same problem just a moment ago.
In my case, the existing incorrect class name("text‑white" instead of "text-white").
So I solved the problem by putting the tailwind classes in the SCSS styles file, and plugging that class in the component, and only then did I get the warning.

[sgwanlee]

in my case, I put custom animation not in the extend of tailwind.config.ts file
After I put custom animation in the extend, the problem solved.

before

const config = {
    ...
    extend: {...}
    animation: {
        "loop-scroll": "120s linear 0s infinite normal none running loop-scroll",}
    }

fixed

const config = {
    ...
    extend: {
         ...,
         animation: {
             "loop-scroll": "120s linear 0s infinite normal none running loop-scroll",}
         }
     }

[dekunle02]

this worked for me! Thanks