4xl: targets QHD / 2K monitors — everything from 2560px wide. QHD/2K: dashboards and data walls. Consider max-w caps for reading content.

What usually changes here#

  • Cap reading columns
  • Multi-pane app layouts

Example#

html
<div class="grid-cols-3 4xl:grid-cols-4">…</div>

Combining#

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

responsive/3xl|3xl: (1920px) · responsive/5xl|5xl: (5000px) · responsive/breakpoint-strategy|Breakpoint strategy