skills.rest
davidsteinberger
davidsteinbergerCOMMUNITY
Explore all skills by this author →
GitHub

css-container-queries

Apply CSS container queries with Tailwind CSS variants for component-based responsive design.

Updated Nov 28, 2025
Search Tags:#frontend#responsive design#css#tailwind css#component development#container queries
One-click install
npx skills add https://github.com/davidsteinberger/dotfiles --skill css-container-queries-davidsteinberger
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: css-container-queries
Source: https://github.com/davidsteinberger/dotfiles/tree/main/opencode/.config/opencode/skills/css-container-queries
Command: npx skills add https://github.com/davidsteinberger/dotfiles --skill css-container-queries-davidsteinberger

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

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

Apply Tailwind CSS container query variants like @lg: to child elements and the @container class to a parent. This enables component-based responsive design, adapting styles to container size rather than viewport size for truly reusable UI components.

What is the difference between container queries and media queries for responsive design?▼

Container queries enable component-based responsiveness by adapting styles to parent container size, whereas media queries rely on viewport size. This allows a component to display correctly in both wide page layouts and narrow sidebars without separate CSS rules.

Can I use container queries with Tailwind CSS?▼

Yes, you can use container queries with Tailwind CSS by applying the @container class to a parent element and using Tailwind's container query variants like @lg: on child elements to adapt component styling based on parent container size.

How do I refactor a card component to work in both a wide page layout and a narrow sidebar?▼

Refactor the card component using CSS container queries to apply styles based on the parent container's width. By using the @container class and query variants, the component adapts its layout dynamically without needing separate CSS rules for each context.

Do I need to understand the @container syntax to use container queries in Tailwind CSS?▼

Yes, understanding the @container syntax and Tailwind's container query variants is required for effective component styling. This knowledge facilitates applying CSS container queries for component-based responsive design in modern web architectures.

Related Skills

Explore More Software Engineering Skills→
VKirillVKirill
15

tailwind

Configure Tailwind CSS 4 with CSS-first tokens and modern variants.

Community
Advanced
FAeN399FAeN399

css-layout-builder

Create responsive CSS layouts using Grid, Flexbox, and container queries.

Community
Advanced
csim-sgcsim-sg

daisy-ui

Build UI components with DaisyUI v5 and Tailwind CSS 4.

Community
Intermediate
flpbaladaflpbalada
280

css-container-queries

Implement container-based responsiveness with CSS container queries.

Community
Intermediate