Shortcuts

Shortcuts stellen je in staat om meerdere regels te combineren tot een enkele shorthand, geïnspireerd door Windi CSS's.

Gebruik

shortcuts: {
  // shortcuts naar meerdere utilities
  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
  'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  // enkele utility alias
  'red': 'text-red-100',
}

Naast de platte mapping, staat UnoCSS je ook toe om dynamische shortcuts te definiëren.

Vergelijkbaar met Regels, is een dynamische shortcut de combinatie van een matcher RegExp en een handler functie.

shortcuts: [
  // je kunt nog steeds object stijl hebben
  {
    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
  },
  // dynamische shortcuts
  [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
]

Hiermee kunnen we btn-green en btn-red gebruiken om de volgende CSS te genereren:

.btn-green {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --un-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--un-bg-opacity));
  border-radius: 0.5rem;
  --un-text-opacity: 1;
  color: rgb(220 252 231 / var(--un-text-opacity));
}
.btn-red {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --un-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--un-bg-opacity));
  border-radius: 0.5rem;
  --un-text-opacity: 1;
  color: rgb(254 226 226 / var(--un-text-opacity));
}