टेलविंड सीएसएस इनलाइन प्लगइन सिस्टीम: कॉन्फिगरेशन एक्सटेंशन्स

टेलविंड सीएसएस ही एक युटिलिटी-फर्स्ट सीएसएस फ्रेमवर्क आहे जी वेब ॲप्लिकेशन्सना स्टाईल करण्यासाठी एक शक्तिशाली आणि लवचिक दृष्टिकोन प्रदान करते. त्याची मुख्य शक्ती म्हणजे प्लगइन सिस्टीमद्वारे त्याची विस्तारक्षमता. टेलविंड अनेक अधिकृत प्लगइन्स ऑफर करत असले तरी, इनलाइन प्लगइन सिस्टीम डेव्हलपर्सना थेट त्यांच्या tailwind.config.js फाईलमध्ये फ्रेमवर्कची कार्यक्षमता अधिक सानुकूलित आणि विस्तारित करण्याची परवानगी देते. हा दृष्टिकोन विशिष्ट प्रोजेक्टच्या गरजेनुसार टेलविंडला अनुकूल बनवण्याचा, पुन्हा वापरता येण्याजोगे कंपोनंट्स तयार करण्याचा आणि डिझाइन सिस्टीममध्ये सुसंगतता राखण्याचा एक सोयीस्कर आणि कार्यक्षम मार्ग प्रदान करतो. हा लेख टेलविंड सीएसएस इनलाइन प्लगइन सिस्टीम समजून घेण्यासाठी आणि वापरण्यासाठी एक व्यापक मार्गदर्शक आहे, जो कॉन्फिगरेशन एक्सटेंशनवर लक्ष केंद्रित करतो.

टेलविंड सीएसएस प्लगइन सिस्टीम समजून घेणे

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

टेलविंड सीएसएसमधील प्लगइन्सचे मुख्यत्वे दोन प्रकारांमध्ये वर्गीकरण केले जाऊ शकते:

• अधिकृत प्लगइन्स: हे प्लगइन्स टेलविंड सीएसएस टीमद्वारे मेंटेन केले जातात आणि सामान्यतः विविध प्रोजेक्ट्समध्ये मोठ्या प्रमाणावर लागू होणारी वैशिष्ट्ये जोडतात. उदाहरणांमध्ये फॉर्म्स, टायपोग्राफी आणि ॲस्पेक्ट रेशोसाठी प्लगइन्स समाविष्ट आहेत.
• इनलाइन प्लगइन्स: हे तुमच्या tailwind.config.js फाईलमध्ये थेट परिभाषित केलेले कस्टम प्लगइन्स आहेत. ते प्रोजेक्ट-विशिष्ट कस्टमायझेशन, पुन्हा वापरता येण्याजोग्या कंपोनंट व्याख्या आणि डिझाइन सिस्टीम नियमांची अंमलबजावणी करण्यासाठी आदर्श आहेत.

इनलाइन प्लगइन्सची शक्ती

इनलाइन प्लगइन्स पारंपरिक सीएसएस किंवा बाह्य प्लगइन फाइल्सपेक्षा अनेक फायदे देतात:

• को-लोकेशन (एकाच ठिकाणी असणे): ते थेट तुमच्या टेलविंड कॉन्फिगरेशन फाईलमध्ये असतात, ज्यामुळे ते शोधणे आणि व्यवस्थापित करणे सोपे होते.
• सरलता: ते टेलविंडची कार्यक्षमता वाढवण्यासाठी एक सरळ API प्रदान करतात.
• संदर्भ (Context): त्यांना टेलविंड कॉन्फिगरेशन ऑब्जेक्टमध्ये प्रवेश असतो, ज्यामुळे ते तुमच्या थीम आणि सेटिंग्जवर आधारित स्टाइल्स डायनॅमिकली तयार करू शकतात.
• कस्टमायझेशन: ते तुम्हाला तुमच्या प्रोजेक्टच्या गरजेनुसार अत्यंत सानुकूलित सोल्यूशन्स तयार करण्यास सक्षम करतात.

टेलविंड सीएसएस कॉन्फिगर करणे: द tailwind.config.js फाईल

