Utilities
Transitions
Transition property, duration, easing and delay.
29classes
14variant classes
4properties
Live example
<div class="flex flex-wrap gap-3">
<button class="rounded-lg bg-primary text-primary-foreground px-4 py-2 font-medium transition duration-150 ease-out hover:bg-primary/80">duration-150</button>
<button class="rounded-lg bg-primary text-primary-foreground px-4 py-2 font-medium transition duration-500 ease-in-out hover:bg-accent hover:text-accent-foreground">duration-500</button>
<button class="rounded-lg border px-4 py-2 font-medium transition-transform duration-300 hover:scale-105">hover:scale-105</button>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example motion-safe:transition. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | not generated | 0 |
| Group and peer | not generated | 0 |
| Structure | not generated | 0 |
| Motion | motion-safe:motion-reduce: | 7 |
| Scheme | not generated | 0 |
| Breakpoints | not generated | 0 |
| Containers | not generated | 0 |
| Media and direction | not generated | 0 |
Transition property 7
Variants: motion-safe:motion-reduce:
| Class | CSS |
|---|---|
transition | transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
transition-all | transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
transition-colors | transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
transition-opacity | transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
transition-shadow | transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
transition-transform | transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; |
transition-none | transition-property: none; |
Transition duration 9
Variants: none
| Class | CSS |
|---|---|
duration-0 | transition-duration: 0ms; |
duration-75 | transition-duration: 75ms; |
duration-100 | transition-duration: 100ms; |
duration-150 | transition-duration: 150ms; |
duration-200 | transition-duration: 200ms; |
duration-300 | transition-duration: 300ms; |
duration-500 | transition-duration: 500ms; |
duration-700 | transition-duration: 700ms; |
duration-1000 | transition-duration: 1000ms; |
Transition timing function 4
Variants: none
| Class | CSS |
|---|---|
ease-linear | transition-timing-function: linear; |
ease-in | transition-timing-function: cubic-bezier(0.4, 0, 1, 1); |
ease-out | transition-timing-function: cubic-bezier(0, 0, 0.2, 1); |
ease-in-out | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
Transition delay 9
Variants: none
| Class | CSS |
|---|---|
delay-0 | transition-delay: 0ms; |
delay-75 | transition-delay: 75ms; |
delay-100 | transition-delay: 100ms; |
delay-150 | transition-delay: 150ms; |
delay-200 | transition-delay: 200ms; |
delay-300 | transition-delay: 300ms; |
delay-500 | transition-delay: 500ms; |
delay-700 | transition-delay: 700ms; |
delay-1000 | transition-delay: 1000ms; |