zhaoguiyang.site/.agents/skills/tailwindcss/references/core-responsive.md

name, description

name	description
core-responsive	Building responsive designs with Tailwind's mobile-first breakpoint system and container queries

Responsive Design

Every utility class in Tailwind can be applied conditionally at different breakpoints using responsive variants.

Mobile-First Breakpoints

Tailwind uses a mobile-first approach. Unprefixed utilities apply to all screen sizes, while prefixed utilities apply at that breakpoint and above.

<!-- Center text on mobile, left align on sm screens and up -->
<div class="text-center sm:text-left">Content</div>

Default Breakpoints

Breakpoint	Minimum Width	CSS
sm	40rem (640px)	@media (width >= 40rem)
md	48rem (768px)	@media (width >= 48rem)
lg	64rem (1024px)	@media (width >= 64rem)
xl	80rem (1280px)	@media (width >= 80rem)
2xl	96rem (1536px)	@media (width >= 96rem)

Usage

Prefix any utility with a breakpoint name:

<!-- Width of 16 by default, 32 on medium screens, 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="..." />

Example: Responsive Card

<div class="mx-auto max-w-md md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="..." />
    </div>
    <div class="p-8">
      <h2 class="text-lg font-semibold">Title</h2>
      <p class="text-gray-500">Description</p>
    </div>
  </div>
</div>

Targeting Mobile Screens

Use unprefixed utilities for mobile, not sm:. Think of sm: as "at the small breakpoint", not "on small screens".

<!-- ❌ Only centers on screens 640px+, not mobile -->
<div class="sm:text-center"></div>

<!-- ✅ Centers on mobile, left aligns on 640px+ -->
<div class="text-center sm:text-left"></div>

Breakpoint Ranges

Target a specific breakpoint range by stacking responsive variants with max-* variants:

<!-- Only applies between md and xl -->
<div class="md:max-xl:flex">Content</div>

Max-Width Variants

Tailwind generates max-* variants for each breakpoint:

Variant	Media Query
max-sm	@media (width < 40rem)
max-md	@media (width < 48rem)
max-lg	@media (width < 64rem)
max-xl	@media (width < 80rem)
max-2xl	@media (width < 96rem)

Custom Breakpoints

Add custom breakpoints using --breakpoint-* theme variables:

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;
}

<div class="xs:grid-cols-2 3xl:grid-cols-6">Content</div>

Arbitrary Breakpoints

Use arbitrary values for one-off breakpoints:

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  Content
</div>

Container Queries

Style elements based on parent container size instead of viewport:

<!-- Mark container -->
<div class="@container">
  <!-- Style based on container size -->
  <div class="flex flex-col @md:flex-row">
    Content
  </div>
</div>

Container Query Variants

Variant	Minimum Width
@3xs	16rem (256px)
@xs	20rem (320px)
@sm	24rem (384px)
@md	28rem (448px)
@lg	32rem (512px)
@xl	36rem (576px)
@2xl	42rem (672px)
@3xl	48rem (768px)
... up to @7xl	80rem (1280px)

Named Containers

Name containers to target specific ones in nested structures:

<div class="@container/main">
  <div class="flex flex-row @sm/main:flex-col">
    Content
  </div>
</div>

Key Points

• Mobile-first: unprefixed = mobile, prefixed = breakpoint and up
• Use unprefixed utilities for mobile, not sm:
• Stack variants for complex responsive behavior
• Container queries enable component-based responsive design
• Customize breakpoints with theme variables