Add .animate-spin-counterclockwise

[laosb]

For now, .animate-spin only spins clockwise. In some situations, counter-clockwise spinning is also needed.

For example, Heroicons provides icon refresh:

... arrows of which are counter-clockwise, and applying a clockwise spinning animation makes it very weird.

[simonswiss]

Hey @laosb 👋

The example of the refresh heroicon is indeed a scenario where a "reverse spin" would make perfect sense.

The animations implemented in Tailwind are a small subset of the most commonly used animations. You're highly encouraged to add custom animations to the config file to fulfil specific needs that aren't covered in the "base" options.

[troccoli]

For those coming here with the same issue, this is what I did.

Add the following to your tailwind.config.js

module.exports = {
  theme: {
    extend: {
      animation: {
        'reverse-spin': 'reverse-spin 1s linear infinite'
      },
      keyframes: {
        'reverse-spin': {
          from: {
            transform: 'rotate(360deg)'
          },
        }
      }
    }
  }
}

and rebuild your assets npm run dev. Then you can use it with the class animate-reverse-spin

[simonswiss]

That's the way!

Here's a little example of your implementation in a Tailwind Play:

https://play.tailwindcss.com/C1KUQfO8Ul?file=config

I just added a comma + quotes to fix the syntax in your answer 👍

[troccoli]

Thanks @simonswiss . That wasn't my full config file btw, just an extract for this example.

[cosbgn]

You can just use: animate-spin transform rotate-180 like this: https://play.tailwindcss.com/zP6KyW78XO so you don't even need to touch the config file

[troccoli]

That's a great tip @cosbgn. I still think it would be valuable to add reverse-spin to tailwind

[ctsstc]

This doesn't seem to currently work, I imagine it's just rotating it 180 which is not mirroring it like we need; you've only animated halfway through its animation which should look like where it started if it's symmetrical.

I tried to do: animate-spin transform -scale-x-100 which will mirror it across the vertical axis, but now it takes that transformation into the animation so it looks like a glitchy coin spinning on its edge.

Edit: You can wrap the svg with this <div class="w-fit transform -scale-x-100">
but then it also flips the inner animation so then it's still wrong 😂

Here it is, just inverse the operations ;)
https://play.tailwindcss.com/3sMQhZuIOm

<div class="w-fit animate-spin">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 transform -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
  </svg>
</div>

[troccoli]

Hi @ctsstc

Have you tried my suggestion? Does that work?

[ctsstc]

The extended configuration works, but it didn't solve the icon being mirrored so that it could rotate clockwise instead. I also strayed away from as not to have a huge configuration, even if this one implementation feels odd, it does feel proper -- just needs a few transforms, but the container is a bit unfortunate but makes sense.

[cesvelasquez22]

I don't know why for me works animation: { 'reverse-spin': 'spin-reverse 1s linear infinite' } ,
but that was my case :)

[AcerFeng]

CSS property animation-direction: reverse;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

[TSIA-SN]

CSS property animation-direction: reverse;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

It would be really nice if these properties were added to Tailwind

[imCorfitz]

Using this tailwind plugin: https://github.com/jamiebuilds/tailwindcss-animate you gain access to the class direction-reverse which indeed reverses the animation direction.

[rboonzaijer]

Here is an example of how to add the reverse+mirror animations directly into your own CSS, without a plugin:

Example

• Demo: https://play.tailwindcss.com/xtMzuVi48x
• Icon: https://lucide.dev/icons/rotate-ccw

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
  <path d="M3 3v5h5"></path>
</svg>

Step 1. Add to CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .animate-spin-reverse {
    @apply animate-spin;
    animation-direction: reverse;
  }
  @keyframes spin-mirror {
    from {
      transform: rotate(0deg) scaleX(-1);
    }
    to {
      transform: rotate(360deg) scaleX(-1);
    }
  }
  .animate-spin-mirror {
    animation: spin-mirror 1s linear infinite;
  }
  .animate-spin-mirror-reverse {
    @apply animate-spin-mirror;
    animation-direction: reverse;
  }
}

Step 2. Use it!

<svg class="animate-spin" ... /> (clockwise, incorrect arrow direction)
<svg class="animate-spin-reverse" ... /> (clockwise with mirrored image, correct direction for something like 'Loading')
<svg class="animate-spin-mirror" ... /> (counterclockwise, correct direction for something like 'Reverting')
<svg class="animate-spin-mirror-reverse" ... /> (counterclockwise with mirrored image, incorrect arrow direction)

[Bagmaz]

<svg class="animate-spin" ... /> (default)
<svg class="animate-[spin_2s_linear_infinite_reverse]" ... /> (reverse)