JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>
        This paragraph should be red if the device is smaller than 47em.
    </p>
    <p>
        This paragraph should be yellow if the device is larger than 47em.
    </p>
</div>

<div>
    <p>
        This paragraph should be red if the device is smaller than 47em.
    </p>
    <p>
        This paragraph should be yellow if the device is larger than 47em.
    </p>
</div>

CSS

@media (max-device-width: 47em) {
    div:first-child p:first-child {
        background-color: red;
    }
}

@media not (max-device-width: 47em) {
    div:first-child p:last-child {
        background-color: yellow;
    }
}

@media not (min-device-width: 47em) {
    div:last-child p:first-child {
        background-color: red;
    }
}

@media (min-device-width: 47em) {
    div:last-child p:last-child {
        background-color: yellow;
    }
}