using-container-queries

Community

Responsive components via container queries.

Authordjankies
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill teaches container queries in Tailwind v4, enabling components to adapt to their parent container size rather than viewport.

Core Features & Use Cases

  • Container Context: Use @container to make elements responsive to parent width.
  • Named Containers: Leverage @container/{name} and @{breakpoint}/{name}: utilities.
  • Portable Components: Build reusable widgets that scale with their container.

Quick Start

Wrap a component in a container and apply container-based utilities (e.g., @sm or @md variants) to child elements.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: using-container-queries
Download link: https://github.com/djankies/claude-configs/archive/main.zip#using-container-queries

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.