tailwind-syntax-functional-utilities
Installation
SKILL.md
Tailwind CSS : Functional Utilities (v4 only)
Native CSS functions that turn @utility name-* { ... } blocks into parameterised utilities. Replaces v3 matchUtilities() JS plugin authoring with CSS-first directives. NEVER use these in v3 : the CSS functions are unrecognised tokens and the build silently emits broken CSS.
Quick Reference
Four functions
| Function | Purpose | Returns |
|---|---|---|
--value(<type-or-namespace>) |
Resolve the suffix of a name-* utility against a type, literal list, theme namespace, or arbitrary bracket |
The matched value |
--modifier(<type-or-namespace>) |
Resolve the part after / in name-X/Y against the same type system |
The matched value, or --default(...) if none |
--alpha(var(--color-*) / <percentage>) |
Compose an alpha value into a colour via color-mix() |
A colour with alpha applied |
--spacing(<number>) |
Multiply the spacing scale base by a number | calc(var(--spacing) * <number>) |