Press/to search

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>
Note: Default enabled utilities ( Background Color , Border Color , Gradient , Filter Invert , Placeholder Color , Shadow Color , Text Color ).

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>
Note: Default enabled utilities ( Flex Direction ).

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