> Modifiers

Modifiers

Class modifiers represent a condition for which to apply the class name. There are two types: state modifiers and media modifiers.

Contents

Syntax

Modifiers are specified before the class name with `:` used as a separator.

<media-modifier>:<class>

<state-modifier>:<class>

Multiple modifiers can be stacked, but only according to this notation:

<media-modifier>:<state-modifier>:<class>

<div
class="border-1px p-1 chroma-bg-2 hover:f-size-lg hover:hue-a sm:hover:hue-b md:hover:hue-c lg:hover:hue-d"
>
Hover and resize the window
</div>

Preview
Hover and resize the window

These modifiers correspond to following pseudo classes or attributes:

Prefix

Selector

hover:

<class>:hover

active:

<class>:active

focus:

<class>:focus

open:

<class>[open]

dark:

.dark <class>

light:

.light <class>

Currently, they are only available for utility classes.

These modifiers use @media at-rules to apply the class for a corresponding media feature.

They are available for all utility classes and all component classes, excluding component variation classes, at the moment.

Prefix

Feature

min-width: 640px

min-width: 768px

min-width: 1024px

min-width: 1280px

2xl

min-width: 1536px