How do you use media queries in Next.js global CSS w/ Tailwind?

Question

I am trying to use a media query inside my globals.css file to adjust my CSS for different screen sizes, but the styling in my media query isn't being reflected. It works when I use Tailwind's inline-styling, but I want the changes to apply to specific tags since I'm using markdown. No matter where I look on both Tailwind's and Next.js's documentation page, I can't seem to find any unique rules between the two that would keep my media query from working the way I want it to. How do I use media queries in Next.js's global.css file with Tailwind enabled?

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    background-color: white;
    margin: 50px 0px;
    overflow-x: hidden;
}

@media screen and (max-width: 500) {
    body {
        background-color: black;
        margin: 50px 0px;
        overflow-x: hidden;
    }
}

Answer 1

You might be missing the unit for your media query selector, try changing it to 500px instead of 500:

@media screen and (max-width: 500px) {
    body {
        background-color: black;
        margin: 50px 0px;
        overflow-x: hidden;
    }
}

You can learn more about media queries and units in the MDN documentation.