JSFiddle - React, Tailwind, and code Playground

HTML

<style>
div {
    height:200px;
    width:200px;
    }
    
    #big .little {
    /* Specificy value = 110 */
    background-color:red;
    }

     #big .little.little {
    /* Specificy value = 120 */
    background-color:blue;
    }
    
.little.little.little.little.little.little.little.little.little.little.little.little.little {
    /* Specificy value = 130, why doesn't this win? */
    background-color:green;
    }
    
    
</style>   

<div id="big">
    <div class="little"></div>
</div>