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

.example {
  @extend
    .\(xs\)text-lg,
    .\(2k\)text-xl-4;
}

SCSS

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

.example {
  @extend
    .text-shade-granite-1,
    .\(hover\)text-white,
    .bg-white,
    .\(hover\)bg-tint-granite-5;
}

SCSS

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-granite-5" placeholder="Focus me!">

HTML

.example {
  @extend
    .bg-tint-granite-2,
    .\(focus\)bg-tint-granite-5,
    .border-transparent,
    .\(focus\)border-tint-granite-5;
}

SCSS

Focus-Within

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

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

HTML

.example {
  @extend
    .\(focus-within\)text-shade-lava-1,
    .\(focus-within\)bg-tint-lava-5;
}

SCSS

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

.example {
  @extend
    .bg-tint-granite-5,
    .\(focus-visible\)bg-tint-granite-2;
}

SCSS

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

.example {
  @extend
    .bg-tint-granite-5,
    .\(active\)bg-tint-granite-2,
    .text-white;
}

SCSS

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

.example {
  @extend
    .text-shade-granite-1,
    .\(visited\)text-shade-lava-1,
    .\(visited\)text-underline;
}

SCSS

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

.example {
  @extend
    .\(checked\)text-white,
    .\(checked\)bg-tint-granite-5,
    .\(checked\)text-underline;
}

SCSS

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

.example {
  @extend
    .\(disabled\)text-shade-granite-1,
    .\(disabled\)bg-tint-granite-5;
}

SCSS

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

.example {
  @extend
    .\(group\),
    .bg-tint-granite-5,
    .\(hover\)bg-tint-granite-1;
}

SCSS

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

.example {
  @extend
    .\(group\),
    .bg-tint-granite-5.
    .\(focus\)bg-tint-granite-1;
}

SCSS

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

.example {
  @extend
    .\(selection-hover\)filter,
    .saturate-0,
    .blur-10,
    .smooth-200;
}

SCSS

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

.example {
  @extend
    .\(expand\)margin-2,
    .\(expand\)padding-4;
}

SCSS

Default selected few utilities for (expand) variant.

Borders: Border Radius
Effects: Box Shadow
Layout: Overflow
Sizing: Height, Width
Spacing: Margin, Padding

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

.example {
  @extend
    .\(first\)text-xl-2,
    .\(last\)text-xs;
}

SCSS

First Letter

Add (first-letter) prefix to a utility in a parent element, the utility will take effect on the child element containing text and apply the effect to the first letter of the text.

<!-- Example -->
<!-- parent -->
<div class="(first-letter)text-xl-2 (first-letter)text-tint-lava-2 (first-letter)font-semibold">
  <!-- child -->
  <div>...</div>
  <div>...</div>
  ...
</div>

HTML

.example {
  @extend
    .\(first-letter\)text-xl-2,
    .\(first-letter\)text-tint-lava-2,
    .\(first-letter\)font-semibold;
}

SCSS

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-granite-5">
  ...
</div>

HTML

.example {
  @extend
    .text-shade-granite-1,
    .\(dark\)text-tint-granite-5;
}

SCSS

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

.example {
  @extend
    .text-shade-granite-1,
    .\(light\)text-shade-granite-5;
}

SCSS

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

.example {
  @extend
    .\(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;
}

SCSS

Orientation

Portrait

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

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

HTML

.example {
  @extend
    .flex,
    .\(portrait\)flex-column;
}

SCSS

Landscape

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

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

HTML

.example {
  @extend
    .flex,
    .\(landscape\)flex-column;
}

SCSS

Note: Default enabled utilities ( Flex Direction ).