JSFiddle - React, Tailwind, and code Playground

CSS

/* background is per default white */
body { background: white; }

/* When the screen is larger than 320, body is green */
@media only screen and (min-width: 320px) {
    body { background: green; }
}

/* When the screen is at least 480px wide, but no more than 600px, body is BLUE */
@media only screen and (min-width: 480px) and (max-width: 600px) {
    body { background: blue; }
}

/* When the screen is at least 800px wide, body is RED */
@media only screen and (max-width: 800px) {
    body { background: red; }
}

/*
 1. The background is white per default
 2. When the screen is at least 320px wide, it will change to GREEN
 3. When the screen is between 480px and 600px wide, it will change to BLUE
 4. When the screen is at least 800px wide, it will change to RED
 5. When the screen is between 600px and 800px wide, it will change back to GREEN. Why is this?

 Note that we didn't set a breakpoint between 600px and 800px.
 It will therefore inherit from one of the earlier rules.
 Since we didn't set a max-width for the first media query,
 it will adhere to those rules (since it's still larger than 320px).

 Therefore, the screen will be green between 600px and 800px.

 Had that rule not been there, the background would change to white.
 
*/