2xl: targets large desktops — everything from 1536px wide. Large desktops. Watch line lengths — widen containers, not fonts.

What usually changes here#

  • Expanded rails and galleries
  • max-w-7xl containers

Example#

html
<div class="max-w-7xl mx-auto 2xl:max-w-none 2xl:px-12">…</div>

Combining#

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

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