Opacity

May 2, 2025 ยท View on GitHub

While technically not a transform, opacity can be used to fade elements in and out.

Note

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

fade-in-*

Class Styles

fade-in

 
--tw-enter-opacity: 0;

fade-in-<number>

 
--tw-enter-opacity: calc(<number> / 100);

fade-in-(<custom-property>)

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

fade-in-[<value>]

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

fade-out-*

Class Styles

fade-out

 
--tw-exit-opacity: 0;

fade-out-<number>

 
--tw-exit-opacity: calc(<number> / 100);

fade-out-(<custom-property>)

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

fade-out-[<value>]

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