Press
/
to search

Pseudo-Class Variants

Using utilities to add CSS pseudo-class to style an element:

Responsive

Add the one of these prefixes (xs), (sm), (md), (lg), (1k), (2k), (4k), (8k) to a utility to enable responsive response to different screen sizes.

<!-- Example -->
<div class="(xs)text-lg (2k)text-xl-4">
  ...
</div>
HTML

Hover

Add the (hover) prefix to a utility to enable on-hover.

<!-- Example -->
<div class="text-shade-granite-1 (hover)text-white bg-white (hover)bg-tint-granite-5">
  ...
</div>
HTML

Focus

Add the (focus) prefix to a utility to enable on-focus.

<!-- Example -->
<input class="bg-tint-granite-2 (focus)bg-tint-granite-5 border-transparent (focus)border-tint-graniet-5" placeholder="Focus me!">
HTML

Focus-Within

Add the (focus-within) prefix to a utility to enable on-focused for child element.

<!-- Example -->
<div class="(focus-within)text-shade-laval-1 (focus-within)bg-tint-laval-5">
  Title: <input placeholder="Focus me!">
</div>
HTML

Focus-Visible

Add the (focus-visible) prefix to a utility to enable on-focused for child element.

<!-- Example -->
<div class="bg-tint-granite-5 (focus-visible)bg-tint-granite-2">
  ...
</div>
HTML

Active

Add the (active) prefix to a utility to enable on-active.

<!-- Example -->
<button class="bg-tint-granite-5 (active)bg-tint-granite-2 text-white">
  ...
</button>
HTML

Visited

Add the (visited) prefix to a utility to enable on-visited.

<!-- Example -->
<a class="text-shade-granite-1 (visited)text-shade-lava-1 (visited)text-underline"
 href="...">
  ...
</a>
HTML

Checked

Add the (checked) prefix to a utility to enable on-checked.

<!-- Example -->
<button class="(checked)text-white (checked)bg-tint-granite-5 (checked)text-underline">
  ...
</button>
HTML

Disabled

Add the (disabled) prefix to a utility to enable on-disabled.

<!-- Example -->
<button class="(disabled)text-shade-granite-1 (disabled)bg-tint-granite-5">
  ...
</button>
HTML

Group

Group-Hover

Add (group) class to the parent element and add the (group-hover) prefix to a utility on the child element to enable group-hover.

<!-- Example -->
<div class="(group) bg-tint-granite-5 (hover)bg-tint-granite-1">
  <div class="(group-hover)text-white">
    ...
  </div>
</div>
HTML

Group-Focus

Add (group) class to the parent element and add the (group-focus) prefix to a utility on the child element to enable group-focus.

<!-- Example -->
<div class="(group) bg-tint-granite-5 (focus)bg-tint-granite-1">
  <div class="(group-focus)text-white">
    ...
  </div>
</div>
HTML

Selection-Hover

Add (selection-hover) prefix to filter utilities with set up parent and child elements. Deselected elements are affected by the filter configurations.

<!-- Example -->
<!-- parent -->
<div class="(selection-hover)filter saturate-0 blur-10 ... smooth-200">
  <!-- child -->
  <div>
    <div>
      ...
    </div>
  </div>
  <!-- child -->
  <div>
    <div>
      ...
    </div>
  </div>
</div>
HTML

Default selected Filters utilities for (selection-hover) variant.

Expand

Add (expand) prefix to a utility in a parent element, the utility will take effect to all child elements.

<!-- Example -->
<!-- parent -->
<div class="(expand)margin-2 (expand)padding-4">
  <!-- child -->
  <div>...</div>
  <div>...</div>
  ...
</div>
HTML

Default selected few utilities for (expand) variant.

First-last

Add (first) or (last) prefix to a utility in a parent element, the utility will take effect to first child or last child elements.

<!-- Example -->
<!-- parent -->
<div class="(first)text-xl-2 (last)text-xs">
  <!-- child -->
  <div>...</div>
  <div>...</div>
  ...
</div>
HTML

Theme

Dark Mode

Add the (dark) prefix to a utility when dark theme settings enabled.

<!-- Example -->
<div class="text-shade-granite-1 (dark)text-tint-graite-5">
  ...
</div>
HTML

Light Mode

Add the (light) prefix to a utility when light theme settings enabled.

<!-- Example -->
<div class="text-shade-granite-1 (light)text-shade-granite-5">
  ...
</div>
HTML
Note: Default enabled utilities ( Background Color , Border Color , Gradient , Filter Invert , Placeholder Color , Shadow Color , Text Color ).

Reduce-Motion

Add the (reduce-motion) prefix to a utility reduce animation motion for readers with vestibular motion disorders.

<!-- Example -->
<div class="(reduce-motion)transition duration-300 ease-in-out border-4 border-tint-granite-5 (hover)border-tint-granite-1 (hover)shadow-lg ... width-32 height-24">
  ...
</div>
HTML

Orientation

Portrait

Add the (portrait) prefix to a utility when portrait settings enabled.

<!-- Example -->
<div class="flex (portrait)flex-column">
  ...
</div>
HTML

Landscape

Add the (landscape) prefix to a utility when landscape settings enabled.

<!-- Example -->
<div class="flex (landscape)flex-column">
  ...
</div>
HTML
Note: Default enabled utilities ( Flex Direction ).