JSFiddle - React, Tailwind, and code Playground

HTML

Default : 
<form>
    <input type="text" name="retypepassword" required></input>
</form>

Custom Css
<form class="customCss">
    <input type="text" name="retypepassword" required></input>
</form>

CSS

.customCss > input:focus:invalid[required][name="retypepassword"] {
    border:2px solid green;
    box-shadow: 0 0 4px #F5192F;
    color:blue;
    area-invalid:true;
}