Tailwind CSS Academy · पाठ

प्लगइन जोड़ना और कॉन्फ़िगर करना

@tailwindcss/typography और @tailwindcss/forms जैसे आधिकारिक Tailwind प्लगइन सक्षम करें और उन्हें tailwind.config.js के भीतर कॉन्फ़िगर करें।

पाठ 4, कुल 4 में से13 चरण

प्लगइन जोड़ना और कॉन्फ़िगर करना, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Tailwind प्लगइन क्या करते हैं

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

आधिकारिक Tailwind प्लगइन पारिस्थितिकी तंत्र

Tailwind टीम चार प्रथम-पक्ष प्लगइन का रखरखाव करती है। प्रत्येक प्लगइन ऐसी विशिष्ट समस्या हल करता है जो मुख्य उपयोगिता क्लास के दायरे से बाहर होती है। @tailwindcss/typography Markdown से बने समृद्ध HTML कंटेंट को शैली देता है। @tailwindcss/forms ब्राउज़र की फ़ॉर्म शैलियों को रीसेट करता है, जिससे कस्टमाइज़ करना आसान हो जाता है। @tailwindcss/aspect-ratio पुराने ब्राउज़र के लिए आस्पेक्ट रेशियो उपयोगिताएँ जोड़ता है। @tailwindcss/container-queries कंटेनर क्वेरी समर्थन को उपयोगिता क्लास के रूप में जोड़ता है।

# Install official Tailwind plugins
npm install @tailwindcss/typography
npm install @tailwindcss/forms
npm install @tailwindcss/aspect-ratio
npm install @tailwindcss/container-queries

कॉन्फ़िगरेशन में प्लगइन जोड़ना

प्लगइन को tailwind.config.js के plugins ऐरे में पंजीकृत किया जाता है। बस प्लगइन को require() करें और उसे ऐरे में जोड़ दें। जिन प्लगइन को कॉन्फ़िगरेशन विकल्पों की आवश्यकता नहीं होती, उन्हें सीधे जोड़ा जाता है। विकल्प स्वीकार करने वाले प्लगइन को कॉन्फ़िगरेशन ऑब्जेक्ट वाले फ़ंक्शन के रूप में कॉल किया जाता है। एक ही ऐरे में कई प्लगइन बिना टकराव के साथ-साथ रह सकते हैं।

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: { extend: {} },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ],
};

@tailwindcss/typography का उपयोग करना

@tailwindcss/typography प्लगइन एक prose क्लास (और उसके वैरिएंट) जोड़ता है, जो कच्चे HTML कंटेंट पर सुंदर टाइपोग्राफ़िक शैलियाँ लागू करता है—जैसे CMS या ब्लॉग से प्राप्त रेंडर किया गया Markdown। किसी कंटेनर पर prose लागू करने पर उसके सभी वंशज तत्व (शीर्षक, अनुच्छेद, सूचियाँ, कोड ब्लॉक और ब्लॉककोट) अपने-आप शैलीबद्ध हो जाते हैं; हर अलग तत्व में क्लास जोड़ने की आवश्यकता नहीं होती।

<!-- Enable prose styling on a container -->
<article class="prose prose-lg dark:prose-invert max-w-none">
  <h1>My Blog Post</h1>
  <p>This paragraph is automatically styled with readable typography.</p>
  <ul>
    <li>List items look great too</li>
    <li>No extra classes needed</li>
  </ul>
  <pre><code>code blocks are styled</code></pre>
</article>

@tailwindcss/typography को कॉन्फ़िगर करना

