Tailwind CSS की ग्रिड क्लासेज़ (Grid Classes of Tailwind CSS)

    Tailwind CSS की ग्रिड क्लासेज़ का उपयोग कर आप आसानी से उत्तरदायी और लचीली ग्रिड लेआउट बना सकते हैं। यहां सभी मुख्य ग्रिड क्लासेज़ की विस्तृत व्याख्या दी गई है।

    1. ग्रिड कंटेनर क्लास (Grid Container Class)

    grid: यह क्लास एक एलिमेंट को ग्रिड कंटेनर में बदलती है।

    <div class="grid">
  <!-- Grid items go here -->
</div>

    2. कॉलम की संख्या सेट करें (Set Number of Columns)

    ग्रिड कॉलम की संख्या निर्धारित करने के लिए Tailwind CSS grid-cols-{n} क्लासेज़ प्रदान करता है।

    grid-cols-1: 1 कॉलम की ग्रिड बनाएं।

    <div class="grid grid-cols-1">
  <div>1</div>
  <div>2</div>
</div>

    • grid-cols-2: 2 कॉलम की ग्रिड बनाएं।

    <div class="grid grid-cols-2">
  <div>1</div>
  <div>2</div>
</div>

    • grid-cols-3: 3 कॉलम की ग्रिड बनाएं।

    <div class="grid grid-cols-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

    • grid-cols-4: 4 कॉलम की ग्रिड बनाएं।

    <div class="grid grid-cols-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

    • grid-cols-5 to grid-cols-12: Tailwind CSS 12 कॉलम तक की ग्रिड प्रदान करता है।

    3. कॉलम गैप सेट करें (Set Column Gap)

    कॉलम्स के बीच गैप सेट करने के लिए gap-{size} क्लास का उपयोग करें।

    gap-1: 0.25rem (4px) का गैप।

    <div class="grid grid-cols-3 gap-1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

    • gap-2: 0.5rem (8px) का गैप।
    • gap-4: 1rem (16px) का गैप।

    4. पंक्ति की संख्या सेट करें (Set Number of Rows)

    पंक्तियों की संख्या सेट करने के लिए grid-rows-{n} का उपयोग करें।

    • grid-rows-1: 1 पंक्ति।

    <div class="grid grid-rows-1">
  <div>1</div>
</div>

    • grid-rows-2: 2 पंक्तियाँ।

    <div class="grid grid-rows-2">
  <div>1</div>
  <div>2</div>
</div>

    • grid-rows-3 to grid-rows-6: Tailwind CSS 6 पंक्तियों तक की ग्रिड प्रदान करता है।

    5. पंक्ति गैप सेट करें (Set Row Gap)

    पंक्तियों के बीच गैप सेट करने के लिए gap-y-{size} का उपयोग करें।

    • gap-y-1: 0.25rem (4px) का गैप।

    <div class="grid grid-cols-3 gap-y-1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

    • gap-y-2: 0.5rem (8px) का गैप।
    • gap-y-4: 1rem (16px) का गैप।

    6. ग्रिड टेम्पलेट क्षेत्रों का उपयोग करें (Use Grid Template Areas)

    ग्रिड टेम्पलेट क्षेत्रों का उपयोग करने के लिए grid-areas का उपयोग किया जाता है।

    <div class="grid grid-areas">
  <div class="grid-area-header">Header</div>
  <div class="grid-area-sidebar">Sidebar</div>
  <div class="grid-area-main">Main</div>
  <div class="grid-area-footer">Footer</div>
</div>

    7. ग्रिड कॉलम स्पैनिंग (Grid Column Spanning)

    कॉलम को स्पैन करने के लिए col-span-{n} क्लास का उपयोग करें।

    • col-span-1: 1 कॉलम स्पैन करें।
    • col-span-2: 2 कॉलम स्पैन करें।

    <div class="grid grid-cols-3">
  <div class="col-span-2">Spanning 2 Columns</div>
  <div>Normal</div>
