New Animation spin-reverse

[mazedlx]

Since TailwindCSS "only" features animate-spin which will spin items clockwise. This is fine most of the time. Sometimes spinning e.g. SVGs required a counter-clockwise rotation. I've created a Tailwind Play at https://play.tailwindcss.com/tXl8Pim9Sn as a proof-of-concept.

<div class="mx-auto w-5/6 h-screen flex items-center justify-center">
  <div class="w-10 h-10 animate-spin-reverse">
    <svg xmlns="http://www.w3.org/2000/svg" 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>
</div>

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

.animate-spin-reverse {
  animation: spin-reverse 1s linear infinite;
}

@keyframes 'spin-reverse' {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

[Alja7dali]

This worked with me, I added the following to tailwind.config.js..

import { fontFamily } from "tailwindcss/defaultTheme";

/** @type {import('tailwindcss').Config} */
const config = {
  // other code here...
  theme: {
    // other code here...
    extend: {
      // other code here...
      animation: {
        'spin-reverse': 'spin-reverse 1s linear infinite',
      },
      keyframes: {
        'spin-reverse': {
            from: {
               transform: 'rotate(360deg)',
            },
            to: {
               transform: 'rotate(0deg)',
            },
        },
      },
    }
  },
};

export default config;

[rubenkaiser]

Anyone in need of this. Easy way:
animate-spin [animation-direction:reverse]