Aliases allow to define a set of utilities as a single utility.
Aliases are used to create a set of utilities which can be referenced by a single utility. This is useful to create a set of utilities which are used together often.
shortcut— styles are generated as defined by twind — same as if they where used alone
apply— styles are generated in order they are declared
They can be defined inline (within a class attribute or class name string), the rules configuration, or using a helper function. Additionally, they can be named or anonymous.
The generated style of an alias is always a single class and put into the
shortcuts layer. This allows other utilities to override the styles of an alias.
For complex scenarios, it is recommended to use style instead of aliases.
Shortcut aliases are the simplest type of aliases. They are used to create a shortcut for multiple utilities where the styles are generated as defined by twind — same as if they where used alone.
Shortcuts are especially useful within component libraries as they allow users of the library to selectively override the styles of a component.
shortcut does not inject the styles into the document. The returned class name must be used within a class attribute or a class name string.
Apply aliases are similar to shortcut aliases but styles are generated in order they are declared. This matches the behavior of the
@apply directive of Tailwind CSS (Extracting classes with @apply).
Consider the following utilities:
py-4utility will override the
p-4utility will override the
Almost always you want to use
shortcut instead of
apply. The only exception is when the implicit order of styles does not match your expectation.
apply does not inject the styles into the document. The returned class name must be used within a class attribute or a class name string.