</div>

    8. ग्रिड पंक्ति स्पैनिंग (Grid Row Spanning)

    पंक्ति को स्पैन करने के लिए row-span-{n} क्लास का उपयोग करें।

    • row-span-1: 1 पंक्ति स्पैन करें।
    • row-span-2: 2 पंक्ति स्पैन करें।

    <div class="grid grid-rows-3">
  <div class="row-span-2">Spanning 2 Rows</div>
  <div>Normal</div>
</div>

    9. ग्रिड ऑटो कॉलम और पंक्ति सेटिंग (Grid Auto Columns and Rows)

    ग्रिड ऑटो कॉलम्स सेट करें (Set Grid Auto Columns)

    • auto-cols-auto: कॉलम्स की ऑटोमेटिक साइज़िंग।
    • auto-cols-min: कॉलम्स को न्यूनतम साइज़ दें।
    • auto-cols-max: कॉलम्स को अधिकतम साइज़ दें।
    • auto-cols-fr: कॉलम्स को फ्रैक्शनल यूनिट्स दें।

    <div class="grid grid-cols-3 auto-cols-min">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

    ग्रिड ऑटो पंक्ति सेट करें (Set Grid Auto Rows)

    • auto-rows-auto: पंक्तियों की ऑटोमेटिक साइज़िंग।
    • auto-rows-min: पंक्तियों को न्यूनतम साइज़ दें।
    • auto-rows-max: पंक्तियों को अधिकतम साइज़ दें।
    • auto-rows-fr: पंक्तियों को फ्रैक्शनल यूनिट्स दें।

    <div class="grid grid-rows-3 auto-rows-max">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

    10. ग्रिड जस्टिफिकेशन और अलाइनमेंट (Grid Justification and Alignment)

    जस्टिफाई आइटम्स (Justify Items)

    • justify-items-start: सभी आइटम्स को प्रारंभ पर संरेखित करें।
    • justify-items-center: सभी आइटम्स को केंद्र में संरेखित करें।
    • justify-items-end: सभी आइटम्स को अंत में संरेखित करें।
    • justify-items-stretch: सभी आइटम्स को खींचे।

    <div class="grid grid-cols-3 justify-items-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

    अलाइन आइटम्स (Align Items)

    • items-start: आइटम्स को ऊपर की ओर संरेखित करें।
    • items-center: आइटम्स को केंद्र में संरेखित करें।
    • items-end: आइटम्स को नीचे की ओर संरेखित करें।
    • items-stretch: आइटम्स को खींचे।

    <div class="grid grid-cols-3 items-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

    जस्टिफाई कंटेंट (Justify Content)

    • justify-start: कंटेंट को प्रारंभ पर संरेखित करें।
    • justify-center: कंटेंट को केंद्र में संरेखित करें।
    • justify-end: कंटेंट को अंत में संरेखित करें।
    • justify-between: कंटेंट को समान रूप से वितरित करें।
    • justify-around: कंटेंट को चारों ओर समान रूप से वितरित करें।

    <div class="grid grid-cols-3 justify-around">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

    अलाइन कंटेंट (Align Content)

    • content-start: कंटेंट को ऊपर की ओर संरेखित करें।
    • content-center: कंटेंट को केंद्र में संरेखित करें।
    • content-end: कंटेंट को नीचे की ओर संरेखित करें।
    • content-between: कंटेंट को समान रूप से वितरित करें।
    • content-around: कंटेंट को चारों ओर समान रूप से वितरित करें।

    <div class="grid grid-cols-3 content-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

    Tailwind CSS के ग्रिड क्लासेज़ का उपयोग

    Tailwind CSS के ग्रिड क्लासेज़ का उपयोग करके, आप अत्यधिक अनुकूलन योग्य और उत्तरदायी ग्रिड लेआउट बना सकते हैं। ये क्लासेज़ आपको बिना कस्टम CSS कोड के विभिन्न डिज़ाइन तत्वों को आसानी से समायोजित करने में मदद करती हैं।

    यदि आपको अधिक जानकारी या उदाहरणों की आवश्यकता है, तो Tailwind CSS के आधिकारिक डॉक्यूमेंटेशन को भी देख सकते हैं।

    Tailwind CSS के फायदे और नुकसान (Advantages and Disadvantages of Tailwind CSS)

    Tailwind CSS एक लोकप्रिय CSS फ्रेमवर्क है जो वेब विकास के क्षेत्र में कई सुविधाएँ और लाभ प्रदान करता है। हालांकि, इसके कुछ नुकसान भी हो सकते हैं, जिन्हें समझना महत्वपूर्ण है। आइए Tailwind CSS के फायदे और नुकसान पर एक नज़र डालें।

    फायदे (Advantages)

    1. तेज़ विकास (Rapid Development)
      Tailwind CSS की उपयोगिता क्लासेज़ (utility classes) आपको सीधे HTML में स्टाइलिंग करने की अनुमति देती हैं, जिससे CSS लिखने की ज़रूरत कम हो जाती है और विकास प्रक्रिया तेज़ होती है। यह आपको तुरंत प्रोटोटाइप तैयार करने में मदद करता है।
    2. सुसंगत डिज़ाइन (Consistent Design)
      Tailwind CSS का उपयोग करने से आपकी वेबसाइट पर डिज़ाइन तत्वों की एकरूपता सुनिश्चित होती है। यह क्लासेज़ के माध्यम से एक मानकीकृत डिज़ाइन प्रणाली प्रदान करता है, जो आपकी परियोजना में स्थिरता बनाए रखता है।
    3. अनुकूलन क्षमता (Customizability)
      Tailwind CSS अत्यधिक अनुकूलन योग्य है। आप Tailwind की कॉन्फ़िगरेशन फाइल का उपयोग करके रंग, स्पेसिंग, टाइपोग्राफी और अन्य स्टाइल्स को अपने प्रोजेक्ट की आवश्यकताओं के अनुसार कस्टमाइज़ कर सकते हैं।
    4. रेस्पॉन्सिव डिज़ाइन (Responsive Design)
      Tailwind CSS के साथ रेस्पॉन्सिव डिज़ाइन बनाना आसान है। यह आपको विभिन्न स्क्रीन साइज़ के लिए ब्रेकपॉइंट्स प्रदान करता है, जिससे आप बिना किसी अतिरिक्त मीडिया क्वेरी के उत्तरदायी लेआउट बना सकते हैं।
    5. छोटे CSS बंडल का आकार (Small CSS Bundle Size)
      Tailwind CSS का JIT (Just-In-Time) मोड केवल वही क्लासेज़ उत्पन्न करता है जो आपके प्रोजेक्ट में उपयोग हो रही हैं, जिससे आपके CSS का आकार छोटा होता है और परफॉर्मेंस में सुधार होता है।
    6. डार्क मोड सपोर्ट (Dark Mode Support)
      Tailwind में डार्क मोड का समर्थन है, जिससे आप आसानी से अपनी वेबसाइट के लिए लाइट और डार्क थीम बना सकते हैं।

    नुकसान (Disadvantages)

    1. क्लास ओवरहेड (Class Overhead)
      Tailwind CSS का उपयोग करने से आपके HTML में कई क्लासेज़ हो सकती हैं, जिससे कोड जटिल और पढ़ने में कठिन हो सकता है। यह नए डेवलपर्स के लिए समझने में थोड़ी चुनौती प्रस्तुत कर सकता है।
    2. सीखने की प्रक्रिया (Learning Curve)
      Tailwind CSS के उपयोगिता-प्रथम दृष्टिकोण को समझने के लिए नए उपयोगकर्ताओं को समय लग सकता है। इसके क्लास नामों और उनके कार्यों को समझने के लिए सीखने की प्रक्रिया में कुछ समय लग सकता है।
    3. आरंभिक सेटअप (Initial Setup)
      Tailwind CSS का आरंभिक सेटअप और कस्टमाइजेशन प्रक्रिया समय लेने वाली हो सकती है, खासकर यदि आप Tailwind को अपनी विशिष्ट डिज़ाइन आवश्यकताओं के अनुसार अनुकूलित करना चाहते हैं।
    4. HTML के साथ स्टाइल को घुलाना (Mixing Style with HTML)
      HTML के भीतर स्टाइलिंग कोड को जोड़ना किसी-किसी के लिए डिज़ाइन और कोड को अलग रखने की आवश्यकता के खिलाफ हो सकता है। पारंपरिक CSS दृष्टिकोण से आने वाले डेवलपर्स को Tailwind CSS के साथ समायोजित होने में समय लग सकता है।
    5. डिज़ाइन कस्टमाइज़ेशन के लिए सीमित स्टाइलिंग (Limited Styling for Design Customization)
      यद्यपि Tailwind CSS अत्यधिक अनुकूलन योग्य है, लेकिन कुछ जटिल डिज़ाइन या एनिमेशन के लिए आपको अतिरिक्त कस्टम CSS लिखने की आवश्यकता हो सकती है।

     

    Tailwind CSS बनाम Bootstrap (Tailwind CSS vs Bootstrap)

    Tailwind CSS और Bootstrap दोनों ही लोकप्रिय CSS फ्रेमवर्क्स हैं, लेकिन वे अलग-अलग दृष्टिकोणों और उपयोग मामलों के लिए बनाए गए हैं। Tailwind CSS अधिक अनुकूलन योग्य और उपयोगिता-प्रथम (utility-first) दृष्टिकोण पर ध्यान केंद्रित करता है, जबकि Bootstrap अधिक पारंपरिक CSS और कम्पोनेंट-आधारित डिज़ाइन सिस्टम प्रदान करता है। आइए इन दोनों फ्रेमवर्क्स की तुलना करें।

    Tailwind CSS की विशेषताएँ (Features of Tailwind CSS)

    उपयोगिता-प्रथम दृष्टिकोण (Utility-First Approach):
    Tailwind CSS आपको विभिन्न प्रकार की उपयोगिता क्लासेज़ प्रदान करता है, जिससे आप सीधे HTML में स्टाइलिंग कर सकते हैं। यह एक अधिक लचीला और कस्टमाइज़ेबल डिज़ाइन सिस्टम प्रदान करता है।
    Example:

    <div class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
    Tailwind Button
