JSFiddle - React, Tailwind, and code Playground

by AlexKhrapal

HTML

<div class="test">
  <div class="col">1</div>
  <div class="col">1</div>
  <div class="col">1</div>
  <div class="col">1</div>
  <div class="col">1</div>
  <div class="col">1</div>
  <div class="col">1</div>
  <div class="col">1</div>
  <div class="col">1</div>
  <div class="col">1</div>
  <div class="col">1</div>
  <div class="col">1</div>
</div>

SCSS

$base-color: #036;

.test {
   .col {
     
   }
}

@for $i from 1 through 3 {
  .col:nth-child(3n + #{$i}) {
    height: 50px + $i;
  }
}