Tailwind CSS - Rotate

Tailwind CSS: Element Rotation

The rotate utility is part of Tailwind’s transform family, allowing you to rotate elements clockwise or counter-clockwise. It’s perfect for creating visual effects, rotating icons, or building animations like loading spinners.

Rotate Utility Classes

Tailwind provides a set of rotate-{degree} and -rotate-{degree} classes for common rotation values. For custom rotations, you can use arbitrary values.

Class	CSS Properties
rotate-0	transform: rotate(0deg);
rotate-1	transform: rotate(1deg);
rotate-2	transform: rotate(2deg);
rotate-6	transform: rotate(6deg);
rotate-12	transform: rotate(12deg);
rotate-45	transform: rotate(45deg);
rotate-90	transform: rotate(90deg);
rotate-180	transform: rotate(180deg);
-rotate-45	transform: rotate(-45deg);

Core Concept: Combining with Transitions

Rotation is most effective when applied smoothly. Combine rotate-* classes with state variants like hover: and transition utilities (transition, duration-*, ease-*) to create elegant interactive effects.

Example: Interactive Card Rotation

The following example demonstrates how to subtly rotate cards on hover. One card rotates clockwise (hover:rotate-3) and the other counter-clockwise (hover:-rotate-3). The transition-transform and duration-300 classes ensure the rotation is animated smoothly over 300ms.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Rotate</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen">
  <div class="flex flex-col sm:flex-row gap-8">
    <!-- Card 1: Rotates clockwise on hover -->
    <div class="w-48 h-64 bg-white rounded-lg shadow-xl p-6 flex items-center justify-center
                transition-transform duration-300 ease-in-out hover:rotate-3">
      <span class="font-bold text-slate-700">Hover Me</span>
    </div>

    <!-- Card 2: Rotates counter-clockwise on hover -->
    <div class="w-48 h-64 bg-white rounded-lg shadow-xl p-6 flex items-center justify-center
                transition-transform duration-300 ease-in-out hover:-rotate-3">
      <span class="font-bold text-slate-700">Hover Me</span>
    </div>
  </div>
</body>
</html>

Advanced Application: Continuous Animation

For continuous rotation, like a loading spinner, Tailwind provides the animate-spin utility. This class applies a CSS animation that continuously rotates an element 360 degrees.

Example: Creating a Loading Spinner

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Loading Spinner</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 flex items-center justify-center min-h-screen">
  <div class="flex items-center gap-4 text-white">
    <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <span>Loading...</span>
  </div>
</body>
</html>

Pro Tip: Arbitrary Values

If you need a specific rotation angle that isn’t in the default theme, you can use Tailwind’s JIT engine to generate it on the fly. Simply use square brackets to pass in a custom value.

• Example: class="rotate-[17deg]" will apply transform: rotate(17deg);.
• Negative Values: class="-rotate-[22.5deg]" will apply transform: rotate(-22.5deg);.