वेरिएंट्स

वेरिएंट्स आपको अपने मौजूदा नियमों पर कुछ बदलाव लागू करने की अनुमति देते हैं, जैसे Tailwind CSS से hover: वेरिएंट।

उदाहरण

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // slice `hover:` prefix and passed to the next variants and rules
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher नियंत्रित करता है कि वेरिएंट कब सक्षम होता है। यदि लौटाया गया मान एक स्ट्रिंग है, तो यह नियमों को मिलाने के लिए चयनकर्ता के रूप में उपयोग किया जाएगा।
• selector उत्पन्न CSS चयनकर्ता को अनुकूलित करने की उपलब्धता प्रदान करता है।

अंतर्निहित कार्यप्रणाली

आइए जानते हैं कि hover:m-2 के लिए मिलान करते समय क्या हुआ:

• hover:m-2 को उपयोगकर्ताओं के उपयोग से निकाला गया है
• hover:m-2 को मिलाने के लिए सभी वेरिएंट्स को भेजा गया है
• hover:m-2 हमारे वेरिएंट द्वारा मेल खाता है और m-2 लौटाता है
• परिणाम m-2 को वेरिएंट मिलान के अगले दौर के लिए उपयोग किया जाएगा
• यदि कोई अन्य वेरिएंट मेल नहीं खाता है, तो m-2 फिर नियमों से मेल खाने के लिए जाएगा
• हमारा पहला नियम मेल खाता है और .m-2 { margin: 0.5rem; } उत्पन्न करता है
• अंत में, हम उत्पन्न CSS पर अपने वेरिएंट के रूपांतरण को लागू करते हैं। इस मामले में, हमने selector हुक में :hover जोड़ा है

परिणामस्वरूप, निम्नलिखित CSS उत्पन्न होगा:

.hover\:m-2:hover { margin: 0.5rem; }

इसके साथ, हम m-2 को केवल तभी लागू कर सकते हैं जब उपयोगकर्ता एलिमेंट पर होवर करें।

आगे बढ़ना

वेरिएंट सिस्टम बहुत शक्तिशाली है और इस गाइड में पूरी तरह से कवर नहीं किया जा सकता है, आप अधिक उन्नत उपयोग देखने के लिए डिफ़ॉल्ट प्रीसेट का कार्यान्वयन देख सकते हैं।