टेलविंड सीएसएस के साथ आरंभ करने के लिए एक बूटस्ट्रैप उपयोगकर्ता मार्गदर्शिका

सुनिये सब लोग! ? यदि आप लंबे समय से बूटस्ट्रैप उपयोगकर्ता हैं और टेलविंड सीएसएस में संक्रमण के बारे में उत्सुक हैं, तो यह मार्गदर्शिका आपके लिए है। टेलविंड एक उपयोगिता-प्रथम सीएसएस ढांचा है जो बूटस्ट्रैप के घटक-आधारित संरचना की तुलना में एक मौलिक रूप से भिन्न दृष्टिकोण प्रदान करता है। आइए देखें कि आप बूटस्ट्रैप उपयोगकर्ता के रूप में टेलविंड के साथ आसानी से कैसे शुरुआत कर सकते हैं!

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

? टेलविंड सीएसएस क्यों?

ट्यूटोरियल में जाने से पहले, यहां बूटस्ट्रैप और टेलविंड के बीच एक त्वरित तुलना दी गई है:

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

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

1. किसी प्रोजेक्ट में टेलविंड स्थापित करना

चरण 1: टेलविंड सीएसएस स्थापित करें

टेलविंड सीएसएस का उपयोग शुरू करने के लिए, आपको इसे अपने प्रोजेक्ट में इंस्टॉल करना होगा। इन चरणों का पालन करें:

• एनपीएम के माध्यम से टेलविंड स्थापित करें:

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init

• अपनी टेलविंड.कॉन्फिग.जेएस फ़ाइल में, यह सुनिश्चित करने के लिए सामग्री सरणी सेट करें कि टेलविंड आपके प्रोजेक्ट को कक्षाओं के लिए स्कैन करता है:

  module.exports = {
    content: [
      './public/**/*.html',
      './src/**/*.{html,js}',
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

चरण 2: अपनी सीएसएस फ़ाइल बनाएं

अब, निम्नलिखित टेलविंड निर्देशों के साथ अपने प्रोजेक्ट में एक स्टाइल.सीएसएस फ़ाइल बनाएं:

@tailwind base;
@tailwind components;
@tailwind utilities;

चरण 3: अपने HTML में टेलविंड शामिल करें

अपनी HTML फ़ाइलों में, जेनरेट की गई CSS फ़ाइल को लिंक करें:

अब आप अपने प्रोजेक्ट में टेलविंड का उपयोग शुरू करने के लिए तैयार हैं!

2. टेलविंड दर्शन को समझना

यदि आप बूटस्ट्रैप की .container, .row, और .col-6 जैसी कक्षाओं के आदी हैं, तो टेलविंड पर स्विच करना एक बड़े बदलाव की तरह लग सकता है। बूटस्ट्रैप में, लेआउट और डिज़ाइन निर्णयों को घटकों में विभाजित किया जाता है, जबकि टेलविंड में, आप उपयोगिता वर्गों का उपयोग करके डिज़ाइन के पूर्ण नियंत्रण में होते हैं।

उदाहरण: ग्रिड लेआउट बनाना

बूटस्ट्रैप:

  

    
Column 1
    
Column 2
  

टेलविंड:

  
Column 1
  
Column 2

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

3. टाइपोग्राफी और टेलविंड के साथ रिक्ति

बूटस्ट्रैप और टेलविंड के बीच एक बड़ा अंतर यह है कि टाइपोग्राफी और रिक्ति को कैसे नियंत्रित किया जाता है।

उदाहरण: टाइपोग्राफी और पैडिंग जोड़ना

बूटस्ट्रैप:

Hello, Bootstrap!
This is a lead paragraph.
Click Me

टेलविंड:

Hello, Tailwind!
This is a lead paragraph.
Click Me

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

4. रिस्पॉन्सिव डिज़ाइन

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

उदाहरण: किसी तत्व को उत्तरदायी बनाना

बूटस्ट्रैप:

Responsive Column

टेलविंड:

Responsive Column

टेलविंड में, w-full सुनिश्चित करता है कि तत्व छोटी स्क्रीन पर पूरी चौड़ाई लेता है, और md:w-1/2 md ब्रेकपॉइंट (मध्यम स्क्रीन आकार) से शुरू होकर 50% चौड़ाई लागू करता है।

5. टेलविंड को अनुकूलित करना

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

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
        secondary: '#14171A',
      },
    },
  },
}

