ref.at() | Stillwind

card.at(query?) creates a container query on the container that the card ref names. Make that element a container with card.asContainer().

Example

Source

import { style } from "stillwind/react";

const card = style.ref("card");
export const container = style(card, card.asContainer("inline-size"));
export const child = style({ [card.at("width >= 40rem")]: "grid-cols-2" });

Compiled code

const card = undefined;
export const container = {className:"sw_28iqw sw_card_uryy0"};
export const child = {className:"sw_cunr1"};

Generated CSS

.sw_28iqw:where(.sw_card_uryy0) {
  container-name: sw-c-card-uryy0;
  container-type: inline-size;
}

@container sw-c-card-uryy0 (width >= 40rem) {
  .sw_cunr1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

Inputs

Form	Generated condition
`card.at("width >= 40rem")`	`@container <name> (width >= 40rem)`
card.at`width >= 40rem`	The same as the string form
`card.at()` or `card.at("")`	`@container <name>`

Write the query as a string literal or a tagged template without interpolations. Leave out the outer parentheses.

Behavior

Without a query, the condition matches whenever the styled element is inside a container with the name.

Write the call directly as a computed key in style(). You cannot store it in a variable and use it later.

See Element relationships for a task-based example.