</div>

    1. अत्यधिक अनुकूलन क्षमता (Highly Customizable):
      Tailwind CSS का कॉन्फ़िगरेशन फाइल के माध्यम से आसान कस्टमाइजेशन होता है, जिससे आप रंग, स्पेसिंग, और अन्य डिज़ाइन तत्वों को अपनी आवश्यकताओं के अनुसार सेट कर सकते हैं।
    2. JIT मोड (Just-In-Time Mode):
      Tailwind का JIT मोड केवल आवश्यक क्लासेज़ को उत्पन्न करता है, जिससे CSS का बंडल साइज छोटा होता है और परफॉर्मेंस में सुधार होता है।
    3. कोई प्री-डिज़ाइन कम्पोनेंट्स नहीं (No Pre-designed Components):
      Tailwind CSS प्री-डिज़ाइन कम्पोनेंट्स प्रदान नहीं करता, जिससे आपको अधिक नियंत्रण और स्वतंत्रता मिलती है।

    Bootstrap की विशेषताएँ (Features of Bootstrap)

    कम्पोनेंट-आधारित दृष्टिकोण (Component-Based Approach):
    Bootstrap कई प्री-डिज़ाइन कम्पोनेंट्स जैसे कि बटन, नेवबार, कार्ड आदि प्रदान करता है, जिससे विकास प्रक्रिया तेज़ होती है।
    Example:

    <button class="btn btn-primary">Bootstrap Button</button>

    1. रेस्पॉन्सिव ग्रिड सिस्टम (Responsive Grid System):
      Bootstrap का रेस्पॉन्सिव ग्रिड सिस्टम आपकी वेबसाइट को विभिन्न डिवाइसों पर अनुकूल बनाने में मदद करता है।
    2. थीम और वेरिएबल्स (Themes and Variables):
      Bootstrap CSS वेरिएबल्स और थीम का समर्थन करता है, जिससे आप आसानी से ब्रांडिंग के लिए कस्टमाइज़ेशन कर सकते हैं।
    3. डॉक्यूमेंटेशन और कम्युनिटी सपोर्ट (Documentation and Community Support):
      Bootstrap की व्यापक डॉक्यूमेंटेशन और एक बड़ी डेवलपर कम्युनिटी है जो आपकी समस्याओं को हल करने में मदद करती है।

    Tailwind CSS के फायदे (Advantages of Tailwind CSS)

    1. कस्टमाइजेशन की स्वतंत्रता (Freedom of Customization):
      Tailwind CSS आपको बिना किसी प्री-डिज़ाइन बाधाओं के पूरी स्वतंत्रता देता है, जिससे आप अपने डिज़ाइन को आसानी से कस्टमाइज़ कर सकते हैं।
    2. कम बंडल साइज (Smaller Bundle Size):
      JIT मोड के कारण Tailwind CSS के साथ आपका CSS बंडल साइज छोटा रहता है, जो परफॉर्मेंस में सुधार करता है।
    3. तेज़ प्रोटोटाइपिंग (Rapid Prototyping):
      Tailwind की उपयोगिता क्लासेज़ के माध्यम से तेज़ी से प्रोटोटाइपिंग करना संभव है।

    Bootstrap के फायदे (Advantages of Bootstrap)

    1. तेज़ विकास (Fast Development):
      Bootstrap के प्री-डिज़ाइन कम्पोनेंट्स आपको तुरंत प्रभावशाली UI बनाने में मदद करते हैं।
    2. संगठित डिज़ाइन (Consistent Design):
      Bootstrap के साथ, आप बिना अधिक कस्टम CSS के संगठित डिज़ाइन बना सकते हैं।
    3. उपयोग में आसान (Ease of Use):
      Bootstrap का सेटअप और उपयोग बेहद आसान है, खासकर उन लोगों के लिए जो CSS में नए हैं।

    Tailwind CSS के नुकसान (Disadvantages of Tailwind CSS)

    1. क्लास ओवरहेड (Class Overhead):
      Tailwind का उपयोग करते समय HTML में कई क्लासेज़ हो सकती हैं, जिससे कोड जटिल हो सकता है।
    2. सीखने की प्रक्रिया (Learning Curve):
      Tailwind CSS की उपयोगिता क्लासेज़ को समझने में समय लग सकता है, खासकर उन लोगों के लिए जो पारंपरिक CSS का उपयोग करते हैं।

    Bootstrap के नुकसान (Disadvantages of Bootstrap)

    1. सीमित अनुकूलन क्षमता (Limited Customization):
      Bootstrap के प्री-डिज़ाइन कम्पोनेंट्स कभी-कभी डिज़ाइन को कस्टमाइज़ करने में सीमाएं डाल सकते हैं।
    2. बड़ा बंडल साइज (Larger Bundle Size):
      Bootstrap का बंडल साइज बड़ा हो सकता है, जिससे लोड टाइम बढ़ सकता है।

    किसे चुनें? (Which One to Choose?)

    • Tailwind CSS: यदि आप अधिक कस्टमाइज़ेशन और स्वतंत्रता चाहते हैं और आपके पास समय है Tailwind के उपयोगिता-प्रथम दृष्टिकोण को सीखने का, तो Tailwind CSS आपके लिए सही हो सकता है।
    • Bootstrap: यदि आप जल्दी से एक संगठित और प्रभावशाली UI बनाना चाहते हैं और CSS में नए हैं, तो Bootstrap एक अच्छा विकल्प हो सकता है।

    डार्क मोड (Dark Mode)

    डार्क मोड आजकल की वेब डिज़ाइन में बहुत लोकप्रिय है, और Tailwind CSS के साथ इसे लागू करना बेहद आसान है। Tailwind CSS में डार्क मोड सपोर्ट बिल्ट-इन होता है, जिससे आप आसानी से लाइट और डार्क थीम के बीच स्विच कर सकते हैं।

    डार्क मोड को सक्रिय करना (Activating Dark Mode)

    Tailwind CSS में डार्क मोड को सक्षम करने के लिए, आपको अपनी tailwind.config.js फाइल में डार्क मोड को कॉन्फ़िगर करना होगा।

    // tailwind.config.js
