टेलविंड सीएसएस लोकप्रिय सीएसएस फ्रेमवर्क में से एक है जो कई कक्षाएं प्रदान करता है। यह कक्षाएं वेब विकास वर्कफ़्लो को सुव्यवस्थित और बढ़ाने में मदद करती हैं। कक्षाओं की विशाल श्रृंखला में से कुछ ऐसे हैं जिनके बारे में डेवलपर्स ने शायद अभी तक नहीं सुना है, कम आंका है, या अपेक्षाकृत नए हैं।

इन कक्षाओं में विकास कार्यप्रवाह को सुव्यवस्थित करने, वेब इंटरफेस के सौंदर्यशास्त्र को बढ़ाने और उत्पादकता को बढ़ावा देने की अपार क्षमता है।

इस ट्यूटोरियल में, हम इनमें से छह वर्गों की जांच करेंगे: कंटेनर क्लास, साइज यूटिलिटी, स्पेस यूटिलिटी, लाइन-क्लैंप यूटिलिटी, रिंग यूटिलिटी और ट्रंकेट यूटिलिटी। हम इस ट्यूटोरियल के लिए टेलविंड के सीडीएन का उपयोग करेंगे।

कंटेनर वर्ग

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

यह प्रतिक्रिया व्यूपोर्ट आकार के आधार पर कंटेनर की चौड़ाई को समायोजित करके प्राप्त की जाती है, जिससे यह सुनिश्चित होता है कि कंटेनर के भीतर की सामग्री विभिन्न उपकरणों पर उचित रूप से प्रदर्शित होती है।

विस्तृत करने के लिए, टेलविंड सीएसएस पूर्वनिर्धारित ब्रेकप्वाइंट के एक सेट का उपयोग करता है, जैसे कि एसएम, एमडी, एलजी, एक्सएल, 2एक्सएल, जो विशिष्ट न्यूनतम चौड़ाई के अनुरूप होते हैं। ये ब्रेकप्वाइंट अलग-अलग स्क्रीन आकारों पर अलग-अलग शैलियाँ लागू करते हैं, जिससे कस्टम मीडिया क्वेरीज़ लिखे बिना एक प्रतिक्रियाशील डिज़ाइन बनाना आसान हो जाता है। 

कंटेनर वर्ग अपनी अधिकतम-चौड़ाई को तदनुसार समायोजित करने के लिए इन ब्रेकप्वाइंट का लाभ उठाता है, यह सुनिश्चित करता है कि कंटेनर के भीतर की सामग्री ब्राउज़र के व्यूपोर्ट आकार के अनुरूप हो। 

यह सुनिश्चित करता है कि आपकी सामग्री प्रतिक्रियाशील है और प्रत्येक ब्रेकपॉइंट के लिए कस्टम सीएसएस लिखने की आवश्यकता के बिना सभी उपकरणों पर अच्छी लगती है। यह आपके प्रोजेक्ट में एक सुसंगत लेआउट संरचना प्रदान करके समय बचाता है।

नीचे एक उदाहरण दिया गया है जो कंटेनर वर्ग को प्रदर्शित करता है:

  
Container Class
  

    This is a demonstration of the container class in Tailwind CSS. The
    container is centered and scales its size based on the viewport size.
  
  

    
      Click Me
    
  

जब आप अपने ब्राउज़र में परिणाम की जांच करते हैं, तो आपके पास कुछ इस तरह होना चाहिए:

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

आकार उपयोगिता

आकार उपयोगिता आपको किसी तत्व की चौड़ाई और ऊंचाई को एक साथ नियंत्रित करने की अनुमति देती है। यह सुविधा विशेष रूप से वर्गाकार तत्व बनाने या यह सुनिश्चित करने के लिए उपयोगी है कि तत्वों के आपके प्रोजेक्ट में सुसंगत आयाम हैं।

