Tailwind Variants

Custom Tailwind variants registered by mantle via @custom-variant in mantle.css.

Theme

Variant	Description
`.light:`	Apply a class when the light theme is active.
`.dark:`	Apply a class when the dark theme is active. Overrides Tailwind's built-in `dark:` to use class-based detection instead of `prefers-color-scheme`.

Hover media queries

	Variant	Description
	`.hover-hover:`	Apply a class if hover is supported. Unlike Tailwind's `hover:`, this applies unconditionally without requiring an actual hover interaction.
	`.hover-none:`	Apply a class if hover is unsupported.

Aria

Variant	Description
`.aria-collapsed:`	Match elements with `aria-expanded="false"`.
`.aria-invalid:`	Match elements with `aria-invalid="true"`.
`.aria-unchecked:`	Match elements with `aria-checked="false"`.

Data attribute: state

Variant	Description
`.data-state-active:`	Match elements with `data-state~=active`.
`.data-state-checked:`	Match elements with `data-state~=checked`.
`.data-state-closed:`	Match elements with `data-state~=closed`.
`.data-state-idle:`	Match elements with `data-state~=idle`.
`.data-state-inactive:`	Match elements with `data-state~=inactive`.
`.data-state-indeterminate:`	Match elements with `data-state~=indeterminate`.
`.data-state-open:`	Match elements with `data-state~=open`.
`.data-state-pending:`	Match elements with `data-state~=pending`.
`.data-state-selected:`	Match elements with `data-state~=selected`.
`.data-state-submitting:`	Match elements with `data-state~=submitting`.
`.data-state-unchecked:`	Match elements with `data-state~=unchecked`.

Data attribute: orientation & side

Variant	Description
`.data-orientation-horizontal:`	Match elements with `data-orientation="horizontal"`.
`.data-orientation-vertical:`	Match elements with `data-orientation="vertical"`.
`.data-side-bottom:`	Match elements with `data-side="bottom"`.
`.data-side-left:`	Match elements with `data-side="left"`.
`.data-side-right:`	Match elements with `data-side="right"`.
`.data-side-top:`	Match elements with `data-side="top"`.

Data attribute: validation

Variant	Description
`.data-validation-error:`	Match elements with `data-validation="error"`.
`.data-validation-success:`	Match elements with `data-validation="success"`.
`.data-validation-warning:`	Match elements with `data-validation="warning"`.

Data attribute: other

Variant	Description
`.data-active-item:`	Match elements with `data-active-item~="true"`.
`.data-disabled:`	Match elements with the `data-disabled` attribute.
`.data-drag-over:`	Match elements with `data-drag-over="true"`.
`.data-highlighted:`	Match elements with the `data-highlighted` attribute.

Utility

Variant	Description
`.where:`	Wraps the selector in `:where()` to zero out specificity.

Live detection

The pills below show which variants are currently active in your browser:

pointer-coarse:
pointer-fine:
pointer-none:
hover-hover:
hover-none: