ref() conditions

Calling a ref creates a condition on the ref element. card() matches inside the element that has the card ref. card("hover") matches there while that element is hovered.

Example

import { style } from "stillwind/react";

const card = style.ref("card");
export const container = style(card, "rounded-lg p-4");
export const title = style({ [card("hover")]: "text-blue-600" });

const card = undefined;
export const container = {className:"sw_vw9g3 sw_card_uryy0"};
export const title = {className:"sw_c67by"};

.sw_vw9g3 {
  padding: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
}

@media (hover: hover) {
  .sw_c67by:is(:where(.sw_card_uryy0):hover *) {
    color: var(--color-blue-600);
  }
}

Inputs

The argument is a string literal or a tagged template without interpolations. The final colon is optional.

Where to write it

Write the condition as a computed key of an object in style():

style({ [card("hover")]: "text-blue-600" });

You can also write it as a variant segment inside a utility template, followed by ::

style(`${card("hover")}:text-blue-600`);

You cannot store the condition in a variable and use it later.

Behavior

The ref element must be an ancestor of the styled element. To match a sibling or another element inside a shared ancestor, add .in().

The condition only selects elements. It does not attach the ref, so attach it with style(card) on the ancestor.

See Element relationships for a task-based example.