JSFiddle - React, Tailwind, and code Playground

HTML

<div class="squareList">
    <div class="square square--red"></div>
    <div class="square square--yellow"></div>
    <div class="square square--blue"></div>
    <div class="square square--green"></div>
</div>

SCSS

$colors: (
    red: #ff0000,
    yellow: #ffd000,
    blue: #00baff,
    green: #00ff00
);

@each $colorname, $color in $colors {
  .square--#{$colorname} {
    background-color: $color;
  }
}

.square {
    display: inline-block;
    width: 100px;
    height: 100px;
}