JSFiddle - React, Tailwind, and code Playground

HTML

<code>@media not print {&hellip;}</code>
<code>@media not print and (color) {&hellip;}</code>
<code>@media not print and (monochrome) {&hellip;}</code>
<code>@media screen and (color) {&hellip;}</code>
<code>@media not screen and (monochrome) {&hellip;}</code>
<code>@media not print and (min-width:500px) {&hellip;}</code>
<code>@media screen and (max-width:500px) {&hellip;}</code>
<code>@media braille, handheld, projection, screen, tty, embossed, speech, tv and (monochrome) {&hellip;}</code>
<code>@media (not print) and (max-width:500px) {&hellip;}</code>
<code>@media not print { @media (max-width:500px) { {&hellip;} }</code>

CSS

body > * {
    color: white;
    background-color: maroon;
    border: 1px solid black;
    padding: 0.5em;
    display: block;
}

/* Assuming you're viewing this on a color screen, (color) will always be true and (monochrome) will always be false */

/* "Is not a printer". */
@media not print {
    body > :nth-child(1) {
        background-color: green;
    }
}

/* "Is not a color printer". */
@media not print and (color) {
    body > :nth-child(2) {
        background-color: green;
    }
}

/* "Is not a monochrome printer". */
@media not print and (monochrome) {
    body > :nth-child(3) {
        background-color: green;
    }
}

/* "Is a color screen". */
@media screen and (color) {
    body > :nth-child(4) {
        background-color: green;
    }
}

/* "Is not a monochrome screen". */
@media not screen and (monochrome) {
    body > :nth-child(5) {
        background-color: green;
    }
}

/* "Is not a printer with at least 500px wide viewport". */
@media not print and (min-width:500px) {
    body > :nth-child(6) {
        background-color: green;
    }
}

/* "Is a screen with at least 500px wide viewport". */
@media screen and (max-width:500px) {
    body > :nth-child(7) {
        background-color: green;
    }
}

/* "Is any of [braille, handheld, projection, screen, tty, embossed, speech] or is a monochrome tv". */
@media braille, handheld, projection, screen, tty, embossed, speech, tv and (monochrome) {
    body > :nth-child(8) {
        background-color: green;
    }
}

/* Sadly, this is a malformed media query. */
@media (not print) and (max-width:500px) {
    body > :nth-child(9) {
        background-color: orange;
    }
}

/* This is invalid. */
@media not print {
    @media (max-width:500px) {
        body > :nth-child(10) {
            background-color: orange;
        }
    }
}