शॉर्टकट

शॉर्टकट आपको Windi CSS के से प्रेरित, कई नियमों को एक ही शॉर्टकट में संयोजित करने देता है।

उपयोग

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

सादे मैपिंग के अलावा, UnoCSS आपको गतिशील शॉर्टकट परिभाषित करने की भी अनुमति देता है।

नियमों के समान, एक गतिशील शॉर्टकट एक मैचर RegExp और एक हैंडलर फ़ंक्शन का संयोजन है।

shortcuts: [
  // you could still have object style
  {
    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
  },
  // dynamic shortcuts
  [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
]

इसके साथ, हम btn-green और btn-red का उपयोग करके निम्नलिखित CSS उत्पन्न कर सकते हैं:

.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));
}