baseUtilities
Effects
Shadow elevations, element opacity, scale transforms, and CSS transitions.
Effect utilities configure elevation, element opacity, scale transforms, and transitions.
Box shadow
| Class | Token |
|---|---|
shadow-none | none |
shadow-xs | var(--shadow-xs) |
shadow-sm | var(--shadow-sm) |
shadow-md | var(--shadow-md) |
shadow-lg | var(--shadow-lg) |
shadow-xl | var(--shadow-xl) |
Opacity
Sets element-level opacity (fading all children):
| Class | Value |
|---|---|
opacity-0 | 0 |
opacity-25 | 0.25 |
opacity-50 | 0.5 |
opacity-75 | 0.75 |
opacity-100 | 1 |
Supports hover: prefixes (e.g. hover:opacity-75). To fade only colors without children, see Color opacity.
Scale
| Class | Value |
|---|---|
scale-0 | scale(0) |
scale-50, scale-75, scale-90, scale-95 | scale(0.5 ... 0.95) |
scale-100 | scale(1) |
scale-105, scale-110, scale-125, scale-150 | scale(1.05 ... 1.5) |
All scale utilities support hover:scale-*.
Transitions
Transitions map to system tokens (--default-transition-*):
| Class | Property |
|---|---|
transition | Default property set |
transition-all | all |
transition-opacity | opacity |
transition-transform | transform |
<img class="rounded-md transition hover:scale-102 hover:opacity-75" src="/thumb.jpg" alt="" />When prefers-reduced-motion: reduce is active, transition duration defaults to 0ms.