Tailwind CSS will-change Property

The will-change utility class in Tailwind CSS is used to apply the will-change property to an element. The will-change property is used to inform the browser of potentially expensive changes that are about to happen to an element. This improves performance and reduces jank when certain animations are applied.

Syntax

The will-change utility class follows the format:

.will-change-{property}

Where {property} is the CSS property that is going to change (e.g. transform, opacity, scroll-position).

Example

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

Output

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

Explanation

In the example above, we have applied the will-change utility class with the transform property. This will inform the browser that the transform property on this element is about to be changed, allowing the browser to prepare for the change and optimize performance.

Use

Use the will-change utility class when applying CSS transitions or animations that involve expensive layout calculations. This improves performance and reduces jank during animation.

Important Points

• The will-change property should only be used on elements being animated, and only with the property being animated.
• Avoid adding will-change to too many elements or properties, as this can harm performance.
• Make sure to remove will-change as soon as the animated element is no longer needed, as leaving it on can harm performance.

Summary

The will-change utility class in Tailwind CSS is used to inform the browser of upcoming changes to an element, improving performance and reducing jank when animations are applied. It should only be used on elements that are being animated, and only with the property being animated. Avoid using it on too many elements or properties, and make sure to remove it when no longer needed.