Utilities

Interactions

Generated from the registry, so this page can't drift from the compiler.

Variants apply any utility conditionally. Write them before the utility, separated by colons, and stack as many as you need. See Variants for how they compose and order.

group-hover:

Applies when an ancestor with the class "group" is hovered.

expression

group-hover:bg(brand)

Generated CSS

.group:hover .group-hover\:bg\(brand\) {
  background-color: var(--croff-color-brand);
}

Put the plain class group on the ancestor. It generates no CSS of its own.

hover:

Applies when the element is hovered.

expression

hover:bg(brand)

Generated CSS

.hover\:bg\(brand\):hover {
  background-color: var(--croff-color-brand);
}

focus-within:

Applies when the element or a descendant has focus.

expression

focus-within:bg(brand)

Generated CSS

.focus-within\:bg\(brand\):focus-within {
  background-color: var(--croff-color-brand);
}

focus:

Applies when the element has focus.

expression

focus:bg(brand)

Generated CSS

.focus\:bg\(brand\):focus {
  background-color: var(--croff-color-brand);
}

focus-visible:

Applies when the element has keyboard-visible focus.

expression

focus-visible:bg(brand)

Generated CSS

.focus-visible\:bg\(brand\):focus-visible {
  background-color: var(--croff-color-brand);
}

active:

Applies while the element is pressed.

expression

active:bg(brand)

Generated CSS

.active\:bg\(brand\):active {
  background-color: var(--croff-color-brand);
}

disabled:

Applies when a form control is disabled.

expression

disabled:bg(brand)

Generated CSS

.disabled\:bg\(brand\):disabled {
  background-color: var(--croff-color-brand);
}

Breakpoints

One responsive variant exists for each token in your theme's breakpoints scale.

Variant	Applies at
`sm:`	@media (min-width: 640px)
`md:`	@media (min-width: 768px)
`lg:`	@media (min-width: 1024px)
`xl:`	@media (min-width: 1280px)
`2xl:`	@media (min-width: 1536px)