Features

grouping syntax

inline shortcut: ~ to apply/merge utilities -> ~(text(5xl,red-700),bg-red-100)

comments (single and multiline)

styles (the generated CSS rules) are sorted predictably and stable — no matter in which order the rules are injected

shortcuts vs apply

shortcut is a way to group a known design — I develop a component with utilities and then extract it into a shortcut. In that case, I want the order to be as they were when I designed it with utilities.

apply is re-using utilities, but apply them in the order you have declared them.

Short summary:

• shortcut: p-2 p-0 -> p-2 wins
• apply: p-2 p-0 -> p-0 wins