module.exports = {
  darkMode: 'class', // या 'media' भी उपयोग कर सकते हैं
  theme: {
    extend: {
      // अपनी थीम कस्टमाइजेशन यहाँ करें
    },
  },
  variants: {
    extend: {
      // अपनी वेरिएंट्स कस्टमाइजेशन यहाँ करें
    },
  },
  plugins: [],
}

    डार्क मोड को दो तरीकों से सक्रिय किया जा सकता है:

    1. ‘class’ के साथ: यह तरीका आपको डार्क मोड को मैन्युअली सक्षम करने के लिए एक CSS क्लास का उपयोग करने की अनुमति देता है। आप dark क्लास का उपयोग करके थीम स्विच कर सकते हैं।

    <div class="dark:bg-gray-800 dark:text-white">
  <h1 class="text-2xl">Dark Mode Example</h1>
  <p>यह एक डार्क मोड का उदाहरण है।</p>
</div>

    2. ‘media’ के साथ: यह तरीका उपयोगकर्ता की सिस्टम थीम के आधार पर स्वचालित रूप से डार्क मोड को सक्षम करता है।

    module.exports = {
  darkMode: 'media',
}

    डार्क मोड का उपयोग (Using Dark Mode)

    डार्क मोड को लागू करने के लिए, Tailwind CSS की उपयोगिता क्लासेज़ का उपयोग करके विभिन्न रंग और बैकग्राउंड सेटिंग्स को कस्टमाइज़ किया जा सकता है।

    <div class="bg-white dark:bg-gray-900 text-black dark:text-white p-4">
  <h1 class="text-xl font-bold">डार्क मोड</h1>
  <p>डार्क मोड का समर्थन करने वाला टेक्स्ट।</p>
