will-change

will-change

Sets will-change via --will-change. Hints the browser about upcoming changes. E.g. transform, opacity.

CSS Rules

.will-change {
  will-change: var(--will-change);
}

Usage

<element class="will-change" style="--will-change: /* value */;" />

Responsive

Prefix .will-change utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:will-change" style="--md-will-change: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="will-change:hover" style="--will-change-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="will-change:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before will-change::before" style="--will-change-before: /* value */;" />

<element class="content-after will-change::after" style="--will-change-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="will-change=value" />

<!-- Output -->
<element class="will-change" style="--will-change: value;" />

will-change-auto

Lets the browser decide whether to apply will-change optimizations.

CSS Rules

.will-change-auto {
  will-change: auto;
}

Usage

<element class="will-change-auto" />

Responsive

Prefix .will-change-auto utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:will-change-auto" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="will-change-auto:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="will-change-auto:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before will-change-auto::before" />

<element class="content-after will-change-auto::after" />

will-change-scroll

Hints that scroll position will change, helping the browser optimize scrolling.

CSS Rules

.will-change-scroll {
  will-change: scroll-position;
}

Usage

<element class="will-change-scroll" />

Responsive

Prefix .will-change-scroll utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:will-change-scroll" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="will-change-scroll:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="will-change-scroll:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before will-change-scroll::before" />

<element class="content-after will-change-scroll::after" />

will-change-contents

Hints that element content will change, helping the browser optimize rendering.

CSS Rules

.will-change-contents {
  will-change: contents;
}

Usage

<element class="will-change-contents" />

Responsive

Prefix .will-change-contents utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:will-change-contents" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="will-change-contents:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="will-change-contents:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before will-change-contents::before" />

<element class="content-after will-change-contents::after" />

will-change-transform

Hints that transforms will change, helping the browser optimize compositing.

CSS Rules

.will-change-transform {
  will-change: transform;
}

Usage

<element class="will-change-transform" />

Responsive

Prefix .will-change-transform utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:will-change-transform" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="will-change-transform:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="will-change-transform:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before will-change-transform::before" />

<element class="content-after will-change-transform::after" />