"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > टेलविंड सीएसएस का परिचय - एक उपयोगिता-प्रथम फ्रेमवर्क

टेलविंड सीएसएस का परिचय - एक उपयोगिता-प्रथम फ्रेमवर्क

2024-11-07 को प्रकाशित
ब्राउज़ करें:176

Introduction to Tailwind CSS – A Utility-First Framework

टेलविंड सीएसएस का परिचय - एक उपयोगिता-प्रथम फ्रेमवर्क

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


1. टेलविंड सीएसएस क्या है?

टेलविंड सीएसएस एक उपयोगिता-प्रथम ढांचा है, जिसका अर्थ है कि यह आपको शैलियों को लागू करने के लिए छोटी, पुन: प्रयोज्य कक्षाएं देने पर केंद्रित है। कस्टम शैलियाँ लिखने के बजाय, आप लेआउट और घटकों के निर्माण के लिए पूर्वनिर्धारित कक्षाओं का उपयोग करते हैं।

उदाहरण:


यहां, आप कई उपयोगिता वर्गों का उपयोग होते हुए देख सकते हैं:

  • बीजी-नीला-500: पृष्ठभूमि का रंग सेट करता है।
  • टेक्स्ट-सफ़ेद: सफ़ेद टेक्स्ट लागू करता है।
  • फ़ॉन्ट-बोल्ड: टेक्स्ट को बोल्ड बनाता है।
  • py-2 px-4: लंबवत और क्षैतिज रूप से पैडिंग जोड़ता है।
  • गोलाकार: बटन के कोनों को गोल करता है।

2. टेलविंड क्यों?

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

फायदे:

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

नुकसान:

  • कक्षा-भारी HTML: आपका HTML कक्षाओं से भरा हो सकता है, जो पहली बार में भारी हो सकता है।
  • लर्निंग कर्व: टेलविंड-विशिष्ट उपयोगिताओं को सीखने की आवश्यकता है।

3. टेलविंड सीएसएस की स्थापना

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

सीडीएन सेटअप:

आप अपनी HTML फ़ाइल में निम्नलिखित लिंक जोड़कर जल्दी से टेलविंड का उपयोग शुरू कर सकते हैं:

एनपीएम सेटअप (बड़ी परियोजनाओं के लिए):

यदि आप किसी बड़े प्रोजेक्ट पर काम कर रहे हैं, तो आप एनपीएम के माध्यम से टेलविंड सीएसएस स्थापित करना चाह सकते हैं:

npm install tailwindcss

एक बार इंस्टॉल हो जाने पर, आप अपने सेटअप को अनुकूलित करने और इसे अपनी बिल्ड प्रक्रिया के साथ एकीकृत करने के लिए टेलविंड.कॉन्फिग.जेएस फ़ाइल जेनरेट कर सकते हैं।


निष्कर्ष

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


मुझे लिंक्डइन पर फॉलो करें

रिदोय हसन

विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/ridoy_hasan/introduction-to-tailwind-css-a-utility-first-framework-5cp3?1 यदि कोई उल्लंघन है, तो हटाने के लिए कृपया [email protected] पर संपर्क करें यह
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3