JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Why is this not consistent?</h1>

CSS

@media screen and (min-width: 480px) {

    body{
        background-color:#6aa6cc;
        color:#000;    
    }

    @media screen and (min-width: 768px) {
    
        body{
            background-color:#000;
            color:#fff;    
        }
    }

}