css-container-queries

Implement container-based responsiveness with CSS container queries.

280|36|Updated Jan 24, 2026

Search Tags:#css #web-development #tailwind #component-based #responsive-design #container-queries

Ready to run

npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queries

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: css-container-queries
Source: https://github.com/flpbalada/my-opencode-config/tree/main/skills/css-container-queries
Command: npx skills add https://github.com/flpbalada/my-opencode-config --skill css-container-queries

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about css-container-queries

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I make a component responsive to its container size instead of the viewport?▼

To make a component responsive to its container size, define a wrapper with container-type (like inline-size) and an optional container-name, then write @container rules to style internal elements based on that container's width.

Can I use CSS container queries with Tailwind CSS?▼

Yes, you can use CSS container queries with Tailwind CSS by applying Tailwind container variants to adjust typography, spacing, and layout based on the defined container width.

What is the best way to build portable card components for different layouts?▼

The best way to build portable card components for different layouts is using container queries, allowing components to adapt to their container size and ensuring consistent design systems without duplicating styles.

How do I set up a container context for component-based responsive design?▼

To set up a container context for component-based responsive design, apply container-type to scope styling on the wrapper, optionally add container-name, and use @container queries for conditions like min-width.

When should I use container queries instead of media queries for web development?▼

Use container queries instead of media queries when developing component libraries or design systems where widgets and dashboards appear in multiple layouts and must adapt to their container size rather than the viewport.