</div>

    Tailwind प्लगइन्स का उपयोग (Using Tailwind Plugins)

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

    लोकप्रिय Tailwind प्लगइन्स (Popular Tailwind Plugins)

    1. Tailwind Typography Plugin:
      • उपयोग: रिच टेक्स्ट सामग्री के लिए बेहतर स्टाइलिंग प्रदान करता है।
      • स्थापना:
        npm install @tailwindcss/typography
      • कॉन्फ़िगरेशन:

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

    उदाहरण:

    <article class="prose dark:prose-dark">
  <h1>Tailwind Typography Plugin</h1>
  <p>यह Tailwind Typography Plugin का उदाहरण है।</p>
</article>

    2. Tailwind Forms Plugin:

      • उपयोग: फ़ॉर्म नियंत्रण के लिए सरल और उत्तरदायी स्टाइलिंग।

    स्थापना:

    npm install @tailwindcss/forms

    कॉन्फ़िगरेशन:

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

    उदाहरण:

    <form>
  <label class="block">
    <span class="text-gray-700">Email</span>
    <input type="email" class="mt-1 block w-full" placeholder="you@example.com">
  </label>
</form>

    3. Tailwind Aspect Ratio Plugin:

      • उपयोग: इमेजेस और वीडियोज़ के लिए उत्तरदायी अनुपात बनाए रखें।

    स्थापना:

    npm install @tailwindcss/aspect-ratio

    कॉन्फ़िगरेशन:

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

    उदाहरण:

    <div class="aspect-w-16 aspect-h-9">
  <iframe src="https://www.youtube.com/embed/xyz" frameborder="0" allowfullscreen></iframe>
</div>

    Tailwind प्लगइन्स का लाभ (Benefits of Using Tailwind Plugins)

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

    यह भी जानें

    chapter 6 box model Good Vibes Only

    अध्याय 6: बॉक्स मॉडल (Box Model)

    tailwind css Good Vibes Only

    Tailwind CSS: आधुनिक वेब डिज़ाइन के लिए उपयोगी CSS फ्रेमवर्क

    chapter 3 cc selectors Good Vibes Only

    अध्याय 3: CSS सिलेक्टर्स

    chapter 8 layout techniques Good Vibes Only

    अध्याय 8: लेआउट तकनीकें (Layout Techniques)



    Table of Contents

    → Index