इस कॉन्फ़िगरेशन के साथ, आप अपने कस्टम रंगों का उपयोग इस प्रकार कर सकते हैं:

Custom Button

6. बूटस्ट्रैप घटकों को टेलविंड में स्थानांतरित करना

यदि आप टेलविंड में सामान्य बूटस्ट्रैप घटकों (जैसे बटन, नेवबार और मोडल) को फिर से बनाना चाहते हैं, तो यह सब सही उपयोगिताओं का उपयोग करने के बारे में है। कुछ उदाहरण निम्नलिखित हैं:

बटन घटक

बूटस्ट्रैप:

Submit

टेलविंड:

  Submit

नेवबार घटक

बूटस्ट्रैप:

टेलविंड:

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

7. टेलविंड प्लगइन्स का उपयोग करना

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

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

आपके टेलविंड.config.js में:

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

8. मेट्रोनिक 9 के साथ लेवल अप - ऑल-इन-वन टेलविंड यूआई टूलकिट

यदि आप एक टेलविंड सीएसएस अनुभव की तलाश में हैं जो बूटस्ट्रैप की सादगी और परिचितता को जोड़ती है, तो मेट्रोनिक 9 से आगे न देखें!

मेट्रोनिक 9 एक ऑल-इन-वन टेलविंड यूआई टूलकिट है जो दोनों दुनियाओं का सर्वश्रेष्ठ लाता है: टेलविंड सीएसएस की उपयोगिता-पहली शक्ति, जिसे बूटस्ट्रैप से परिचित संरचित और घटक-संचालित दृष्टिकोण के साथ जोड़ा गया है।

अपने टेलविंड प्रोजेक्ट के लिए मेट्रोनिक 9 क्यों चुनें?

• लोकप्रिय और विश्वसनीय: 2013 में रिलीज़ हुआ, मेट्रोनिक 115,000 बिक्री और 8000 5-सितारा समीक्षाओं के साथ एनवाटो मार्केट पर नंबर एक एडमिन डैशबोर्ड टेम्पलेट बन गया, जो दुनिया भर में 3000 से अधिक SaaS परियोजनाओं को शक्ति प्रदान करता है।

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

• टेलविंड बूटस्ट्रैप अनुभव: आपको बूटस्ट्रैप के संरचित अनुभव के साथ टेलविंड का लचीलापन मिलता है। चाहे आप बूटस्ट्रैप से माइग्रेट कर रहे हों या नई शुरुआत कर रहे हों, आपको सीखने की अवस्था न्यूनतम मिलेगी।

• एकाधिक लेआउट: 5 से अधिक ऐप लेआउट डेमो और 1000 यूआई तत्वों के साथ, मेट्रोनिक 9 आपको जल्दी और आसानी से जटिल एप्लिकेशन बनाने की सुविधा देता है, चाहे आप SaaS डैशबोर्ड, एडमिन पैनल, या एक सामान्य वेब ऐप पर काम कर रहे हों।

• निर्बाध एकीकरण: मेट्रोनिक 9 रिएक्ट, नेक्स्ट.जेएस और एंगुलर जैसे आधुनिक ढांचे के साथ पूरी तरह से एकीकृत होता है, जो आपको बूटस्ट्रैप जैसी उपयोग में आसानी के साथ अपनी टेलविंड यात्रा की शुरुआत देता है।

आज ही मेट्रोनिक 9 से शुरुआत करें!

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

? यहां मेट्रोनिक 9 देखें और टेलविंड के लचीलेपन और बूटस्ट्रैप की सरलता के साथ सुंदर यूआई बनाना शुरू करें!

9. निष्कर्ष: क्या टेलविंड आपके लिए सही विकल्प है?

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

बेझिझक कोई भी प्रश्न पूछें या नीचे टिप्पणी में अपने अनुभव साझा करें। हैप्पी कोडिंग! ?