Responsive design with breakpoint variants

Every utility class in Tailwind can be applied conditionally at different breakpoints: prefix the utility with the breakpoint name followed by a colon, as in w-16 md:w-32 lg:w-48. There are five breakpoints by default, inspired by common device resolutions — sm at 40rem (640px), md at 48rem (768px), lg at 64rem (1024px), xl at 80rem (1280px), and 2xl at 96rem (1536px) — each compiled to an @media (width >= ...) rule, and this works for every utility in the framework, even letter spacing or cursor styles. Tailwind is mobile-first: unprefixed utilities like uppercase apply at all screen sizes, while prefixed utilities like md:uppercase apply at that breakpoint and above. So target mobile with unprefixed utilities and override them at larger breakpoints, as in text-center sm:text-left; sm:text-center centers text only on screens 640px and wider, not on small screens. Styles applied by rules like md:flex stay applied at larger breakpoints by default. Scope: Tailwind CSS v4. Reviewed October 4, 2026.