playbooks

home / skills / fusengine / agents / tailwindcss-responsive

tailwindcss-responsive skill

/plugins/tailwindcss/skills/tailwindcss-responsive

This skill helps you implement responsive design with Tailwind CSS by outlining breakpoints and container queries for adaptive layouts.

npx playbooks add skill fusengine/agents --skill tailwindcss-responsive

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
871 B
---
name: tailwindcss-responsive
description: Responsive design, breakpoints, container queries
user-invocable: false
---

# 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 class="@container">
  <div class="@md:grid-cols-2 @lg:grid-cols-3">
    <!-- Responsive to container -->
  </div>
</div>
```

## Mobile-first
```html
<div class="text-sm md:text-base lg:text-lg">
  <!-- Small screens first -->
</div>
```

Overview

This skill helps agents design and implement responsive layouts using breakpoint utilities, container queries, and mobile-first patterns inspired by Tailwind CSS. It provides clear conventions for default breakpoints, an easy path to custom breakpoints, and examples for container-based responsiveness. Use it to convert design intent into scalable, maintenance-friendly CSS classes and patterns.

How this skill works

The skill documents default breakpoint tokens (sm, md, lg, xl, 2xl) mapped to rem and pixel values and shows the corresponding media query behavior. It explains how to declare custom breakpoints in theme variables and how to apply container queries so elements respond to their container size rather than the viewport. It also demonstrates mobile-first class composition where base styles are defined first and augmented at larger breakpoints.

When to use it

  • Building responsive UIs that scale across common screen sizes (mobile to large desktop).
  • Implementing container-aware components that adapt to parent size rather than viewport.
  • Converting designs into utility-class patterns for consistent breakpoints.
  • Adding a custom large breakpoint beyond defaults for very wide layouts.
  • Creating predictable typography scaling using mobile-first classes.

Best practices

  • Favor mobile-first classes: define base styles, then layer md:, lg: modifiers for larger sizes.
  • Use the documented breakpoint tokens to keep consistency across the app.
  • Prefer container queries for component-level responsiveness to improve modularity.
  • Declare custom breakpoints in theme variables and reference them with a clear naming convention.
  • Test layouts across breakpoint ranges and inside containers to validate behavior.

Example use cases

  • A dashboard grid that adds columns at md and lg breakpoints: md:grid-cols-2 lg:grid-cols-3.
  • A hero section with text sizes that scale: text-sm md:text-base lg:text-lg for readable typography.
  • A reusable card component that adapts using @container and @md:@lg grid utilities for side-by-side layouts.
  • Adding 3xl support by defining --breakpoint-3xl in the theme for ultra-wide monitors.
  • Switching a single-column layout on mobile to a multi-column layout on larger breakpoints.

FAQ

How do container queries differ from media queries?

Container queries respond to their parent container size, enabling components to adapt where they are placed, while media queries respond only to the viewport size.

Can I add custom breakpoint names?

Yes. Define custom values in theme variables (for example --breakpoint-3xl: 120rem) and reference them with the corresponding class token.