JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

}

@media only screen and (min-width: 851;) {

    .mainNavi2{
     border:1px solid green;
    }

}


@media only screen and (max-width: 850) {

	.mainNavi2{
    border:1px solid blue;
	}
}