JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Media query test</h1>
<h2 class="all">all</h2>
<h2 class="lt960">less than 960</h2>
<h2 class="gt960">greater than 960</h2>
<h2 class="lt960-c">less than 960 w/ comma</h2>
<h2 class="gt960-c">greater than 960 w/ comma</h2>
<h2 class="lt960-o">less than 960 w/ only</h2>
<h2 class="gt960-o">greater than 960 w/ only</h2>

CSS

h2 {
    color: red;
}
@media screen {
    color: green;
}
h2.all {
    color: green;
}
@media screen and (max-width: 960px) {
    h2.lt960 {
        color: green;
    }
}
@media screen and (min-width: 960px) {
    h2.gt960 {
        color: green;
    }
}
@media screen, all and (max-width: 960px) {
    h2.lt960-c {
        color: green;
    }
}
@media screen, all and (min-width: 960px) {
    h2.gt960-c {
        color: green;
    }
}
@media only, screen and (max-width: 960px) {
    h2.lt960-o {
        color: green;
    }
}
@media only, screen and (min-width: 960px) {
    h2.gt960-o {
        color: green;
    }
}