JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>foo</li><li>bar</li>
    <li>foo</li><li>bar</li>
    <li>foo</li><li>bar</li>
    <li>foo</li><li>bar</li>
    <li>foo</li><li>bar</li>
    <li>foo</li><li>bar</li>
    <li>foo</li><li>bar</li>
    <li>foo</li><li>bar</li>
    <li>foo</li><li>bar</li>
</ul>

CSS

ul li:nth-child(4n+1), ul li:nth-child(4n+2) {
        background: #ccc;
    }
    
    ul li:nth-child(4n+3), ul li:nth-child(4n){
        background: #ddd;
    }