tailwind.config.js फाईल ही तुमच्या टेलविंड सीएसएस प्रोजेक्टसाठी केंद्रीय कॉन्फिगरेशन फाईल आहे. हे तुम्हाला फ्रेमवर्कच्या विविध पैलूंना सानुकूलित करण्याची परवानगी देते, ज्यात:

• थीम: तुमचे कलर पॅलेट, टायपोग्राफी, स्पेसिंग आणि इतर डिझाइन टोकन्स परिभाषित करा.
• व्हेरियंट्स: विविध अवस्थांसाठी (उदा. hover, focus, active) आणि मीडिया क्वेरींसाठी कस्टम व्हेरियंट्स जोडा.
• प्लगइन्स: इनलाइन प्लगइन्ससह टेलविंड सीएसएस प्लगइन्सची नोंदणी आणि कॉन्फिगरेशन करा.
• कंटेंट: तुमच्या HTML आणि इतर टेम्पलेट कोड असलेल्या फाइल्स निर्दिष्ट करा, ज्यामुळे टेलविंडला प्रोडक्शन बिल्ड दरम्यान न वापरलेल्या स्टाइल्स काढून टाकण्याची परवानगी मिळते.

येथे tailwind.config.js फाईलचे एक मूलभूत उदाहरण आहे:

            module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3490dc',
        secondary: '#ffed4a',
      },
      fontFamily: {
        'sans': ['Roboto', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

            

              
                Copy
              
            
          

थीम विस्तारित करणे: theme.extend ऑब्जेक्ट

theme.extend ऑब्जेक्ट हा टेलविंडच्या डीफॉल्ट थीममध्ये बदल करण्याचा प्राथमिक मार्ग आहे. हे तुम्हाला विद्यमान थीम की मध्ये नवीन मूल्ये जोडण्याची परवानगी देते, त्यांना पूर्णपणे ओव्हरराइड न करता. यामुळे हे सुनिश्चित होते की तुम्ही टेलविंडच्या डीफॉल्ट स्टाइल्स कायम ठेवता आणि त्याच वेळी तुमची स्वतःची कस्टमायझेशन्स जोडता.

येथे काही सामान्य थीम एक्सटेंशन्स आहेत:

• रंग (Colors): तुमच्या प्रोजेक्टचे कलर पॅलेट परिभाषित करा.
• स्पेसिंग (Spacing): मार्जिन, पॅडिंग आणि गॅप युटिलिटीजसाठी स्पेसिंग मूल्ये सानुकूलित करा.
• टायपोग्राफी (Typography): फॉन्ट फॅमिली, फॉन्ट साईज, लाइन हाइट्स आणि लेटर स्पेसिंग कॉन्फिगर करा.
• स्क्रीन्स (Screens): रिस्पॉन्सिव्ह डिझाइनसाठी कस्टम ब्रेकपॉइंट्स परिभाषित करा.
• बॉर्डर रेडियस (Border Radius): कस्टम बॉर्डर रेडियस मूल्ये जोडा.
• बॉक्स शॅडो (Box Shadow): कस्टम बॉक्स शॅडो स्टाइल्स परिभाषित करा.

उदाहरण: कस्टम रंग जोडणे

तुमच्या टेलविंड थीममध्ये कस्टम रंग जोडण्यासाठी, तुम्ही theme.extend.colors ऑब्जेक्ट वापरू शकता:

            module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {
      colors: {
        'brand-primary': '#007bff',
        'brand-secondary': '#6c757d',
        'brand-success': '#28a745',
        'brand-danger': '#dc3545',
      },
    },
  },
  plugins: [],
};

            

              
                Copy
              
            
          

हे तुमच्या प्रोजेक्टमध्ये खालील कलर युटिलिटीज जोडेल:

• .text-brand-primary
• .bg-brand-primary
• .border-brand-primary
• .text-brand-secondary
• .bg-brand-secondary
• .border-brand-secondary
• आणि असेच...

उदाहरण: स्पेसिंग मूल्ये विस्तारित करणे

तुम्ही मार्जिन, पॅडिंग आणि गॅप युटिलिटीजसाठी वापरलेली स्पेसिंग मूल्ये देखील वाढवू शकता:

            module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
  plugins: [],
};

            

              
                Copy
              
            
          

