css-container-queries_skill

Overview

This skill teaches how to apply CSS container queries for component-based responsive design, including Tailwind CSS patterns and fallbacks. It focuses on making components adapt to their container size rather than the viewport, improving portability and maintainability. Practical steps, common patterns, and testing guidance are included.

How this skill works

Define container contexts by setting container-type (inline-size or size) and optional container-name on a parent. Then use @container rules or Tailwind @container variants to change component styles based on the container's width or height. Tailwind provides container-prefixed utility variants so classes respond to container size instead of the viewport.

When to use it

• When building reusable UI components (cards, widgets, forms) that appear in multiple layout contexts
• When a component must adapt to its parent width rather than the overall viewport
• When creating a design system or component library for predictable, isolated behavior
• When combining global layout changes (media queries) with localized component adjustments (container queries)
• When you need components to work in sidebars, grids, and main content without multiple variants

Best practices

• Define container-type on the immediate wrapper (inline-size for width-only queries) and name containers when multiple contexts exist
• Prefer container queries for component internals and media queries for page-level layout changes
• Keep container nesting shallow; use named containers to avoid ambiguity
• Test components in narrow, medium, and wide container contexts and watch for fixed heights or overflow issues
• Use @supports(container-type: inline-size) for progressive enhancement and graceful fallbacks

Example use cases

• A card component that switches to a horizontal layout inside wide containers but remains stacked inside narrow sidebars
• A grid of items that adjusts columns based on the parent card or panel width using Tailwind @sm/@lg container variants
• A sidebar navigation that shows compact labels when its container is narrow and expanded labels when wide
• Combining media queries for overall page grid and container queries to fine-tune individual components inside each grid cell
• Named containers to apply different component breakpoints in sidebar and main content simultaneously