Tools
@property Builder
A custom property is a string until you tell the browser its type. Give it one and it can be animated: gradient angles sweep, colours fade, numbers count. Hover or focus the two tiles to compare.
Newly availablesince Jul 2024
Same CSS on both tiles. Only the right one has its property registered, so only the right one can interpolate. The left one jumps to its new value.
Three descriptors, all required
syntax is the type: '<angle>', '<color>',
'<length>', '<number>', '<percentage>', or
'*' for anything. inherits says whether children receive it. initial-value
is what it is when nobody sets it, and it is mandatory for every syntax except '*'. Leave one out
and the whole rule is ignored without an error.
What it buys you besides animation
A typed property rejects nonsense. Set --angle: blue on a registered angle and the browser falls
back to the initial value instead of breaking the gradient that uses it. And inherits: false stops
a value set on a card from leaking into everything inside it, which is the cause of a good share of
custom-property bugs.
Without support
The rule is skipped and the property goes back to being a string. The end state is identical; only the motion is lost, so nothing needs a fallback. Current status is on the feature page, and Tailwind v4 registers its own internals this way, which is why a decode of a Tailwind site often lists dozens of them.