Why create a custom utility?
Use @utility when you have a small reusable CSS behavior that fits the utility model and should work with Tailwind variants.
Keep utilities focused
A utility should normally express one coherent behavior. Avoid turning a custom utility into a hidden component with dozens of unrelated declarations.
Variants still work
Custom utilities can be used with variants such as hover:, focus: and responsive variants, which keeps them consistent with built-in utilities.
ADVERTISEMENT