JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div>
  <h1>The <span>not screen and</span> media-query trick</h1>
  <p>
    We have a query <span>min-width: 300px</span> and <span>max-width: 500px</span>. We color the background red in that area.
  </p>
  <blockquote>
    But what about the "surrounding" areas?<br />They should be blue!
  </blockquote>
  <p>
    Instead of simply putting a default blue, and overwriting with red when matching the query, you can use the `not` trick. Add <span>not screen and</span> before your query, and it will work.
  </p>
  <p>
    Resize window to see effect.
  </p>
  <hr>
  <p>
    Kind regards,<br />
    Kenneth Luplau-Brøgger<br />
    Heftig
  </p>
</div>

CSS

/* red when matching query */
@media (min-width: 300px) and (max-width:500px) {
  body {
    background: red;
  }
}

/* blue when not matching query */
@media not screen and (min-width: 300px) and (max-width:500px) {
  body {
    background: blue;
  }
}

/* 

Demo style 




*/
html {
  color: white;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: calc(1vw + 1vh - 20% + 0.5rem);
}

h1 {
  font-size: 3rem;
  margin-bottom: 3rem;
  line-height: 1em;
}

p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

span {
  font-weight: bold;
  color: yellow;
  display: inline;
  white-space: pre-wrap;
}

div {
  margin: 10%;
}

blockquote {
  font-style: italic;
  margin: 2rem 0 2rem 2rem;
  font-size: 1.5rem;
}

hr {
  border-top: 0.5rem solid yellow;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  margin-top: 12%;
  margin-bottom: 5%;
}