JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

Text

CSS

/* 
 * Note: Media Queries 3 currently requires 'not' to be followed by a
 * media type (e.g. 'all' or 'screen') for some weird reason. I honestly
 * don't believe this is intentional, so I'm hoping it'll be fixed in
 * a later revision of this spec, otherwise it's Media Queries 4.
 */
@media not all and (min-width: 50em) {
    body {
        color: red;
    }
}

@media (min-width: 50em) {
    body {
        font-size: larger;
    }
}

JavaScript

function displayWidth() {
    $('body').text('Viewport width = ' + $(window).width());
};

$(window).resize(displayWidth);
displayWidth();