आकार उपयोगिता विभिन्न प्रकार के विकल्प प्रदान करती है, जिसमें निश्चित पिक्सेल आकार जैसे विशिष्ट पिक्सेल आकार के लिए आकार-48, और आपके टेलविंड सेटअप से पूर्वनिर्धारित आकार, जैसे आकार-2 शामिल हैं, जो पैमाने के आधार पर चौड़ाई और ऊंचाई लागू करता है। आपके टेलविंड कॉन्फ़िगरेशन में परिभाषित।

यहां बताया गया है कि आप आकार उपयोगिता का उपयोग कैसे कर सकते हैं:

  

    

      
Size 48
    
    

      
Size 64
    
    

      
Size 80
    
  

पहले बॉक्स के लिए, आकार-48 चौड़ाई और ऊंचाई दोनों को रिक्ति पैमाने के 48 पर सेट करता है। दूसरे और तीसरे बॉक्स एक समान संरचना का पालन करते हैं, आकार-64 और आकार-80वर्गों का उद्देश्य उनके आकार निर्धारित करना है।

जब आप अपने ब्राउज़र में परिणाम की जांच करते हैं, तो आपके पास कुछ इस तरह होना चाहिए:

अंतरिक्ष उपयोगिता

अंतरिक्ष उपयोगिता को तत्वों के बीच अंतर को नियंत्रित करने के लिए डिज़ाइन किया गया है, जिससे लगातार अंतर के साथ दृश्यमान आकर्षक लेआउट बनाना आसान हो जाता है। 

टेलविंड स्थान प्रबंधन के लिए दो प्राथमिक वर्ग प्रदान करता है: क्षैतिज रिक्ति के लिए स्पेस-एक्स और ऊर्ध्वाधर रिक्ति के लिए स्पेस-वाई। इन कक्षाओं को एक कंटेनर तत्व पर लागू किया जा सकता है ताकि उसके प्रत्यक्ष चाइल्ड तत्वों के बीच स्वचालित रूप से रिक्ति लागू हो सके।

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

फ्लेक्स कंटेनर के भीतर बटनों के बीच क्षैतिज रिक्ति जोड़ने के लिए स्पेस उपयोगिता का उपयोग कैसे करें इसका एक उदाहरण नीचे दिया गया है:

  

    

      

        
Card 1 Title
        

          Card 1 description or additional information.
        
      
    
    

      

        
Card 2 Title
        

          Card 2 description or additional information.
        
      
    
    

      

        
Card 3 Title
        

          Card 3 description or additional information.
        
      
    
  

उपरोक्त कोड में, स्पेस-वाई-4 उपयोगिता प्रत्येक कार्ड के चाइल्ड तत्वों के बीच लंबवत रिक्ति लागू करती है, जिससे प्रत्येक कार्ड के अंदर लगातार रिक्ति तत्व बनते हैं।

जब आप अपने ब्राउज़र में परिणाम की जांच करते हैं, तो आपके पास कुछ इस तरह होना चाहिए:

लाइन-क्लैंप उपयोगिता

लाइन-क्लैंप उपयोगिता टेक्स्ट ओवरफ्लो को नियंत्रित करने के लिए एक शक्तिशाली उपकरण है। यह निश्चित संख्या में पंक्तियों के बाद पाठ को दृश्य रूप से छोटा करके मदद करता है। यह एक साफ़ और समान लेआउट बनाए रखने के लिए विशेष रूप से उपयोगी है, खासकर जब गतिशील सामग्री से निपटना जो वांछित प्रदर्शन क्षेत्र से अधिक हो सकती है।

नीचे एक कार्ड का उदाहरण दिया गया है जो टेक्स्ट को नियंत्रित करने के लिए लाइन-क्लैंप उपयोगिता का उपयोग करता है:

  
  

    
Card Title
    

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor
      et velit aliquam efficitur. Sed velit nisi, lacinia eu nisl id, lacinia
      lacinia nisl.
    
  
  

    #tag1
    #tag2
  

