Text Color

Basic Usage

<div class="motion-text-in-red-500 font-bold">
  Fade from red
</div>

Fade from red

The text color animations support:

All Tailwind default colors
Any colors you've defined in your theme configuration
Arbitrary values using the square bracket syntax (e.g., motion-text-in-[#ff0000])

This feature currently does not work as expected.

<div class="motion-text-loop-purple-500 font-bold">
  Loop colors
</div>

Loop colors

<div class="motion-text-out-[#00ff00] font-bold">
  Exit animation
</div>

Exit animation

<div class="motion-text-in-red-500 motion-scale-in-0 font-bold">
  Text color and scale
</div>

Text color and scale

<div class="motion-text-in-[#ff0000] motion-duration-[2s] font-bold">
  Slow color transition
</div>

Slow color transition