Blur

August 16, 2025 ยท View on GitHub

While technically not a transform, blur can be used to unblur elements when they appear or blur them when they disappear.

Note

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

blur-in-*

Class Styles

blur-in

 
--tw-enter-blur: 20px;

blur-in-<number>

 
--tw-enter-blur: calc(<number> * 1px);

blur-in-(<custom-property>)

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

blur-in-[<value>]

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

blur-out-*

Class Styles

blur-out

 
--tw-exit-blur: 20px;

blur-out-<number>

 
--tw-exit-blur: calc(<number> * 1px);

blur-out-(<custom-property>)

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

blur-out-[<value>]

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