css-container-queries
CSS Container Queries
A guide for implementing container-based responsive design using CSS container queries and Tailwind CSS.
What
What are Container Queries?
Container queries enable styling elements based on their container's size rather than the viewport size. Unlike media queries that respond to the browser window, container queries make components self-contained and truly reusable.
Key Concept:
/* Define a container */
.card-wrapper {
container-type: inline-size;
container-name: card;
}
/* Query the container */
More from flpbalada/my-opencode-config
progressive-disclosure
Reduce complexity by revealing information progressively. Use when designing
56social-proof-psychology
Leverage social proof principles to build trust and influence user behavior.
39react-useeffect-avoid
Guides when NOT to use useEffect and suggests better alternatives. Use when reviewing React code, troubleshooting performance, or considering useEffect for derived state or form resets.
38trust-psychology
Build trust signals that reduce perceived risk and enable user action. Use
37five-whys
Conduct root cause analysis using the Five Whys technique. Use when
34cognitive-fluency-psychology
Apply cognitive fluency principles to improve clarity, trust, and conversion.
32