JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<ul>
  <li>Item 01</li>
  <li>Item 02</li>
  <li>Item 03</li>
  <li>Item 04</li>
</ul>

SCSS

$primary-color : red;
$number: 4;
@for $i from 1 through $number {
  ul li:nth-child(#{$i}) {
    background: darken($primary-color, $i*$number);
    //check  with fontsize for value checking
    $size:  px;
    font-size:$i*$number+$size;
  }
}
li{
  list-style: none;
  padding: 10px;
}