Utilities

Responsive utilities

Every utility below carries an @ breakpoint prefix. They are mobile-first, gated on the global breakpoint flags from the body container, so they react to the viewport. Resize to watch them move.

Grid columns

grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-6

Flex direction

flex flex-col @md:flex-row — stacks on mobile, sits in a row at md

First

Second

Third

Display toggles

block @md:hidden swaps with hidden @md:block — only one shows at a time

Narrow viewport · visible under md

The nav pattern: flex @sm:hidden for the mobile control, hidden @sm:flex for the desktop menu

Column span

grid-cols-12 with col-span-12 @md:col-span-8 content and col-span-12 @md:col-span-4 sidebar

Main content

col-span-12 @md:col-span-8

Sidebar

col-span-12 @md:col-span-4

Flex basis

flex flex-wrap with basis-full @sm:basis-1/2 @lg:basis-1/3 — fractions subtract the gap

One

Two

Three

Alignment and text

justify-center @md:justify-between, and a heading that is text-center @md:text-left

Start Middle End

Aligned