JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="b">
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
  <div class="b__item">text</div>
</div>

SCSS

.b {
  background: #fff;
  margin: 5px;
  padding: 5px 0;
  border-bottom: 1px solid #b6b6ba;
}

.b__item {
  padding-left: 10px;
  padding-right: 10px;    
}

$div: 100;

@for $i from 1 through $div {
  .b__item:nth-of-type(#{$i}) {
    padding-left: $i * 10px;
  }
}