JSFiddle - React, Tailwind, and code Playground
HTML
<h3>change color for a range</h3>
<ul class="mylist">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
CSS
.mylist {
text-align:center;
background-color: #E8E8E8;
}
.mylist > .item{
border:1px solid #000;
color: #333333;
}
.mylist > .item:nth-child(n+2):nth-child(-n+4) {
background-color: #393939;
color: #F9F9F9;
}