Tailwind CSS Responsive Design

Expert skill for implementing responsive layouts and adaptive interfaces using Tailwind CSS responsive utilities, breakpoints, and container queries.

What This Skill Does

This skill provides comprehensive guidance on building responsive user interfaces with Tailwind CSS v4, covering:

Instructions

1. Understanding Tailwind's Mobile-First Approach

When implementing responsive designs:

2. Default Breakpoints

Tailwind provides five default breakpoints (using `rem` units):

| Prefix | Min Width | CSS Media Query |

|--------|-----------|-----------------|

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

3. Basic Responsive Pattern

```html

<!-- Width adapts: 16 (mobile) → 32 (tablet) → 48 (desktop) -->

<img class="w-16 md:w-32 lg:w-48" src="..." />

<!-- Layout: stacked (mobile) → side-by-side (tablet+) -->

<div class="flex flex-col md:flex-row">

<div>...</div>

<div>...</div>

</div>

```

4. Targeting Breakpoint Ranges

Stack responsive variants with `max-*` variants to target specific ranges:

```html

<!-- Apply flex only between md and xl -->

<div class="md:max-xl:flex">...</div>

<!-- Single breakpoint (md only) -->

<div class="md:max-lg:flex">...</div>

```

Available max-width variants:

5. Custom Breakpoints

Define custom breakpoints in your CSS using `--breakpoint-*` theme variables:

```css

@import "tailwindcss";

@theme {

--breakpoint-xs: 30rem;

--breakpoint-2xl: 100rem;

--breakpoint-3xl: 120rem;

}

```

**Important:** Always use the same unit (`rem` recommended) to avoid sorting issues.

To remove default breakpoints:

```css

@theme {

--breakpoint-2xl: initial;

}

```

To replace all defaults:

```css

@theme {

--breakpoint-*: initial;

--breakpoint-tablet: 40rem;

--breakpoint-laptop: 64rem;

--breakpoint-desktop: 80rem;

}

```

6. Arbitrary Breakpoints

For one-off breakpoints, use `min` or `max` with arbitrary values:

```html

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

<!-- ... -->

</div>

```

7. Container Queries

Container queries enable component-level responsiveness based on parent size (not viewport):

**Basic usage:**

```html

<div class="@container">

<div class="flex flex-col @md:flex-row">

<!-- Responds to container width, not viewport -->

</div>

</div>

```

**Max-width container queries:**

```html

<div class="@container">

<div class="flex flex-row @max-md:flex-col">...</div>

</div>

```

**Container query ranges:**

```html

<div class="@container">

<div class="flex flex-row @sm:@max-md:flex-col">...</div>

</div>

```

**Named containers:**

For nested containers, use named variants:

```html

<div class="@container/main">

<div class="@container/sidebar">

<!-- Target specific container -->

<div class="@sm/main:flex-col @lg/sidebar:hidden">...</div>

</div>

</div>

```

8. Best Practices

When helping users implement responsive designs:

1. **Always add viewport meta tag:**

```html

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

```

2. **Design mobile-first:**

- Implement mobile layout first with unprefixed utilities

- Add breakpoint overrides progressively (`sm:`, `md:`, etc.)

3. **Use semantic breakpoints:**

- Prefer meaningful names for custom breakpoints (`tablet`, `desktop` vs. `xs`, `2xl`)

4. **Consider container queries for components:**

- Use `@container` for reusable components that need to adapt to parent size

- Reserve viewport breakpoints for page-level layouts

5. **Test across breakpoints:**

- Verify layouts at each breakpoint threshold

- Check edge cases between breakpoints

6. **Maintain consistent units:**

- Stick to `rem` for breakpoints to ensure proper sorting

Example Use Cases

Responsive Card Grid

```html

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">

<!-- Cards adapt from 1→2→3→4 columns -->

</div>

```

Responsive Navigation

```html

<nav class="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8">

<!-- Vertical mobile nav, horizontal desktop -->

</nav>

```

Container-Based Component

```html

<div class="@container">

<div class="grid @sm:grid-cols-2 @lg:grid-cols-3 gap-4">

<!-- Adapts to container size, not viewport -->

</div>

</div>

```

Important Notes

Common Pitfalls to Avoid

1. ❌ Using `sm:` for mobile-only styles

2. ❌ Mixing units in custom breakpoints (`rem` + `px`)

3. ❌ Forgetting viewport meta tag

4. ❌ Over-complicating with too many breakpoint ranges

5. ❌ Not testing actual device widths vs. browser DevTools