css-container-queries

What problem does it solve?

This Skill helps developers create truly reusable UI components that adapt their styling based on their parent container's size, not just the viewport, leading to more robust and portable designs.

Core Features & Use Cases

• Component-Based Responsiveness: Apply styles based on container width using CSS Container Queries.
• Tailwind Integration: Seamlessly use container query variants within Tailwind CSS for rapid development.
• Use Case: Refactor a card component that looks good on a wide page layout to also display correctly when placed inside a narrow sidebar, without needing separate CSS rules for each context.

Quick Start

Apply the @container class to a parent element and use Tailwind's container query variants like @lg: on child elements to make them responsive to the parent's size.