skills.rest
klen
klenCOMMUNITY
Explore all skills by this author →
Website𝕏@hornedsGitHub

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
One-click install
npx skills add https://github.com/klen/dotfiles --skill css-container-queries-klen
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
jg-chalk-iojg-chalk-io

moai-lang-tailwind-css

Apply Tailwind CSS utility classes with design tokens and responsive breakpoints.

Community
Advanced
coastdigitalgroupcoastdigitalgroup
2

container-queries-implementation

Implement container-aware UI components using @container queries and container-relative units.

Official
Intermediate
tenequmtenequm
32

shadcn-tailwind

Build UIs with Tailwind CSS v4 and shadcn/ui using CSS-first configuration.

Community
Intermediate
yonatangrossyonatangross
217

responsive-patterns

Create responsive React components using container queries and fluid typography.

Community
Intermediate