css-container-queries

Implement component-based responsive design with CSS container queries and Tailwind CSS utilities.

5|Updated Oct 17, 2011

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

Ready to run

npx skills add https://github.com/klen/dotfiles --skill css-container-queries-klen

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers implement responsive web design by allowing components to adapt their styling based on their container's size, rather than the viewport's size, leading to more reusable and maintainable code.

Core Features & Use Cases

Component-Based Responsiveness: Style elements based on parent container dimensions.
Enhanced Reusability: Create components that work consistently across different layouts.
Tailwind CSS Integration: Provides guidance on using Tailwind's container query variants.
Use Case: Adapting a card component's layout (e.g., image position, text size) whether it's in a narrow sidebar or a wide main content area, without changing the component's code.

Quick Start

Apply the @container class to an element to make it a responsive container.

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 responsive component adapt to its parent container instead of the viewport?▼

Use CSS container queries to style elements based on their parent container's dimensions, decoupling component styling from global viewport constraints for highly reusable UI components.

How do I use container queries with Tailwind CSS?▼

Apply the @container class to a parent element to establish a responsive container, then use Tailwind CSS container query variants to adapt component styling based on that container's size.

What is the best way to build reusable UI components for different layouts?▼

Component-based responsive design with container queries allows elements to adapt to parent dimensions, ensuring a card component works consistently in a narrow sidebar or wide content area without code changes.

When should I use container queries instead of media queries for responsive design?▼

Use container queries when building self-contained, reusable UI components that must adapt to their parent element's dimensions, whereas media queries are better for global viewport-based layout adjustments.

Do I need any dependencies to use container queries for component development?▼

No external dependencies are required. This approach uses native CSS container queries alongside Tailwind CSS utility classes to enable flexible, modern front-end architectures.