Overview
Shortcut sets are intended to be 1 to 1 with the UnoCSS implementation, and easily swappable thanks to the active field/functionality.
You can use this to deduplicate the writing of classes for reused elements or components. Which can improve your development experience, and save time refactoring your sites styles. There is also the minor benefit of reducing html size.
Nested Shortcuts
It is currently not recommended to nest your shortcuts, as the UnoCSS processor will duplicate styles in the stylesheet, which can lead to bloated stylesheets. However if you do nest them, keep in mind:
The last declared style overrides previously set classes. So if you have two shortcuts, and nest one in the other. The position of that nest shortcut determines what is overridden.
Example:
shortcut-showcase-base
"text-base text-green-300"
shortcut-showcase-before
"shortcut-showcase-base text-sm text-red-300"
shortcut-showcase-after
"text-sm text-red-300 shortcut-showcase-base"
Notes
Adding "group" or "peer" to a shortcut will not work. Instead apply them directly to your target component.