Media Query

A media query is an "if… then…" written in CSS. The most common kind checks screen width: @media (max-width: 768px) { ... } means the styles inside the braces only apply when the width is 768px or less. Mobile-first code uses min-width and adds styles step by step, from small screens up to large ones.

It can check more than width: whether the system has dark mode on (prefers-color-scheme: dark), whether the user wants less animation (prefers-reduced-motion), whether the device supports mouse hover (hover: hover), and whether the page is being printed (print).

How it relates to similar terms: responsive design is the goal, media queries are the tool, and breakpoints are the width values written in media queries. With Tailwind you usually don't write them by hand. Prefixes like md: and dark: are media queries under the hood.