टाइपोग्राफ़ी प्लगइन को प्लगइन विकल्पों और Tailwind थीम, दोनों के माध्यम से कॉन्फ़िगर किया जा सकता है। strategy: 'class' का उपयोग करने पर prose शैलियाँ केवल तभी लागू होती हैं जब prose क्लास स्पष्ट रूप से जोड़ी गई हो (आधार शैलियों के विपरीत)। अपनी कॉन्फ़िगरेशन की theme.typography कुंजी के माध्यम से prose का आकार-क्रम (sm, base, lg, xl, 2xl) कस्टमाइज़ करें और विशिष्ट तत्वों की शैलियों को ओवरराइड करें।

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography')({
      // No extra options needed for most uses
    }),
  ],
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.gray.700'),
            'h1, h2, h3': { color: theme('colors.gray.900') },
            a: { color: theme('colors.blue.600') },
          },
        },
      }),
    },
  },
};

@tailwindcss/forms का उपयोग करना

@tailwindcss/forms प्लगइन इनपुट, चयन बॉक्स, टेक्स्ट एरिया, चेकबॉक्स और रेडियो बटन जैसे फ़ॉर्म तत्वों की डिफ़ॉल्ट ब्राउज़र शैलियों को रीसेट करता है। इसके बिना अलग-अलग ब्राउज़र इन नियंत्रणों को बिल्कुल अलग ढंग से रेंडर करते हैं। इसके साथ सभी फ़ॉर्म तत्वों को एक समान, न्यूनतम आधार शैली मिलती है, जिसे Tailwind की उपयोगिता क्लास और बेहतर बना सकती हैं। रीसेट को वैश्विक रूप से लागू करने के बजाय प्रत्येक तत्व के लिए अलग-अलग अपनाने हेतु strategy: 'class' चुनें।

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms')({
      strategy: 'class', // opt-in: use class='form-input' etc
      // strategy: 'base' (default) — applies to all form elements
    }),
  ],
};

<!-- With class strategy, add the form-* class -->
<input type="text" class="form-input rounded-lg border-gray-300 w-full" />
<select class="form-select rounded-lg" />
<input type="checkbox" class="form-checkbox text-blue-600" />

@tailwindcss/container-queries का उपयोग करना

CSS कंटेनर क्वेरी घटकों को व्यूपोर्ट के बजाय उनके पैरेंट कंटेनर के आकार के अनुसार प्रतिक्रिया देने देती हैं। @tailwindcss/container-queries प्लगइन @container चिह्न और @sm:, @md:, @lg: प्रतिक्रियाशील प्रीफ़िक्स जोड़ता है। ये प्रीफ़िक्स ब्रेकपॉइंट की तरह काम करते हैं, लेकिन निकटतम कंटेनर के सापेक्ष। ऐसे वास्तव में पुन: उपयोग योग्य घटक बनाने के लिए यह बहुत उपयोगी है, जो जहाँ भी रखे जाएँ वहाँ के संदर्भ के अनुसार ढल सकें।

<div class="@container">
  <div class="flex flex-col @md:flex-row gap-4">
    <div class="@md:w-1/3">
      <!-- Sidebar inside the container -->
    </div>
    <div class="@md:flex-1">
      <!-- Content area -->
    </div>
  </div>
</div>

सामुदायिक प्लगइन

आधिकारिक प्लगइन के अलावा, सामुदायिक प्लगइन का समृद्ध पारिस्थितिकी तंत्र Tailwind में एनीमेशन लाइब्रेरी, स्क्रॉलबार उपयोगिताएँ, ग्रिड पैटर्न और बहुत कुछ जोड़ता है। लोकप्रिय उदाहरणों में CSS एनीमेशन के लिए tailwindcss-animate (shadcn/ui में उपयोग किया जाता है), स्क्रॉलबार शैली के लिए tailwind-scrollbar, और Headless UI स्थिति वैरिएंट के लिए @headlessui/tailwindcss शामिल हैं। प्लगइन जोड़ने से पहले उनके बारे में जाँच करें—डाउनलोड संख्या, रखरखाव की स्थिति और बंडल पर प्रभाव देखें।

// tailwind.config.js
module.exports = {
  plugins: [
    require('tailwindcss-animate'),
    require('tailwind-scrollbar'),
  ],
};

