Modern CSS in 2026: Container Queries, :has(), and Scroll Animations with Claude Code

tailwind (70,626 installs, 25,570 GitHub stars, skills.sh registry) is the most-installed CSS skill in the Claude Code catalog — and Tailwind v4's first-class support for CSS container queries is the reason teams are upgrading in 2026. Modern CSS has reached a capability milestone: container queries, :has(), scroll-driven animations, and cascade layers are all fully supported across Chrome, Firefox, Edge, and Safari. The Skillselion catalog tracks 3,762 build/frontend skills across 66,520 total listings and 94.6 million total installs.

What are CSS container queries and why do they replace media queries?

A media query styles based on the viewport: @media (min-width: 768px). A container query styles based on the parent container: @container (min-width: 400px). The distinction matters for component-driven architectures.

Consider a product card. With media queries, the card layout in a 300px sidebar collides with the same card in a 1200px main content area — because both are on a wide viewport. Container queries solve this by letting the card respond to its actual container width:

```css .card-wrapper { container-type: inline-size; }

@container (min-width: 400px) { .card { flex-direction: row; } } ```

In Tailwind v4, this becomes: ``html <div class="@container"> <div class="flex-col @sm:flex-row">...</div> </div> ``

The tailwind skill (70,626 installs, skills.sh) and tailwind-design-system (48,951 installs) give Claude Code the container query syntax so it generates @container wrappers rather than viewport breakpoints for component-level responsiveness. The high-end-visual-design skill (127,031 installs, skills.sh registry) extends this with advanced layout patterns.

See the Tailwind v4 design system guide for how this fits the full design system stack.

How does the CSS :has() selector change component architecture?

:has() is the long-awaited parent selector — it styles an element based on what it contains. It eliminates entire JavaScript event listener patterns:

```css / Style a form field wrapper when it contains an invalid input / .field:has(input:invalid) { border-color: var(--color-error); }

/ Style a card that contains an image differently / .card:has(img) { grid-template-rows: auto 1fr; }

/ Dark mode toggle via body :has() / body:has(#dark-toggle:checked) { background: var(--color-surface-dark); } ```

Previously, these patterns required JavaScript to add/remove classes based on child state. With :has(), CSS handles it natively. The high-end-visual-design skill (127,031 installs, skills.sh) encodes :has() patterns so Claude Code generates them idiomatically rather than defaulting to useState-driven class toggling.

How do CSS scroll-driven animations work without JavaScript?

CSS scroll-driven animations, now fully supported in 2026, let you tie animation progress to scroll position using only CSS:

```css @keyframes reveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.section { animation: reveal linear; animation-timeline: view(); animation-range: entry 0% entry 50%; } ```

This achieves the same entrance animation that previously required an IntersectionObserver + requestAnimationFrame pattern — or a full GSAP ScrollTrigger setup. For teams using Claude Code, this matters because AI agents often reach for useEffect + IntersectionObserver by default. The web-animation-design skill (skills.sh) teaches Claude Code to generate native scroll animations when appropriate.

See the web animation guide for when GSAP or Framer Motion is still the better choice over native CSS.

What are cascade layers and why should Claude Code use them?

Cascade layers (@layer) solve specificity conflicts in large codebases by letting you explicitly order style precedence:

```css @layer reset, base, components, utilities;

@layer reset { , ::before, *::after { box-sizing: border-box; } } @layer base { h1 { font-size: 2rem; } } @layer components { .button { padding: 0.5rem 1rem; } } @layer utilities { .text-center { text-align: center; } } ```

Higher-listed layers lose to lower-listed ones, regardless of selector specificity. This means @layer utilities always wins — eliminating !important hacks. Tailwind v4 uses @layer internally, and the tailwind skill (70,626 installs) teaches Claude Code to stay compatible with Tailwind's layering rather than overriding it with unlayered styles that lose specificity battles.

How does color-mix() simplify design token usage?

``css :root { --color-brand: #6366f1; --color-brand-light: color-mix(in oklch, var(--color-brand) 30%, white); --color-brand-dark: color-mix(in oklch, var(--color-brand) 70%, black); } ``

color-mix() generates tonal variants from a single base token using perceptually uniform OKLCH color space. Previously, teams needed a full palette of hand-picked shades. Now one token generates the full range at runtime. The design-md skill (49,441 installs, skills.sh registry) gives Claude Code context for token-based color-mix() usage, keeping the generated CSS consistent with the broader design token system covered in the design tokens guide.

Key takeaways

• Container queries are the 2026 standard for component-level responsiveness — fully supported in all major browsers, and first-class in Tailwind v4 via @container utilities
• The Skillselion catalog's top CSS skills: tailwind (70,626 installs), high-end-visual-design (127,031 installs), tailwind-design-system (48,951 installs) — 3,762 total build/frontend skills across 66,520 listings
• :has() parent selector eliminates JavaScript class-toggling patterns; Claude Code generates it natively with the high-end-visual-design skill
• CSS scroll-driven animations replace IntersectionObserver + GSAP ScrollTrigger for entrance animations, with zero JS
• Cascade layers (@layer) and color-mix() in OKLCH round out the modern CSS toolkit that Claude Code can generate with the right skill context

External resources: MDN Container Queries · Scroll-driven Animations spec

Common questions