JSFiddle - React, Tailwind, and code Playground

HTML

<div class="see-me">
    <ul>
        <li>.see-me has higher priority level [0,0,10,0], so why is background not gray, but yellow ?</li>
    </ul>
</div>

CSS

*{
        margin: 0;
        padding: 0;
    }
    .see-me, ul li{
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }

    /* [0,0,0,2] */
    ul li{
        background: yellow;
        color:red;
    }

    /* [0,0,10,0] */
    .see-me{
        background: gray;
        color:blue;
    }