Scale

May 2, 2025 ยท View on GitHub

Scale transforms can be used to zoom elements in and out.

Note

You also need to apply animate-in or animate-out classes respectively.

zoom-in-*

Class Styles

zoom-in

 
--tw-enter-scale: 0;

zoom-in-<number>

 
--tw-enter-scale: <number>%;

zoom-in-(<custom-property>)

 
--tw-enter-scale: var(<custom-property>);

zoom-in-[<value>]

 
--tw-enter-scale: <value>;

zoom-out-*

Class Styles

zoom-out

 
--tw-exit-scale: 0;

zoom-out-<number>

 
--tw-exit-scale: <number>%;

zoom-out-(<custom-property>)

 
--tw-exit-scale: var(<custom-property>);

zoom-out-[<value>]

 
--tw-exit-scale: <value>;