हे तुमच्या प्रोजेक्टमध्ये खालील स्पेसिंग युटिलिटीज जोडेल:

• .m-72 (margin: 18rem)
• .p-84 (padding: 21rem)
• .gap-96 (gap: 24rem)

इनलाइन प्लगइन्स: थीम एक्सटेंशन्सच्या पलीकडे

theme.extend ऑब्जेक्ट तुम्हाला टेलविंडची थीम सानुकूलित करण्याची परवानगी देतो, तर इनलाइन प्लगइन्स आणखी लवचिकता प्रदान करतात. ते तुम्हाला हे करण्याची परवानगी देतात:

• बेस स्टाइल्स जोडा (Add Base Styles): HTML घटकांवर बेस स्टाइल्स लागू करा.
• कंपोनंट्स जोडा (Add Components): पुन्हा वापरता येण्याजोगे कंपोनंट स्टाइल्स तयार करा.
• युटिलिटीज जोडा (Add Utilities): कस्टम युटिलिटी क्लासेस परिभाषित करा.
• व्हेरियंट्स जोडा (Add Variants): विद्यमान युटिलिटीजसाठी कस्टम व्हेरियंट्स तयार करा.

इनलाइन प्लगइन परिभाषित करण्यासाठी, तुम्ही तुमच्या tailwind.config.js फाईलमधील plugins ॲरेमध्ये एक फंक्शन जोडता. या फंक्शनला addBase, addComponents, addUtilities, आणि addVariant हेल्पर्स आर्गुमेंट्स म्हणून मिळतील.

            module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addBase, addComponents, addUtilities, addVariant }) {
      // Your plugin logic here
    },
  ],
};

            

              
                Copy
              
            
          

addBase: बेस स्टाइल्स लागू करणे

addBase हेल्पर तुम्हाला HTML घटकांवर बेस स्टाइल्स लागू करण्याची परवानगी देतो. हे body, h1, p, आणि a सारख्या घटकांसाठी डीफॉल्ट स्टाइल्स सेट करण्यासाठी उपयुक्त आहे.

उदाहरणार्थ, तुम्ही body घटकासाठी डीफॉल्ट फॉन्ट फॅमिली आणि बॅकग्राउंड कलर सेट करण्यासाठी addBase वापरू शकता:

            module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addBase }) {
      addBase({
        'body': {
          fontFamily: '"Helvetica Neue", Arial, sans-serif',
          backgroundColor: '#f0f2f5',
        },
      });
    },
  ],
};

            

              
                Copy
              
            
          

हे तुमच्या ॲप्लिकेशनच्या प्रत्येक पानावर body घटकासाठी निर्दिष्ट फॉन्ट फॅमिली आणि बॅकग्राउंड कलर लागू करेल.

addComponents: पुन्हा वापरता येण्याजोगे कंपोनंट स्टाइल्स तयार करणे

addComponents हेल्पर तुम्हाला पुन्हा वापरता येण्याजोगे कंपोनंट स्टाइल्स तयार करण्याची परवानगी देतो. हे बटणे, कार्ड्स आणि नेव्हिगेशन मेन्यू सारखे सामान्य UI घटक परिभाषित करण्यासाठी उपयुक्त आहे.

उदाहरणार्थ, तुम्ही विशिष्ट स्टाइल्ससह बटन कंपोनंट परिभाषित करण्यासाठी addComponents वापरू शकता:

            module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-primary': {
          backgroundColor: '#007bff',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#0069d9',
          },
        },
      });
    },
  ],
};

            

              
                Copy
              
            
          

हे दोन नवीन CSS क्लासेस तयार करेल: .btn आणि .btn-primary. त्यानंतर तुम्ही तुमच्या HTML मध्ये बटणाच्या स्टाइल्स लागू करण्यासाठी हे क्लासेस वापरू शकता:

            <button class="btn btn-primary">Click me</button>
            

              
                Copy
              
            
          

addUtilities: कस्टम युटिलिटी क्लासेस परिभाषित करणे

addUtilities हेल्पर तुम्हाला कस्टम युटिलिटी क्लासेस परिभाषित करण्याची परवानगी देतो. हे लहान, पुन्हा वापरता येण्याजोग्या स्टाइल्स तयार करण्यासाठी उपयुक्त आहे ज्या अनेक घटकांवर लागू केल्या जाऊ शकतात.