<!-- Use animation plugin classes -->
<div class="animate-in fade-in slide-in-from-bottom-4 duration-300">
  Animated content
</div>

इनलाइन प्लगइन लिखना

आप Tailwind के tailwindcss/plugin मॉड्यूल से मिलने वाले plugin फ़ंक्शन का उपयोग करके plugins ऐरे के अंदर ही कस्टम प्लगइन लिख सकते हैं। अलग फ़ाइल बनाए बिना कुछ कस्टम उपयोगिताएँ या घटक जोड़ने के लिए यह उपयोगी है। plugin फ़ंक्शन को एक सहायक ऑब्जेक्ट मिलता है, जिसमें addUtilities, addComponents, addBase और addVariant विधियाँ होती हैं।

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.text-shadow-sm': { 'text-shadow': '0 1px 2px rgba(0,0,0,0.1)' },
        '.text-shadow': { 'text-shadow': '0 2px 4px rgba(0,0,0,0.2)' },
        '.text-shadow-lg': { 'text-shadow': '0 4px 8px rgba(0,0,0,0.3)' },
        '.text-shadow-none': { 'text-shadow': 'none' },
      });
    }),
  ],
};

प्लगइन का क्रम और टकराव

प्लगइन ऐरे में जिस क्रम में दिखाई देते हैं, उसी क्रम में लागू किए जाते हैं। यदि दो प्लगइन एक ही क्लास नाम वाली उपयोगिताएँ जोड़ते हैं, तो बाद वाला प्लगइन प्रभावी होता है। ध्यान रखें कि addBase का उपयोग करने वाले प्लगइन Tailwind की आधार परत में शैलियाँ डालते हैं, जो मौजूदा रीसेट शैलियों के साथ परस्पर प्रभाव डाल सकती हैं। कई प्लगइन जोड़ने के बाद अप्रत्याशित ओवरराइड या दोहराई गई घोषणाओं के लिए संकलित CSS की जाँच करके टकरावों का परीक्षण करें।

// Order matters when plugins could conflict
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),      // runs first
    require('./plugins/my-forms'),       // can override forms plugin if needed
    require('@tailwindcss/typography'), // independent, no conflict
  ],
};

प्लगइन इंस्टॉलेशन की पुष्टि करना

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

# Verify plugin is installed
npm list @tailwindcss/typography

# Check if prose class appears in built CSS
npx tailwindcss build | grep '.prose'

# Or build to a file and search
npx tailwindcss -i ./input.css -o ./out.css && grep '.prose' out.css | head -5

त्वरित जाँच

Tailwind प्लगइन जोड़ने और कॉन्फ़िगर करने की अपनी समझ की जाँच करें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

इस पाठ में आपने सीखा: Tailwind प्लगइन कॉन्फ़िगरेशन के plugins ऐरे में पंजीकृत किए जाते हैं; चार आधिकारिक प्लगइन टाइपोग्राफ़ी, फ़ॉर्म, आस्पेक्ट रेशियो और कंटेनर क्वेरी को शामिल करते हैं; और आप कस्टम उपयोगिताओं के लिए plugin() सहायक का उपयोग करके इनलाइन प्लगइन लिख सकते हैं। आगे हम अपने Tailwind प्रोजेक्ट में कस्टम रंग, फ़ॉन्ट और स्पेसिंग जोड़ना सीखेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “प्लगइन जोड़ना और कॉन्फ़िगर करना” पाठ निःशुल्क है?

हाँ—“प्लगइन जोड़ना और कॉन्फ़िगर करना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“प्लगइन जोड़ना और कॉन्फ़िगर करना” में मैं क्या सीखूँगा?

@tailwindcss/typography और @tailwindcss/forms जैसे आधिकारिक Tailwind प्लगइन सक्षम करें और उन्हें tailwind.config.js के भीतर कॉन्फ़िगर करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“प्लगइन जोड़ना और कॉन्फ़िगर करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Tailwind CSS Academy पर वापस जाएँ