यह लेख समझाएगा:
- Tailwind थीम में स्क्रीन, रंग और स्पेसिंग क्या करते हैं?
- Tailwind थीम में स्क्रीन, रंग और स्पेसिंग का उपयोग कैसे करें?
- Tailwind थीम में स्क्रीन, रंग और स्पेसिंग कैसे कॉन्फ़िगर करें?
Tailwind थीम में स्क्रीन, रंग और स्पेसिंग क्या करते हैं?
स्क्रीन key उपयोगकर्ताओं को Tailwind प्रोजेक्ट में रिस्पॉन्सिव ब्रेकप्वाइंट को संशोधित करने की अनुमति देती है। ब्रेकप्वाइंट वे बिंदु हैं जहां स्क्रीन की चौड़ाई के आधार पर लेआउट बदलता है। डिफ़ॉल्ट रूप से, टेलविंड में पाँच स्क्रीन शामिल होती हैं, जैसे, sm (छोटी), md (मध्यम), lg (बड़ी), और xl (अतिरिक्त-बड़ी)। हालाँकि, उपयोगकर्ता 'स्क्रीन' कुंजी का उपयोग करके अपने ब्रेकप्वाइंट को परिभाषित कर सकते हैं, और फिर उन्हें HTML प्रोग्राम में उपयोग कर सकते हैं।
रंग की रंग पैलेट को संशोधित करने के लिए कुंजी का उपयोग किया जाता है। रंग डिजाइन की सबसे प्रमुख विशेषताओं में से एक हैं। टेलविंड थीम रंगों की एक विस्तृत श्रृंखला के साथ एक डिफ़ॉल्ट रंग पैलेट प्रदान करती है, लेकिन उपयोगकर्ता इसे अनुकूलित भी कर सकते हैं या इसे अपने रंगों से बढ़ा सकते हैं। उपयोगकर्ता 'रंग' कुंजी का उपयोग करके रंगों को परिभाषित कर सकते हैं, और फिर HTML कोड में किसी भी रंग से संबंधित उपयोगिता वर्ग के साथ उनका उपयोग कर सकते हैं।
अंतर कुंजी का उपयोग रिक्ति और आकार देने के पैमाने को संशोधित करने के लिए किया जाता है। रिक्ति डिजाइन का एक अन्य आवश्यक पहलू है, क्योंकि यह पठनीयता, संरेखण और तत्वों के संतुलन को प्रभावित करता है। टेलविंड थीम 4 पिक्सेल (0.25rem) के आधार मान के आधार पर एक सुसंगत रिक्ति पैमाना प्रदान करती है। हालाँकि, इसे कस्टम मानों के साथ अनुकूलित या विस्तारित भी किया जा सकता है। उपयोगकर्ता 'स्पेसिंग' कुंजी का उपयोग करके रिक्ति मानों को परिभाषित कर सकते हैं, और फिर प्रोग्राम फ़ाइल में किसी भी रिक्ति-संबंधित उपयोगिता वर्ग के साथ उनका उपयोग कर सकते हैं।
Tailwind थीम में स्क्रीन, रंग और स्पेसिंग का उपयोग कैसे करें?
Tailwind थीम में स्क्रीन, रंग और रिक्ति का उपयोग करने के लिए, एक HTML प्रोग्राम बनाएं और आवश्यकतानुसार डिफ़ॉल्ट स्क्रीन, रंग और रिक्ति गुणों का उपयोग करें. फिर, HTML प्रोग्राम चलाएँ और HTML वेब पेज देखें। आइए नीचे दिए गए चरणों का पालन करें:
चरण 1: HTML वेब पेज बनाएं
सबसे पहले, एक HTML प्रोग्राम बनाएं और डिफ़ॉल्ट स्क्रीन, रंग और रिक्ति गुणों का उपयोग करें:
<शरीर ><डिव वर्ग = 'एच-स्क्रीन पी-10 एसएम:बीजी-रेड-700 एमडी:बीजी-ब्लू-600 एलजी:बीजी-ग्रीन-500 एक्सएल:बीजी-पिंक-700' >
<एच1 वर्ग = 'टेक्स्ट-3एक्सएल एम-5 एसएम: टेक्स्ट-व्हाइट टेक्स्ट-सेंटर' >
लिनक्स संकेत!
>
<एच2 वर्ग = 'टेक्स्ट-2एक्सएल एम-5 एमडी: टेक्स्ट-व्हाइट टेक्स्ट-सेंटर' >
इस ट्यूटोरियल में आपका स्वागत है
>
<एच3 वर्ग = 'टेक्स्ट-2एक्सएल एम-5 एलजी: टेक्स्ट-व्हाइट टेक्स्ट-सेंटर' >
टेलविंड सीएसएस
>
<पी वर्ग = 'टेक्स्ट-2एक्सएल एम-5 एक्सएल: टेक्स्ट-व्हाइट टेक्स्ट-सेंटर' >
विषय-वस्तु
>
>
>
यहाँ:
- ' -पी-10 ' और ' एम 5 'अंतराल संपत्ति हैं।
- ' एस.एम ”, “ एमडी ”, “ एलजी ', और ' एक्स्ट्रा लार्ज ” स्क्रीन गुण हैं।
- ' लाल -700 ”, “ नीला -600 ”, “ हरा - 500 ”, “ गुलाबी -700 ', और ' सफ़ेद ” रंग गुण हैं।
चरण 2: HTML प्रोग्राम चलाएँ
फिर, HTML वेब पेज देखने के लिए HTML प्रोग्राम चलाएँ:
उपरोक्त आउटपुट में, डिफ़ॉल्ट स्क्रीन, रंग और रिक्ति गुण देखे जा सकते हैं।
Tailwind थीम में स्क्रीन, रंग और स्पेसिंग कैसे कॉन्फ़िगर करें?
Tailwind थीम में स्क्रीन, रंग और स्पेसिंग कॉन्फ़िगर करने के लिए दिए गए चरणों को देखें:
- खोलें ' टेलविंड.कॉन्फिग.जेएस ' फ़ाइल।
- पर जाएँ' थीम ” अनुभाग और आवश्यकतानुसार स्क्रीन, रंग और रिक्ति गुणों को अनुकूलित करें।
- HTML प्रोग्राम में अनुकूलित गुणों का उपयोग करें।
- सत्यापन के लिए HTML वेब पेज देखें।
चरण 1: Tailwind कॉन्फ़िग फ़ाइल में स्क्रीन, रंग और रिक्ति कॉन्फ़िगर करें
में ' थीम 'का खंड' टेलविंड.कॉन्फिग.जेएस ”फ़ाइल, स्क्रीन, रंग और रिक्ति गुणों को आवश्यकता के अनुसार अनुकूलित करें। उदाहरण के लिए, हमने इन गुणों को निम्नानुसार अनुकूलित किया है:
मापांक निर्यात = {संतुष्ट : [ './index.html' ] ,
थीम : {
// अनुकूलित स्क्रीन
स्क्रीन : {
एस.एम : '480 पीएक्स' ,
एमडी : '668पीएक्स' ,
एलजी : '876पीएक्स' ,
एक्स्ट्रा लार्ज : '1100पीएक्स' ,
} ,
// अनुकूलित रंग
रंग की : {
सफ़ेद : #fffff ,
काला : '#000000' ,
नीला : '#08609सी' ,
हरा : '#089c28' ,
लाल : '#9c0306' ,
पीला : '#ede60e' ,
गुलाबी : '#ed0e55' ,
} ,
// स्पेसिंग को कस्टमाइज़ करना
अंतर : {
पिक्सल : '1 पीएक्स' ,
'0' : '0' ,
'1' : '0.25रेम' ,
'2' : '0.5रेम' ,
'3' : '0.75रेम' ,
'4' : '1 बात' ,
'5' : '1.25रेम' ,
'6' : '1.5रेम' ,
'8' : '2रेम' ,
'10' : '2.5रेम' ,
'12' : '3रेम' ,
'16' : '4rem' ,
'बीस' : '5रेम' ,
}
} ,
} ;
इस कोड में:
- ' स्क्रीन ” संपत्ति विभिन्न आकारों के लिए स्क्रीन ब्रेकप्वाइंट को परिभाषित करती है। यह उपनाम (जैसे sm, md, lg, xl) और उनके समकक्ष मान प्रदान करता है।
- ' रंग की ” संपत्ति उनके नाम और हेक्साडेसिमल मान जोड़े का उपयोग करके कस्टम रंगों को परिभाषित करती है।
- ' अंतर ” संपत्ति कई आकारों के लिए कस्टम रिक्ति मान निर्दिष्ट करती है। यह 'रेम' इकाइयों में विशिष्ट रिक्ति मानों का प्रतिनिधित्व करने के लिए उपनाम (जैसे px, 0, 1, 2, आदि) का उपयोग करता है।
चरण 2: HTML प्रोग्राम में कॉन्फ़िगर की गई संपत्तियों का उपयोग करें
अब, HTML प्रोग्राम में अनुकूलित गुणों का उपयोग करें:
<शरीर ><डिव वर्ग = 'एच-स्क्रीन पी-10 एसएम:बीजी-रेड एमडी:बीजी-ब्लू एलजी:बीजी-ग्रीन एक्सएल:बीजी-पिंक' >
<एच1 वर्ग = 'टेक्स्ट-3एक्सएल एम-5 एसएम: टेक्स्ट-व्हाइट टेक्स्ट-सेंटर' >
लिनक्स संकेत!
>
<एच2 वर्ग = 'टेक्स्ट-2एक्सएल एम-5 एमडी: टेक्स्ट-व्हाइट टेक्स्ट-सेंटर' >
इस ट्यूटोरियल में आपका स्वागत है
>
<एच3 वर्ग = 'टेक्स्ट-2एक्सएल एम-5 एलजी: टेक्स्ट-व्हाइट टेक्स्ट-सेंटर' >
टेलविंड सीएसएस
>
<पी वर्ग = 'टेक्स्ट-2एक्सएल एम-5 एक्सएल: टेक्स्ट-व्हाइट टेक्स्ट-सेंटर' >
विषय-वस्तु
>
>
>
चरण 3: HTML वेब पेज देखें
अंत में, HTML वेब पेज देखकर आउटपुट को सत्यापित करें:
यह देखा जा सकता है कि वेब पेज की सामग्री कॉन्फ़िगर की गई स्क्रीन, रंग और रिक्ति गुणों के अनुसार बदलती है।
निष्कर्ष
स्क्रीन key उपयोगकर्ताओं को उत्तरदायी ब्रेकप्वाइंट को अनुकूलित/संशोधित करने की अनुमति देता है, रंग की कुंजी का उपयोग परियोजना के लिए रंग पैलेट को अनुकूलित करने के लिए किया जाता है और अंतर कुंजी का उपयोग रिक्ति और आकार देने के पैमाने को अनुकूलित करने के लिए किया जाता है। इसके अलावा, उपयोगकर्ता इन कुंजियों या गुणों को अपनी आवश्यकताओं के अनुसार अनुकूलित कर सकते हैं। इस लेख में Tailwind थीम में स्क्रीन, रंग और स्पेसिंग के बारे में बताया गया है.