उदाहरणार्थ, तुम्ही टेक्स्ट ओव्हरफ्लोला इलिप्सिसमध्ये सेट करणारा युटिलिटी क्लास तयार करण्यासाठी addUtilities वापरू शकता:

            module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        '.truncate': {
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        },
      });
    },
  ],
};

            

              
                Copy
              
            
          

हे एक नवीन CSS क्लास तयार करेल: .truncate. त्यानंतर तुम्ही तुमच्या HTML मध्ये लांब टेक्स्ट स्ट्रिंग्स कापण्यासाठी हा क्लास वापरू शकता:

            <p class="truncate">This is a very long text string that will be truncated.</p>
            

              
                Copy
              
            
          

addVariant: कस्टम व्हेरियंट्स तयार करणे

addVariant हेल्पर तुम्हाला विद्यमान युटिलिटीजसाठी कस्टम व्हेरियंट्स तयार करण्याची परवानगी देतो. हे टेलविंडच्या डीफॉल्ट युटिलिटीजमध्ये नवीन स्टेट्स किंवा मीडिया क्वेरी जोडण्यासाठी उपयुक्त आहे.

उदाहरणार्थ, तुम्ही एक व्हेरियंट तयार करण्यासाठी addVariant वापरू शकता जो केवळ एखादा घटक विशिष्ट स्थितीत असतो तेव्हाच एक स्टाईल लागू करतो, जसे की focus-visible:

            const plugin = require('tailwindcss/plugin')

module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('focus-visible', '&:focus-visible')
    })
  ],
}

            

              
                Copy
              
            
          

हे एक नवीन व्हेरियंट तयार करेल: focus-visible. त्यानंतर तुम्ही हा व्हेरियंट टेलविंडच्या कोणत्याही विद्यमान युटिलिटीजसह वापरू शकता:

            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">Click me</button>
            

              
                Copy
              
            
          

या उदाहरणात, focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 क्लासेस तेव्हाच लागू होतील जेव्हा बटणावर फोकस असेल आणि ब्राउझर :focus-visible स्यूडो-क्लासचे समर्थन करत असेल.

प्रगत कॉन्फिगरेशन तंत्र

सीएसएस व्हेरिएबल्स (कस्टम प्रॉपर्टीज) वापरणे

सीएसएस व्हेरिएबल्स (ज्यांना कस्टम प्रॉपर्टीज म्हणूनही ओळखले जाते) तुमच्या ॲप्लिकेशनमध्ये स्टाइल्स व्यवस्थापित करण्याचा आणि पुन्हा वापरण्याचा एक शक्तिशाली मार्ग प्रदान करतात. तुम्ही तुमच्या टेलविंड कॉन्फिगरेशनमध्ये सीएसएस व्हेरिएबल्स परिभाषित करू शकता आणि ते तुमच्या इनलाइन प्लगइन्समध्ये वापरू शकता.

उदाहरणार्थ, तुम्ही तुमच्या प्राथमिक रंगासाठी एक सीएसएस व्हेरिएबल परिभाषित करू शकता:

            module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
      },
    },
  },
  plugins: [
    function ({ addBase }) {
      addBase({
        ':root': {
          '--color-primary': '#007bff',
        },
      });
    },
  ],
};

            

              
                Copy
              
            
          

या उदाहरणात, आपण --color-primary नावाचा एक सीएसएस व्हेरिएबल परिभाषित करतो आणि त्याचे मूल्य #007bff सेट करतो. त्यानंतर आपण theme.extend.colors ऑब्जेक्टमध्ये हा व्हेरिएबल वापरून आपला primary रंग परिभाषित करतो. यामुळे आपल्याला फक्त --color-primary व्हेरिएबलचे मूल्य बदलून आपल्या संपूर्ण ॲप्लिकेशनमध्ये प्राथमिक रंग सहजपणे अपडेट करता येतो.

रिस्पॉन्सिव्ह डिझाइन विचार

