git:20260705.8c2f9bc to git:20260729.3b91eed

5 added, 1 removed. Audit A to A.

---

name: tailwindcss-responsive

- description: "Responsive design utilities in Tailwind CSS v4: default breakpoints (sm/md/lg/xl/2xl), custom breakpoints via @theme, container queries (@container, @md, @lg), and mobile-first patterns. Use when: applying responsive variants at different screen widths, defining a custom breakpoint, or building container-query-based responsive components."

+ description: "Use when applying responsive variants at different screen widths, defining a custom breakpoint, or building container-query-based components."

user-invocable: false

---

+ <objective>

+ Documents responsive design utilities in Tailwind CSS v4: the default breakpoint scale (`sm`/`md`/`lg`/`xl`/`2xl`), defining custom breakpoints via `@theme`, container queries (`@container`, `@md`, `@lg` container-relative variants), and the mobile-first authoring pattern (base styles first, larger-breakpoint overrides layered on top).

+ </objective>

# Responsive Design

## Default Breakpoints

| Variant | Size | 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)` |

## Custom breakpoint

```css

@theme {

--breakpoint-3xl: 120rem;

}

/* Usage: 3xl:grid-cols-6 */

```

## Container Queries v4

```html

</div>

```

## Mobile-first

```html

</div>

```