Core Concepts

Pseudo-Class Variants

Using utilities to style and add effects to elements when on:

• hover, group-hover
• focus, group-focus, focus-visible, focus-within
• active
• visited
• checked
• disable
• dark-mode, light-mode
• portrait, landscape
• reduce-motion

Hover

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

<!-- Example -->
<y class="text-charcoal-100 (hover)text-white bg-white (hover)bg-charcoal-100">
  ...
</y>

Focus

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

<!-- Example -->
<input class="bg-gray-100 (focus)bg-charcoal-100 border-transparent (focus)border-gray-200"
       placeholder="Focus me!">

Focus-Within

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

<!-- Example -->
<y class="(focus-within)text-red-600 (focus-within)bg-red-300">
  Title:
  <input placeholder="Focus me!">
</y>

Focus-Visible

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

<!-- Example -->
<y class="bg-gray-400 (focus-visible)bg-gray-600">
  ...
</y>

Active

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

<!-- Example -->
<button class="bg-charcoal-100 (active)bg-red-400 text-white">
  ...
</button>

Visited

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

<!-- Example -->
<a class="text-gray-500 (visited)text-purple-500 (visited)underline"
   href="...">
  ...
</a>

Checked

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

<!-- Example -->
<button class="(checked)text-white (checked)bg-red-400 (checked)underline">
  ...
</button>

Disabled

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

<!-- Example -->
<button class="(disabled)text-gray-600 (disabled)bg-gray-400">
  ...
</button>

Group

Group-Hover

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

<!-- Example -->
<y class="(group) bg-charcoal-100 (hover)bg-orange-400">
  <y class="(group-hover)text-white">
    ...
  </y>
</y>

Group-Focus

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

<!-- Example -->
<y class="(group) bg-charcoal-100 (focus)bg-orange-400">
  <y class="(group-focus)text-white">
    ...
  </y>
</y>

Theme

Dark Mode v1.1.0

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

<!-- Example -->
<y class="text-charcoal-100 (dark)text-gray-100">
  ...
</y>

Light Mode v1.1.5

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

<!-- Example -->
<y class="text-charcoal-100 (light)text-gray-100">
  ...
</y>

Orientation

Portrait v1.1.5

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

<!-- Example -->
<y class="flex (portrait)flex-col">
  ...
</y>

Landscape v1.1.5

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

<!-- Example -->
<y class="flex (landscape)flex-col">
  ...
</y>

Create Custom Variants

Read Plugin API. Covering how to create:

• Create basic utility
• Create responsive utility
• Create responsive utility with variants
• Create utility with negative values