इनलाइन प्लगइन्स तयार करताना, रिस्पॉन्सिव्ह डिझाइनचा विचार करणे महत्त्वाचे आहे. तुम्ही स्क्रीनच्या आकारानुसार स्टाइल्स लागू करण्यासाठी टेलविंडचे रिस्पॉन्सिव्ह प्रिफिक्सेस (उदा., sm:, md:, lg:, xl:) वापरू शकता.

उदाहरणार्थ, तुम्ही एक कंपोनंट तयार करू शकता ज्यात वेगवेगळ्या स्क्रीन आकारांवर वेगवेगळी पॅडिंग मूल्ये आहेत:

            module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.responsive-card': {
          padding: '.5rem',
          '@screen sm': {
            padding: '1rem',
          },
          '@screen md': {
            padding: '1.5rem',
          },
          '@screen lg': {
            padding: '2rem',
          },
        },
      });
    },
  ],
};

            

              
                Copy
              
            
          

या उदाहरणात, .responsive-card कंपोनंटला लहान स्क्रीनवर .5rem, मध्यम स्क्रीनवर 1rem, मोठ्या स्क्रीनवर 1.5rem, आणि अतिरिक्त-मोठ्या स्क्रीनवर 2rem पॅडिंग असेल.

ॲक्सेसिबिलिटी विचार

वेब ॲप्लिकेशन्स विकसित करताना ॲक्सेसिबिलिटी हा एक महत्त्वाचा विचार आहे. इनलाइन प्लगइन्स तयार करताना, तुमचे कंपोनंट्स प्रत्येकासाठी वापरण्यायोग्य आहेत याची खात्री करण्यासाठी ॲक्सेसिबिलिटीच्या सर्वोत्तम पद्धतींचे पालन करा.

उदाहरणार्थ, बटन कंपोनंट तयार करताना, सहायक तंत्रज्ञानावर अवलंबून असलेल्या वापरकर्त्यांसाठी ॲक्सेसिबिलिटी सुधारण्यासाठी योग्य ARIA ॲट्रिब्यूट्स प्रदान केल्याची खात्री करा.

            module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.accessible-button': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
          cursor: 'pointer',
          '&:focus': {
            outline: '2px solid blue',
          },
        },
      });
    },
  ],
};

            

              
                Copy
              
            
          

हे उदाहरण कर्सरला पॉइंटरवर सेट करते जेणेकरून तो घटक इंटरॅक्टिव्ह आहे हे स्पष्ट होईल. बटणावर फोकस असताना व्हिज्युअल फीडबॅक देण्यासाठी हे फोकस स्टाईल देखील जोडते. कीबोर्ड वापरून वेब नेव्हिगेट करणाऱ्या वापरकर्त्यांसाठी हे महत्त्वाचे आहे.

इनलाइन प्लगइन डेव्हलपमेंटसाठी सर्वोत्तम पद्धती

• साधे ठेवा: इनलाइन प्लगइन्स केंद्रित आणि संक्षिप्त असावेत. तुमच्या प्लगइन्समध्ये जास्त गुंतागुंत टाळा.
• अर्थपूर्ण नावे वापरा: वाचनीयता आणि देखभाल सुधारण्यासाठी तुमच्या कंपोनंट्स आणि युटिलिटीजसाठी वर्णनात्मक नावे निवडा.
• तुमच्या प्लगइन्सचे दस्तऐवजीकरण करा: तुमच्या प्लगइन्सचा उद्देश आणि वापर स्पष्ट करण्यासाठी टिप्पण्या जोडा.
• तुमच्या प्लगइन्सची चाचणी घ्या: तुमचे प्लगइन्स अपेक्षेप्रमाणे काम करतात आणि कोणतेही रिग्रेशन सादर करत नाहीत याची खात्री करण्यासाठी त्यांची कसून चाचणी घ्या.
• पुन्हा वापरण्यायोग्यतेचा विचार करा: तुमचे प्लगइन्स विविध प्रोजेक्ट्समध्ये पुन्हा वापरता येण्याजोगे डिझाइन करा.
• मूळ स्टाइल्स ओव्हरराइड करणे टाळा: आवश्यक असेल तेव्हाच मूळ स्टाइल्स ओव्हरराइड करा. विद्यमान स्टाइल्समध्ये बदल करण्याऐवजी थीम वाढवण्याचा किंवा नवीन स्टाइल्स जोडण्याचा प्रयत्न करा.
• सीएसएस व्हेरिएबल्स वापरा: स्टाइल्स प्रभावीपणे व्यवस्थापित करण्यासाठी आणि पुन्हा वापरण्यासाठी सीएसएस व्हेरिएबल्सचा फायदा घ्या.
• रिस्पॉन्सिव्हनेसबद्दल विचार करा: तुमचे प्लगइन्स वेगवेगळ्या स्क्रीन आकारांवर चांगले काम करतात याची खात्री करा.
• ॲक्सेसिबिलिटीला प्राधान्य द्या: तुमचे प्लगइन्स सर्व वापरकर्त्यांसाठी ॲक्सेसिबल आहेत याची खात्री करा.

