Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jamiebuilds/tailwindcss-animate/llms.txt

Use this file to discover all available pages before exploring further.

Every utility provided by tailwindcss-animate supports Tailwind’s arbitrary value syntax. By wrapping any valid CSS value in square brackets, you can apply a one-off animation property without touching your theme configuration. This works for durations, delays, timing functions, opacity, scale, rotation, and translation — the full set of animation utilities.

​
Duration

<div class="animate-in fade-in duration-[400ms]">...</div>

​
Delay

<div class="animate-in fade-in delay-[2s]">...</div>

​
Timing function

<div class="animate-in ease-[cubic-bezier(0.4,0,0.2,1)]">...</div>

​
Fade opacity

<div class="animate-in fade-in-[0.15]">...</div>

​
Zoom scale

<div class="animate-in zoom-in-[0.85]">...</div>

​
Spin rotation

<div class="animate-in spin-in-[45deg]">...</div>

​
Slide translate

<div class="animate-in slide-in-from-top-[10vh]">...</div>
<div class="animate-out slide-out-to-left-[50%]">...</div>
Arbitrary value syntax is a core Tailwind feature. See the Tailwind CSS arbitrary values documentation for a full explanation of how it works and where it can be applied.

​
When to use arbitrary values vs. theme extension

Prefer extending your theme when a value is reused in multiple places across the project — this keeps your markup concise and ensures the value is applied consistently. Reserve arbitrary values for truly one-off cases where adding a named token to the theme would add noise without benefit.

Build docs developers (and LLMs) love

Get started for freeTalk to us