JSFiddle - React, Tailwind, and code Playground

HTML

<h3>CSS Being Dynamically Applied</h3>
<textarea id="css" rows="10" style="width: 100%"></textarea>
<h3>Test Div's (should lose color if selector too long)</h3>

CSS

/* CSS is being applied by javascript to the style tag.
   See the text box or use developer tools to see
   generated css.

   If the selector is too long, then the div's should lose color.
*/

JavaScript

var body = document.body;
var maxNum = 4100;
var bodyClass = 'y' + maxNum;



for(var i = 1; i <= maxNum; i++){
    var parent = document.createElement('div');
    var child = document.createElement('div');
    parent.className = 'y' + i;
    body.appendChild(parent);
    parent.appendChild(child);
    child.textContent = i;
}   

document.getElementById('css');

var sel = '.y1 > *';
for(var i = 2; i <= maxNum; i++)
    sel += ', .y' + i + ' > *';

//sel += ', .dsfd .y4097 .wdwd > *';
//sel += ', .y4098';
css.value = sel  + ' { background-color:red;color:black }';
document.getElementsByTagName('style')[0].innerHTML = css.value;