व्यावहारिक इनलाइन प्लगइन्सची उदाहरणे

१. कस्टम कंटेनर कंपोनंट

हे प्लगइन कमाल रुंदी आणि हॉरिझॉन्टल सेंटरिंगसह एक कस्टम कंटेनर कंपोनंट तयार करते:

            module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          maxWidth: '1200px',
          margin: '0 auto',
          paddingLeft: '1rem',
          paddingRight: '1rem',
          '@screen sm': {
            paddingLeft: '2rem',
            paddingRight: '2rem',
          },
        },
      });
    },
  ],
};

            

              
                Copy
              
            
          

२. टायपोग्राफी स्टाइल्स

हे प्लगइन हेडिंग्स आणि पॅराग्राफसाठी काही मूलभूत टायपोग्राफी स्टाइल्स जोडते:

            module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addBase }) {
      addBase({
        'h1': {
          fontSize: '2.5rem',
          fontWeight: 'bold',
          marginBottom: '1.5rem',
        },
        'h2': {
          fontSize: '2rem',
          fontWeight: 'bold',
          marginBottom: '1rem',
        },
        'p': {
          fontSize: '1.125rem',
          lineHeight: '1.75rem',
          marginBottom: '1rem',
        },
      });
    },
  ],
};

            

              
                Copy
              
            
          

३. डार्क मोड व्हेरियंट

हे प्लगइन डार्क मोडमध्ये स्टाइल्स लागू करण्यासाठी dark: व्हेरियंट जोडते (टेलविंड सीएसएस v2.0+ आवश्यक):

            const plugin = require('tailwindcss/plugin')

module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('dark', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.dark .${e(`dark${separator}${className}`)}`
        })
      })
    }),
  ],
}

            

              
                Copy
              
            
          

निष्कर्ष

टेलविंड सीएसएस इनलाइन प्लगइन सिस्टीम फ्रेमवर्कची कार्यक्षमता सानुकूलित आणि विस्तारित करण्याचा एक शक्तिशाली आणि लवचिक मार्ग प्रदान करते. विविध हेल्पर्स (addBase, addComponents, addUtilities, आणि addVariant) आणि सर्वोत्तम पद्धती समजून घेऊन, तुम्ही तुमच्या प्रोजेक्टच्या विशिष्ट गरजा पूर्ण करणारे अत्यंत सानुकूलित सोल्यूशन्स तयार करू शकता. तुम्ही पुन्हा वापरता येण्याजोगे कंपोनंट्स तयार करत असाल, डिझाइन सिस्टीम नियमांची अंमलबजावणी करत असाल किंवा कस्टम युटिलिटीज जोडत असाल, इनलाइन प्लगइन्स तुमच्या टेलविंड सीएसएस डेव्हलपमेंट वर्कफ्लोला सुधारण्यासाठी एक सोयीस्कर आणि कार्यक्षम दृष्टिकोन देतात. देखभाल आणि उपयोगिता सुनिश्चित करण्यासाठी तुमचे प्लगइन्स साधे, सु-दस्तऐवजीकरण केलेले आणि ॲक्सेसिबल ठेवण्याचे लक्षात ठेवा.

विविध कॉन्फिगरेशन एक्सटेंशन्ससह प्रयोग करा आणि तुमच्या प्रोजेक्ट्समध्ये टेलविंड सीएसएसची पूर्ण क्षमता अनलॉक करण्यासाठी इनलाइन प्लगइन सिस्टीमच्या शक्यतांचा शोध घ्या.