यदि उपयोगिता वर्ग केवल एक ही काम करता है, तो संभावना है कि आप इसे कहीं और से आने वाली किसी भी शैली से ओवरराइड नहीं करना चाहते हैं। एक दृष्टिकोण का उपयोग करना है !important 100% निश्चित होने के लिए शैली लागू की जाएगी, विशिष्टता संघर्षों की परवाह किए बिना।
टेलविंड कॉन्फ़िगरेशन फ़ाइल में एक है !important विकल्प जो स्वचालित रूप से जोड़ देगा !important हर उपयोगिता वर्ग के लिए। उपयोग करने में कुछ भी गलत नहीं है !important इस तरह, लेकिन आजकल विशिष्टता को संभालने के बेहतर तरीके हैं। का उपयोग करते हुए सीएसएस कैस्केड परतें हम उपयोग करने के भारी-भरकम दृष्टिकोण से बच सकते हैं !important.
कैस्केड परतें हमें शैलियों को "परतों" में समूहित करने की अनुमति देती हैं। एक परत की प्राथमिकता हमेशा चयनकर्ता की विशिष्टता को मात देती है। विशिष्टता केवल प्रत्येक परत के अंदर मायने रखती है। एक समझदार परत क्रम स्थापित करने से स्टाइल संघर्षों और विशिष्टता युद्धों से बचने में मदद मिलती है। यही कारण है कि CSS Cascade Layers इसके लिए एक बेहतरीन टूल है तृतीय-पक्ष ढांचे से शैलियों के साथ-साथ कस्टम शैलियों का प्रबंधन, टेलविंड की तरह।
एक टेलविंड स्रोत .css फ़ाइल आमतौर पर कुछ इस तरह शुरू होती है:
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;आइए नजर डालते हैं आधिकारिक टेलविंड डॉक्स निर्देशों के बारे में:
निर्देश कस्टम टेलविंड-विशिष्ट नियम हैं जिनका उपयोग आप अपने सीएसएस में कर सकते हैं जो टेलविंड सीएसएस परियोजनाओं के लिए विशेष कार्यक्षमता प्रदान करते हैं। उपयोग
@tailwindटेलविंड को सम्मिलित करने का निर्देशbase,components,utilitiesऔरvariantsअपने सीएसएस में शैलियों।
निर्मित होने वाली आउटपुट CSS फ़ाइल में, Tailwind का CSS रीसेट — के रूप में जाना जाता है preflight - पहले आधार शैलियों के भाग के रूप में शामिल किया गया है। के बाकी base टेलविंड के काम करने के लिए आवश्यक सीएसएस चर शामिल हैं। components आपके लिए अपनी स्वयं की कस्टम कक्षाएं जोड़ने का स्थान है। आपके द्वारा अपने मार्कअप में उपयोग की गई कोई भी उपयोगिता वर्ग आगे दिखाई देगी। होवर और फ़ोकस स्टेट्स और प्रतिक्रियाशील शैलियों जैसी चीज़ों के लिए वेरियंट शैलियाँ हैं, जो जेनरेट की गई CSS फ़ाइल में अंतिम दिखाई देंगी।
टेलविंड @layer निदेश
भ्रामक रूप से, टेलविंड का अपना है @layer वाक्य - विन्यास। यह लेख सीएसएस मानक के बारे में है, लेकिन आइए टेलविंड संस्करण पर एक त्वरित नज़र डालें (जो संकलित हो जाता है और आउटपुट सीएसएस में समाप्त नहीं होता है)। टेलविंड @layer निर्देश आउटपुट सीएसएस फ़ाइल के एक निर्दिष्ट हिस्से में अपनी अतिरिक्त शैलियों को इंजेक्ट करने का एक तरीका है।
उदाहरण के लिए, अपनी खुद की शैलियों को जोड़ने के लिए base शैलियों, आप निम्न कार्य करेंगे:
@layer base {
h1 {
font-size: 30px;
}
}RSI components परत डिफ़ॉल्ट रूप से खाली होती है — यह केवल अपनी कक्षाएं लगाने का स्थान है। अगर आप Tailwind के तरीके से काम कर रहे थे, तो आप शायद इसका इस्तेमाल करेंगे @apply (हालांकि हाल ही में टेलविंड के निर्माता इसके खिलाफ सलाह दी), लेकिन आप कक्षाओं को नियमित तरीके से भी लिख सकते हैं:
@layer components {
.btn-blue {
background-color: blue;
color: white;
}
}CSS मानक बहुत अधिक शक्तिशाली है। आइए उस पर वापस जाएं …
CSS मानक का उपयोग करना @layer
यहां बताया गया है कि हम इसे CSS मानक का उपयोग करने के लिए फिर से कैसे लिख सकते हैं @layer:
@layer tailwind-base, my-custom-styles, tailwind-utilities;
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-utilities {
@tailwind utilities;
@tailwind variants;
} टेलविंड निर्देश के विपरीत, ये संकलित नहीं होते हैं। वे ब्राउज़र द्वारा समझे जाते हैं। वास्तव में, एज, क्रोम, सफारी और फ़ायरफ़ॉक्स में DevTools आपको आपके द्वारा परिभाषित की गई कोई भी परत दिखाएगा।
आपके पास जितनी चाहें उतनी परतें हो सकती हैं - और उन्हें जो चाहें नाम दें - लेकिन इस उदाहरण में, मेरी सभी कस्टम शैलियाँ एक परत में हैं (my-custom-styles) पहली पंक्ति परत क्रम स्थापित करती है:
@layer tailwind-base, my-custom-styles, tailwind-utilities;इसे पहले प्रदान करने की आवश्यकता है। किसी अन्य कोड का उपयोग करने से पहले इस पंक्ति को शामिल करना सुनिश्चित करें @layer. सूची में पहली परत होगी कम से कम शक्तिशाली, और सूची में अंतिम परत होगी अधिकांश ताकतवर। इसका मत tailwind-base विश्व का सबसे लोकप्रिय एंव कम से कम शक्तिशाली परत और इसमें कोई भी कोड बाद की सभी परतों द्वारा ओवरराइड किया जाएगा। इसका मतलब यह भी है tailwind-utilities हमेशा किसी अन्य शैली को रौंदेंगे - स्रोत आदेश या विशिष्टता की परवाह किए बिना. (उपयोगिताएँ और प्रकार सका अलग-अलग परतों में जाएं, लेकिन टेलविंड के अनुरक्षक यह सुनिश्चित करेंगे कि वेरिएंट हमेशा उपयोगिताओं को रौंदें, जब तक आप उपयोगिता निर्देश के नीचे वेरिएंट शामिल करते हैं।)
कुछ भी जो एक परत में नहीं है वह परत में मौजूद किसी भी चीज़ को ओवरराइड कर देगा (एक अपवाद के साथ शैलियों का उपयोग किया जाता है !important) तो, आप छोड़ने का विकल्प भी चुन सकते हैं utilities और variants किसी भी परत के बाहर:
@layer tailwind-base, tailwind-components, my-custom-styles;
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-components {
@tailwind components;
}
@tailwind utilities;
@tailwind variants;इसने हमें वास्तव में क्या खरीदा? कई बार उन्नत CSS चयनकर्ता बहुत काम आते हैं। आइए . का एक संस्करण बनाएं :focus-within जो माउस क्लिक के बजाय केवल कीबोर्ड फोकस का जवाब देता है :has चयनकर्ता (जो क्रोम 105 . में आता है) यह एक मूल तत्व को स्टाइल करेगा जब उसके किसी भी बच्चे को फोकस प्राप्त होगा। टेलविंड 3.1 पेश किया गया कस्टम वेरिएंट - जैसे <div class="[&:has(:focus-visible)]:outline-red-600"> - लेकिन कभी-कभी सिर्फ CSS लिखना आसान होता है:
@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
@tailwind base;
}
@tailwind utilities;
@layer my-custom-styles {
.radio-container {
padding: 4px 24px;
border: solid 2px rgb(230, 230, 230);
}
.radio-container:has(:focus-visible) {
outline: solid 2px blue;
}
}मान लें कि केवल एक उदाहरण में हम ओवरराइड करना चाहते हैं outline-color से blue किसी और चीज को। मान लें कि हम जिस तत्व के साथ काम कर रहे हैं, उसमें दोनों Tailwind वर्ग हैं .outline-red-600 और हमारा अपना .radio-container:has(:focus-visible) वर्ग:
<div class="outline-red-600 radio-container"> ... </div>कौन सा outline-color जीतेंगे?
आमतौर पर, की उच्च विशिष्टता .radio-container:has(:focus-visible) इसका मतलब होगा कि Tailwind वर्ग का कोई प्रभाव नहीं है — भले ही वह स्रोत क्रम में कम हो। लेकिन, टेलविंड के विपरीत @layer निर्देश जो स्रोत आदेश पर निर्भर करता है, सीएसएस मानक @layer विशिष्टता का उल्लंघन करता है।
परिणामस्वरूप, हम जटिल चयनकर्ताओं का उपयोग अपनी स्वयं की कस्टम शैलियों में कर सकते हैं लेकिन फिर भी आवश्यकता पड़ने पर उन्हें Tailwind की उपयोगिता वर्गों के साथ ओवरराइड कर सकते हैं — बिना किसी भारी-भरकम प्रयोग के !important हम जो चाहते हैं उसे पाने के लिए उपयोग करें।
