JSFiddle - React, Tailwind, and code Playground

SCSS

div{
    width: 10em;
    height: 10em;
    line-height: 10em;
    text-align: center;
    background: tomato;
}

@mixin rot($animationName, $className, $breakpoints) {
  $v: 360 / $breakpoints;
  $x: 0;
  @for $i from 1 through $breakpoints {
    @-webkit-keyframes #{$animationName}#{$i} {
      from { -webkit-transform: rotate($x + deg); }
      $x: $x + $v;
      to   { -webkit-transform: rotate($x   + deg); }
    }
    .#{$className}#{$i} { -webkit-animation: #{$animationName}#{$i} 1s both; }
  }
  
  
}

@include rot(turn, r, 4);