JSFiddle - React, Tailwind, and code Playground

by igalst

CSS

.btn {
  &.prim {
    color: blue;
    
    &:hover {
      color: light-blue;
    }
  }
  
  &.danger {
    color: red;
    
    &:hover {
      color: light-red;
    }
  }
}



.foo {
  @extend .btn;
  
  $names: danger, prim;
  
   @each $name in $names {
    &.lighter {
      @extend .#{$name}:hover;
    }
  }
}