3xl: targets Full HD monitors, TVs — everything from 1920px wide. Full HD monitors and TVs: verify whitespace scales so layouts do not look stranded.

What usually changes here#

  • Whitespace rebalancing
  • TV-mode type bumps (optional)

Example#

html
<div class="py-16 3xl:py-24">…</div>

Combining#

Stack with the other screens and with variants: 3xl:hover:bg-blue-600, dark:3xl:bg-slate-900. Order: screen first, then state.

responsive/2xl|2xl: (1536px) · responsive/4xl|4xl: (2560px) · responsive/breakpoint-strategy|Breakpoint strategy