JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<div class="foo">
  Example
</div>

<strong>Design:</strong>
<ul>
  <li>Above 480, the text and background should be blue.</li>
  <li>Above 800, the text and background should be red.</li>
  <li>Below 480, the border should be blue and dotted.</li>
  <li>Below 800, the border should be red and dashed.</li>
</ul>

<p>
  While rules exist for each of these settings, half of them are incorrectly ordered and so are never used.
</p>
<p>
  When writing media queries for an element:
</p>
<ul>
  <li>Use <b>min-width</b> in increasing order</li>
  <li>Use <b>max-width</b> in decreasing order</li>
</ul>

SCSS

.foo { 
  margin: 1em;
  padding: 1em;
  border: solid black;
  border-width: 4px;
  
  /*
   * Broken Ordering - min-width must be smallest to largest
   * Text color is always Blue above 480px
   */
  @media only screen and (min-width: 800px) {
      color: red;
  }

  @media only screen and (min-width: 480px) {
      color: blue;
  }

  /*
   * Correct Ordering - min-width must be smallest to largest
   * Background color changes at both breakpoints
   */
  @media only screen and (min-width: 480px) {
      background: #DDDDFF;
  }

  @media only screen and (min-width: 800px) {
      background: #FFDDDD;
  }

  /*
   * Broken Ordering - max-width must be largest to smallest
   * Border style is only ever dashed or solid
   */
  @media only screen and (max-width: 480px) {
      border-style: dotted;
  }

  @media only screen and (max-width: 800px) {
      border-style: dashed;
  }

  /*
   * Correct Ordering - min-width must be smallest to largest
   * Border color changes at both breakpoints
   */
  @media only screen and (max-width: 800px) {
      border-color: red;
  }

  @media only screen and (max-width: 480px) {
      border-color: blue;
  }
}