xl: targets desktops — everything from 1280px wide. Desktops with room: wider containers, more columns, expanded dashboards.

What usually changes here#

  • Wider containers (max-w-screen-xl)
  • Extra dashboard columns

Example#

html
<div class="container mx-auto px-6 xl:px-8">…</div>

Combining#

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

responsive/lg|lg: (1024px) · responsive/2xl|2xl: (1536px) · responsive/breakpoint-strategy|Breakpoint strategy