JSFiddle - React, Tailwind, and code Playground

HTML

<h5>Broken Nth Child</h5>
<div class="strat"><svg height="380" width="800" fill="#fff"><rect x="0" y="0" height="400" width="800" stroke="#fff" fill="#fff" class="chart-background"></rect><text x="140" y="100" font-size="10px" fill="#999" text-anchor="end">0</text><text x="660" y="100" font-size="10px" fill="#999" text-anchor="start">89%</text><circle r="2" cx="150" cy="97" opacity="1" fill="#999"></circle><line x1="150" x2="650" y1="97" y2="97" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"></line><circle r="2" cx="650" cy="97" opacity="1" fill="#999"></circle><g class="bar-circles"><circle r="30" cx="240.34792368125704" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="262.7946127946128" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="273.4567901234568" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="253.8159371492705" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="262.7946127946128" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"></circle><circle r="30" cx="256.06060606060606" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"></circle><circle r="30" cx="266.16161616161617" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title=""...

CSS

.strat {
    width: 300px;
    margin: 0 auto;
}

.strat .bar-circles:nth-child(even) circle {
    fill: red;
}

.strat .bar-circles:nth-child(odd) circle {
    fill: blue;
}

.strat .bar-circles:nth-child(3n+0) circle {
    fill: #f7b454;
}

.strat .css-fix {
    stroke: #f0f;
}