Responsive Design

The New CSS uses a mobile-first breakpoint system. Prefix any supported utility with sm:, md:, or lg: to apply it at that breakpoint and above.

Breakpoints

Prefix	Min-width	Targets
`sm:`	640px	Large phones / small tablets
`md:`	768px	Tablets / small laptops
`lg:`	1024px	Desktops

Unprefixed utilities apply at all screen sizes. Prefixed utilities apply at that breakpoint and wider (mobile-first).

Available Classes by Breakpoint

sm: (640px+)

Class	Property
`sm:block`	display: block
`sm:hidden`	display: none
`sm:flex`	display: flex
`sm:grid`	display: grid
`sm:flex-row`	flex-direction: row
`sm:grid-cols-2`	grid-template-columns: repeat(2, 1fr)
`sm:gap-6`	gap: 1.5rem
`sm:px-6`	padding-inline: 1.5rem
`sm:text-lg`	font-size: 1.125rem
`sm:text-left`	text-align: left

md: (768px+)

Class	Property
`md:block`	display: block
`md:hidden`	display: none
`md:flex`	display: flex
`md:grid`	display: grid
`md:flex-row`	flex-direction: row
`md:items-center`	align-items: center
`md:justify-between`	justify-content: space-between
`md:grid-cols-2`	grid-template-columns: repeat(2, 1fr)
`md:grid-cols-3`	grid-template-columns: repeat(3, 1fr)
`md:gap-6`	gap: 1.5rem
`md:gap-8`	gap: 2rem
`md:p-6`	padding: 1.5rem
`md:px-6`	padding-inline: 1.5rem
`md:px-8`	padding-inline: 2rem
`md:py-12`	padding-block: 3rem
`md:py-16`	padding-block: 4rem
`md:text-lg` ... `md:text-4xl`	font-size (lg through 4xl)
`md:w-1/2`	width: 50%
`md:max-w-2xl`	max-width: 42rem
`md:mt-0`	margin-block-start: 0
`md:sticky`	position: sticky
`md:text-left`	text-align: left
`md:col-span-2`	grid-column: span 2

lg: (1024px+)

Class	Property
`lg:block`	display: block
`lg:hidden`	display: none
`lg:flex`	display: flex
`lg:grid`	display: grid
`lg:flex-row`	flex-direction: row
`lg:grid-cols-3`	grid-template-columns: repeat(3, 1fr)
`lg:grid-cols-4`	grid-template-columns: repeat(4, 1fr)
`lg:gap-8`	gap: 2rem
`lg:gap-12`	gap: 3rem
`lg:px-8`	padding-inline: 2rem
`lg:py-16`, `lg:py-20`, `lg:py-24`	padding-block (4rem / 5rem / 6rem)
`lg:text-xl`	font-size: 1.25rem
`lg:text-4xl`	font-size: 2.25rem
`lg:max-w-4xl`	max-width: 56rem

How It Works

Responsive classes use CSS @media (min-width) queries inside @layer variants. Write your base (mobile) styles first, then layer on wider-screen overrides:

<!-- Stack on mobile, side-by-side on tablets, 3-column on desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
  <div class="p-4 md:p-6 bg-gray-50 rounded-lg">Card 1</div>
  <div class="p-4 md:p-6 bg-gray-50 rounded-lg">Card 2</div>
  <div class="p-4 md:p-6 bg-gray-50 rounded-lg">Card 3</div>
</div>

Examples

Responsive Card Grid

This grid is 1 column on mobile, 2 on tablets, and 3 on desktop. Resize the browser to see it change.

Card One

Visible at all breakpoints.

Card Two

Sits beside Card One at md and up.

Card Three

Third column appears at lg.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
  <div class="p-4 md:p-6 bg-gray-50 rounded-lg border border-gray-200">
    <p class="font-semibold mb-1">Card One</p>
    <p class="text-sm text-gray-600">Visible at all breakpoints.</p>
  </div>
  <div class="p-4 md:p-6 bg-gray-50 rounded-lg border border-gray-200">
    <p class="font-semibold mb-1">Card Two</p>
    <p class="text-sm text-gray-600">Sits beside Card One at md and up.</p>
  </div>
  <div class="p-4 md:p-6 bg-gray-50 rounded-lg border border-gray-200">
    <p class="font-semibold mb-1">Card Three</p>
    <p class="text-sm text-gray-600">Third column appears at lg.</p>
  </div>
</div>

Show / Hide Elements

Use hidden and md:flex to show elements only on larger screens.

Always visibleVisible at md+Visible at lg+

<div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
  <span>Always visible</span>
  <span class="hidden md:block text-blue-600">Visible at md+</span>
  <span class="hidden lg:block text-green-600">Visible at lg+</span>
</div>