Tailwind CSS Will Change Cheatsheet

Complete guide to Tailwind's will-change utilities for optimizing animations and transitions.
Click any class to copy it to your clipboard.

Quick Reference

Class	CSS Property	Purpose
will-change-auto	will-change: auto	Use when you want to reset will-change or for elements that won't animate.
will-change-scroll	will-change: scroll-position	Scrollable containers with scroll-driven animations or parallax effects.
will-change-contents	will-change: contents	Live updating content, dynamic lists, real-time data displays.
will-change-transform	will-change: transform	Elements with hover effects, transitions, or animations using transform.

Interactive Examples

Hover over each card to see the animation. The will-change-transform class optimizes the browser's rendering for smoother transitions.

will-change-auto

will-change: auto

Default behavior

No optimization hints

Default browser behavior. No specific optimization hints are provided.

will-change-scroll

will-change: scroll-position

Scroll item 1

Scroll item 2

Scroll item 3

Scroll item 4

Scroll item 5

Scroll item 6

Hints that the element's scroll position will change. Browser can optimize scrolling performance.

will-change-contents

will-change: contents

Live Content

Updates dynamically

Hints that the element's content will change. Useful for elements with frequently updating children.

will-change-transform

will-change: transform

Hints that the element's transform property will change. Most commonly used for animations.

Detailed Breakdown

will-change-auto

This is the default value. The browser will apply standard heuristics and optimizations. Use this to reset will-change after an animation completes.

<!-- Reset will-change after animation -->
<div class="will-change-auto">
  No special optimizations
</div>

will-change-scroll

Tells the browser that the element's scroll position will be animated. Useful for scroll-driven animations, parallax effects, or virtual scrolling.

<!-- Optimized scrollable container -->
<div class="overflow-y-auto will-change-scroll h-64">
  <div class="space-y-4">
    <!-- Long scrollable content -->
  </div>
</div>

will-change-contents

Hints that the element's children will change frequently. The browser can optimize for content reflows and repaints.

<!-- Live updating content -->
<div class="will-change-contents">
  <span>{liveCounter}</span>
  <span>{realTimeData}</span>
</div>

will-change-transform

The most commonly used will-change utility. Tells the browser to prepare for transform animations, allowing it to create a separate compositing layer for smoother animations.

<!-- Smooth hover animation -->
<button class="will-change-transform transition-transform
               duration-300 hover:scale-105">
  Hover me
</button>

<!-- Animated card -->
<div class="will-change-transform transition-all duration-500
            hover:-translate-y-2 hover:shadow-xl">
  Card content
</div>

Best Practices

Use sparingly - will-change consumes system resources (memory, GPU). Only apply it to elements that actually animate.

Remove after animation - For one-time animations, remove will-change after the animation completes to free up resources.

Don't overuse - Adding will-change to too many elements can actually hurt performance by consuming too much memory.

Apply in advance - For hover effects, will-change should already be on the element before the hover (not added on hover).

Test performance - Use browser DevTools to verify that will-change actually improves performance in your specific case.

Common Patterns

Hover Card Effect

<div class="will-change-transform
     transition-all duration-300
     hover:-translate-y-1
     hover:shadow-lg">
  Card content
</div>

Button Press Effect

<button class="will-change-transform
        transition-transform
        active:scale-95">
  Click me
</button>

Rotating Element

<div class="will-change-transform
     animate-spin">
  <LoadingIcon />
</div>

Parallax Section

<section class="will-change-scroll
         overflow-y-auto">
  <!-- Parallax content -->
</section>

When NOT to Use will-change

xDon't apply to every element "just in case" - this wastes resources.

xDon't use for elements that rarely or never animate.

xDon't add it via JavaScript right before an animation - browsers need time to prepare.

xDon't use on too many elements at once - can cause browser to run out of GPU memory.

Live Demo: with vs without will-change

Hover over both boxes to compare. On complex pages or slower devices, the optimized version may feel smoother.

Without will-change

transition-all hover:scale-110

With will-change-transform

will-change-transform transition-all

About Tailwind Will Change

Tailwind's will-change utilities control the CSS will-change property, which provides performance optimization hints to the browser about what properties are expected to change.

When you tell the browser what will change ahead of time, it can set up the appropriate optimizations (like creating a new compositing layer) before the change actually happens.

For responsive will-change, use breakpoint prefixes: md:will-change-transform, lg:will-change-auto

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect will-change, transforms, transitions, and more with just one click.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →