JSFiddle - React, Tailwind, and code Playground

HTML

<div class="canvas red">
        <div>
            xx
            <div class="canvas blue">
                yyyy
                <div>
                    has blue border
                    <div class="canvas red">
                        ...
                        <div>
                            xxx
                            <div>
                                MUST HAVE RED BORDER
                            </div>
                        </div>
                    </div>           
                </div>
            </div>
        </div>
    </div>

CSS

div.canvas > div:first-child {
    border-style: solid;
    
}

div.canvas.red > div:first-child {
    border-width: 4px;
    border-color: red;
}
div.canvas.red > div:first-child div { border-color: green; boder-width: 2px; }

div.canvas.blue > div {
    border-width: 1px;
    border-color: blue;
}