कई महीने पहले (लेखन के समय), टेलविंड सीएसएस ने टेलविंड सीएसएस v4.0 पर अपना काम ओपन-सोर्स किया था। (आप इसे यहां GitHub पर पा सकते हैं)।

हाल ही में, टेलविंड ने टेलविंड सीएसएस 4 के लिए एक सार्वजनिक बीटा की घोषणा की, और इस लेख में मैं नए संस्करण की मुख्य विशेषताएं शामिल करूंगा। तो चलो शुरू हो जाओ!

सामान्य संरचना परिवर्तन

टेलविंड ने अपने इंजन पर दोबारा काम किया है जिससे प्रदर्शन में काफी सुधार हुआ है। पूर्ण बिल्ड 5x तक तेज़ होते हैं, वृद्धिशील बिल्ड 100x (आपने सही पढ़ा) तक तेज़ होते हैं।

टेलविंड v4 में एक एकीकृत टूलचेन भी है। क्या आपको अपने सभी टेलविंड प्रोजेक्ट्स में ऑटोप्रिफ़िक्सर और पोस्टसीएसएस इंस्टॉल करना याद है? अब आपको ऐसा नहीं करना पड़ेगा!

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

टेलविंड को सीएसएस में नवीनतम सुविधाओं के लिए भी समर्थन मिल रहा है।

CSS का एक नया लोगो (और नई सुविधाएँ) है! ?

सर्वश्रेष्ठ कोड ・ 23 नवंबर

#सीएसएस #वेबदेव #प्रोग्रामिंग #चर्चा करना

अब, सामान्य बदलावों के साथ, आइए देखें कि टेलविंड विशेष रूप से क्या जोड़ रहा है!

नई सुविधाओं ?

यदि आप टेलविंड v4 आज़माना चाहते हैं, तो v4 (बीटा) के लिए आरंभ करने वाले दस्तावेज़ देखें।

यदि आप अपने प्रोजेक्ट को आसानी से अपग्रेड करना चाहते हैं, तो बस npx @tailwindcss/upgrade@next चलाएं और टेलविंड आपके लिए यह काम करेगा। सावधान रहें! ब्रेकिंग परिवर्तन हो सकते हैं।

रंग

टेलविंड वी4 रंग पैलेट आरजीबी के बजाय ओकेएलसीएच पर आधारित है। स्क्रीन पर एकरूपता और जीवंतता के मामले में आरजीबी रंग प्रणाली थोड़ी सीमित है। चूँकि oklch रंग प्रणाली अब व्यापक रूप से समर्थित है, Tailwind v4 इसका लाभ उठाएगा!

कंटेनर प्रश्न

टेलविंड v4 अब डिफ़ॉल्ट रूप से कंटेनर क्वेरी का समर्थन करता है। यदि आप नहीं जानते कि कंटेनर क्वेरीज़ क्या हैं, तो मैं समझाता हूँ।

क्या आप टेलविंड में एमडी:, एसएम: आदि जैसी चीजें जानते हैं जो आपको विभिन्न स्क्रीन आकारों पर लागू सीएसएस को अनुकूलित करने की अनुमति देती हैं?
उन मामलों में, कक्षाएं एक विंडो के आकार को संदर्भित करती हैं। कंटेनर क्वेरी के साथ, वे इसके बजाय कंटेनर के आकार का उल्लेख कर सकते हैं।

उपरोक्त उदाहरण में, ग्रिड में 3 कॉलम होंगे - तब नहीं जब विंडो छोटे आकार तक पहुंच जाए, बल्कि तब जब कंटेनर हो जाए। जैसा कि आप कल्पना कर सकते हैं, यह रिस्पॉन्सिव लेआउट में बहुत उपयोगी है।


  
  
  फ़ील्ड का आकार


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

और टेलविंड v4 इसका समर्थन करता है!

टेलविंड की वेबसाइट पर डेमो आज़माएं।

अब आप इसका उपयोग करने के लिए फ़ील्ड-साइज़िंग-कंटेंट क्लास को अपने टेक्स्टएरिया में जोड़ सकते हैं।

  
  
  वंशज अद्यतन


टेलविंड स्टेबल (आप शायद यह नहीं जानते होंगे) का एक * वेरिएंट है जो आपको एक वर्ग के साथ एक तत्व के प्रत्यक्ष बच्चों को लक्षित करने की अनुमति देता है। उदाहरण के लिए:







टेलविंड v4 में नया ** संस्करण सभी वंशजों को लक्षित करेगा:








  
  
  इनसेट छाया (और छल्ले)


इनसेट-छाया और इनसेट-रिंग कक्षाओं का उपयोग करके तत्वों पर इनसेट छाया और रिंग बनाना भी अब आसान होगा।












  
  
  और भी बहुत कुछ है!


यदि आप सभी नई सुविधाएं देखना चाहते हैं, तो https://tailwindcss.com/docs/v4-beta पर जाएं और उन्हें देखें!

यह पोस्ट एक #चर्चा पोस्ट है! इसीलिए मैंने इसे छोटा रखा; मैं जानना चाहता हूँ की आप क्या सोचते हैं!

मैं जानता हूं कि आपमें से बहुत से टेलविंड से नफरत करने वालों के पास शायद मेरे लिए कुछ प्रतिक्रिया होगी?

निश्चित रूप से कुछ विवादास्पद नई सुविधाएँ हैं और मैं कुछ राय प्राप्त करना चाहता हूँ?

सारांश: एक टिप्पणी छोड़ें!




पढ़ने के लिए धन्यवाद!

बेस्टकोड