css-container-queries
CommunityMake components adapt to container size.
Software Engineering#css#web-development#tailwind#component-based#responsive-design#container-queries
Authorflpbalada
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Container queries enable component libraries to respond to their own size rather than the viewport, delivering true component portability and consistent design systems across layouts.
Core Features & Use Cases
- Define container contexts with container-type and container-name to scope styling.
- Apply @container queries (and Tailwind variants) to adjust typography, spacing, and layout based on container width.
- Use cases include card components, widgets, and dashboards that appear in multiple layouts (sidebar vs main content) without duplicating styles.
Quick Start
Define a wrapper with container-type (inline-size) and an optional container-name (e.g., "card"), then add an @container query for (min-width: 400px) to apply responsive styles inside the component.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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: css-container-queries Download link: https://github.com/flpbalada/my-opencode-config/archive/main.zip#css-container-queries Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.