JSFiddle - React, Tailwind, and code Playground

HTML

<!-- This Works -->
<div class='container'>Mouse Over Here!</div>
<div class='test'>
    <div class='text'></div>
</div>

<br />

<!-- This not Work -->
<div class="container1">
    <div class='container2'>Mouse Over Here2!</div>
</div>

<div class='test2'>
    <div class='text2'></div>
</div>

CSS

/* This Works */
.test .text:before{
    content: 'Text2 Normal';
    color: red;
}
.container:hover ~ .test .text:before{
    content: 'Text2 Hover';
    color: green;
}

/* -------- */

.test2 .text2:before{
    content: 'Text2 Normal';
    color: red;
}

/* This not Work */
.container1 .container2:hover ~ .test2 .text2:before{
    content: 'Text2 Hover';
    color: green;
}

/* This not Works too */
/*.container2:hover ~ .test2 .text2:before{
    content: 'Text2 Hover';
    color: green;
}*/