JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainNavi2">
    <p>test</p>
</div>

CSS

@media only screen and (max-width: 850px) {
    .mainNavi2 {
        border:1px solid blue;
    }
}
@media only screen and (max-width: 800px) {
    .mainNavi2 {
        border:1px solid orange;
    }
}
@media only screen and (min-width: 851px) {
    .mainNavi2 {
        border:1px solid green;
    }
}