Shortcuts

Shortcuts allow you to combine several utility classes into a new single utility class.

Rules are created using the shortcuts object or array inside uno.config.js.

import { defineConfig, presetWind3 } from "unocss";

export default defineConfig({
  presets: [presetWind3()],
  shortcuts: [
    // object for non regex shortcuts
    {
      btn: "py-2 px-4 font-semibold rounded-lg shadow-md",
    },
  ],
});

There are static shortcuts and dynamic shortcuts.

Each static shortcut is a key with a string property with utility classes.

"shortcut-name-here": "a-bunch of utility-classes"

Each dynamic shortcut is an array with a string or regex and a function that returns a string of utility classes .

[/^shortcut-name-here$/, ([, optionalRegexMatch]) => `a-bunch of utility-classes`],