विवरण पाठ को लाइन-क्लैंप-3 वर्ग का उपयोग करके नियंत्रित किया जाता है, जो पाठ को तीन पंक्तियों तक सीमित करता है। यदि पाठ तीन पंक्तियों से अधिक है, तो इसे छोटा कर दिया जाएगा, और कटौती को इंगित करने के लिए एक दीर्घवृत्त जोड़ा जाएगा।

यह सुनिश्चित करता है कि कार्ड स्पष्ट रूप से साफ रहे और उपयोगकर्ता बहुत अधिक टेक्स्ट से अभिभूत हुए बिना सामग्री को तुरंत समझ सकें।

जब आप अपने ब्राउज़र में परिणाम की जांच करते हैं, तो आपके पास कुछ इस तरह होना चाहिए:

रिंग उपयोगिता

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

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

नीचे एक उदाहरण दिया गया है कि आप रिंग उपयोगिता का उपयोग कैसे कर सकते हैं:

  

    
      Button 1
    
    
      Button 2
    
    
      Button 3
    
  

उपरोक्त कोड में, रिंग उपयोगिता का उपयोग बटन तत्वों के चारों ओर एक रिंग रूपरेखा लागू करने के लिए किया जाता है, जिसे चौड़ाई और रंग के संदर्भ में अनुकूलित किया जा सकता है।

इसके अतिरिक्त, इसे विभिन्न स्थितियों, जैसे होवर या फोकस के आधार पर रिंग की उपस्थिति को बदलने के लिए अन्य उपयोगिताओं के साथ जोड़ा जाता है।

यह दृष्टिकोण उपयोगकर्ताओं को बटन के साथ इंटरैक्ट करने पर दृश्य प्रतिक्रिया प्रदान करके इंटरैक्टिव और सुलभ डिज़ाइन की अनुमति देता है।

जब आप अपने ब्राउज़र में परिणाम की जांच करते हैं, तो आपके पास कुछ इस तरह होना चाहिए:

उपयोगिता को छोटा करें

ट्रंकेट उपयोगिता टेलविंड की टेक्स्ट ओवरफ्लो उपयोगिताओं में से एक है जिसका उपयोग टेक्स्ट को छोटा करने के लिए किया जाता है जो अतिरिक्त सामग्री को छिपाकर और इसे इलिप्सिस (...) के साथ बदलकर अपने कंटेनर को ओवरफ्लो करता है।

यह सुनिश्चित करता है कि पाठ अपने निर्दिष्ट क्षेत्र से बाहर न फैले, स्वच्छ और पेशेवर स्वरूप बनाए रखे। यह अतिप्रवाहित पाठ के कारण होने वाली लेआउट समस्याओं को रोककर समय बचाता है।

नीचे एक उदाहरण दिया गया है जिसमें दिखाया गया है कि ट्रंकेट उपयोगिता का उपयोग कैसे करें:

  
Card Title
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc
    at cursus pellentesque, nisl eros pellentesque quam, a faucibus nisl nunc id
    nisl.
  

अगर टेक्स्ट अपने कंटेनर से ओवरफ्लो हो जाता है, तो उसे इलिप्सिस के साथ छोटा करने के लिए ट्रंकट क्लास को

टैग पर लागू किया जाता है।

जब आप अपने ब्राउज़र में परिणाम की जांच करते हैं, तो आपके पास कुछ इस तरह होना चाहिए:

और वह एक कवर हैं!

निष्कर्ष

इस लेख में, हमने छह उपयोगिता वर्गों की जांच की जो उत्पादकता बढ़ा सकते हैं और प्रत्येक के लिए एक उदाहरण प्रदान किया है।

इन उपयोगिता वर्गों को समझने से आपको बार-बार सीएसएस कोडिंग कार्यों पर अत्यधिक समय खर्च करने के बजाय अद्वितीय और कार्यात्मक डिजाइन बनाने पर अधिक ध्यान केंद्रित करने में मदद मिल सकती है।