Border Spin
Animate gradient borders with a continuous rotation effect. Add border-spin to any element with a border gradient to spin it. Uses @property to make the gradient angle animatable via CSS @keyframes.
Import
Included in @import 'tw-jib-css'. To import individually:
@import 'tw-jib-css/border-gradient';Note: border-spin is part of the border-gradient module.
Quick Reference
| Class | Styles |
|---|---|
| border-spin | animation: border-spin var(--tw-border-spin-duration) linear infinite |
| border-spin-duration-<number> | --tw-border-spin-duration: <number> * 1000ms |
| border-spin-duration-[<value>] | --tw-border-spin-duration: <value> |
Basic Usage
Add border-spin to rotate the gradient continuously. The default duration is 1s.
Spin Duration
Use border-spin-duration-{n} where n is in seconds (multiplied by 1000ms):
Using a custom value
Use bracket notation for custom durations:
Using a custom variable
Reference CSS custom properties with the typed bare-value syntax (type:--var):
| Utility | Type hint | Example |
|---|---|---|
border-spin-duration-* | time | border-spin-duration-(time:--spin-speed) |
How It Works
The animated spin uses @property to register --tw-border-gradient-angle as an <angle>, making it animatable. A CSS @keyframes animation rotates the angle from 0deg to 360deg, creating the continuous spin effect. The duration is controlled by the --tw-border-spin-duration custom property (default 1s).