] टेलविंड विशेष रूप से पैडिंग के लिए उपयोगिता कक्षाओं का एक सेट प्रदान करता है, जिससे डेवलपर्स को कस्टम सीएसएस लिखने की परेशानी के बिना रिक्ति को नियंत्रित करने के लिए लचीलापन मिलता है। इस गाइड में, हम इस बात पर गहराई से गोता लगाते हैं कि टेलविंड पैडिंग कैसे काम करता है, उपलब्ध विकल्पों का पता लगाता है, और प्रदर्शित करता है कि उन्हें वास्तविक दुनिया की परियोजनाओं पर कैसे लागू किया जाए।

मूल उपयोग

] टेलविंड विभिन्न पक्षों, कुल्हाड़ियों, या एक तत्व के सभी पक्षों के लिए सीधे उपयोगिता कक्षाओं की पेशकश करके इसे सरल बनाता है। यहाँ मूल पैडिंग उपयोग के मामलों का एक त्वरित टूटना है:

एक तरफ गद्दी जोड़ना

]

कोड:

]

उदाहरण के लिए:

pt-6
pr-4
pb-8
pl-2

PR-4 दाईं ओर पैडिंग का 1rem जोड़ता है।

PB-8 नीचे की ओर पैडिंग का 2rem जोड़ता है।
PL-2 बाईं ओर 0.5rem पैडिंग जोड़ता है।
]
• क्षैतिज पैडिंग जोड़ना

]

कोड:

]

उदाहरण के लिए:

पीएक्स -4 बाएं और दाएं दोनों पक्षों में पैडिंग का 1rem जोड़ता है। PX-6 दोनों पक्षों में 1.5Rem जोड़ता है।

] बाएं और दाएं, जैसे बटन या नेविगेशन बार।

px-8

ऊर्ध्वाधर पैडिंग जोड़ना

टेलविंड में वर्टिकल पैडिंग को नियंत्रित करने के लिए, आप पाइ-* यूटिलिटी क्लास का उपयोग कर सकते हैं, जो एक तत्व के ऊपर और नीचे दोनों में समान पैडिंग जोड़ता है।

कोड:

py-8

उदाहरण के लिए:

Py-4 ऊपर और नीचे के लिए 1rem पैडिंग जोड़ता है।

Py-8 वर्टिकल पैडिंग के 2rem जोड़ता है। ]
सभी पक्षों में गद्दी जोड़ना

py-8
 

]

कोड:
p-8

उदाहरण के लिए:

P-4 सभी चार पक्षों में पैडिंग का 1rem जोड़ता है।

P-8 तत्व के पार समान रूप से पैडिंग के 2rem को लागू करता है।

]

तार्किक गुणों का उपयोग करना

] ये तार्किक गुण स्टार्ट और एंड पैडिंग को समायोजित करते हैं कि क्या सामग्री बाएं-से-दाएं (LTR) या राइट-टू-लेफ्ट (RTL) बहती है।

py-8
 

कोड:

• ps-8

  PE-8
  ps-8

  PE-8
• उदाहरण के लिए:

PS-4 तत्व की शुरुआत में पैडिंग का 1Rem जोड़ता है, जो LTR में बाईं ओर और RTL में दाईं ओर होगा।

PE-6 तत्व के अंत में पैडिंग का 1.5Rem जोड़ता है, LTR में दाईं ओर मैपिंग और RTL में बाईं ओर।

तार्किक गुणों का उपयोग करना विशेष रूप से उन परियोजनाओं के लिए उपयोगी है जो कई भाषाओं का समर्थन करते हैं या गतिशील लेआउट समायोजन की आवश्यकता होती है।

सशर्त रूप से आवेदन करना

] यह बेहद उपयोगी है जब आपको उपयोगकर्ता इंटरैक्शन (जैसे होवर या फोकस) के आधार पर शैलियों को संशोधित करने या स्क्रीन आकार और मीडिया प्रश्नों के आधार पर शैलियों को लागू करने की आवश्यकता होती है।

होवर, फोकस और अन्य राज्य

] उदाहरण के लिए, होवर: PY-8 2REM का एक ऊर्ध्वाधर पैडिंग लागू करेगा जब तत्व को मंडराया जाता है।

  
ps-8
 
  
pe-8



  
ps-8
 
  
pe-8

कोड:

• ] ऊर्ध्वाधर पैडिंग में वृद्धि देखने के लिए मेरे ऊपर होवर!
]
• ब्रेकप्वाइंट और मीडिया क्वेरीज़

]

कोड:

] मध्यम स्क्रीन आकारों में पैडिंग परिवर्तन को देखने के लिए अपने ब्राउज़र का आकार दें।

]

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

अपने विषय को अनुकूलित करना

] आपके पास ऐसा करने के दो तरीके हैं: या तो समग्र रिक्ति पैमाने को समायोजित करके या केवल विशेष रूप से पैडिंग पर ध्यान केंद्रित करके।

] module.exports = { विषय: { बढ़ाना: { रिक्ति: { '5px': '5px', } } } }
]

  Hover over me to see the vertical padding increase!

वैकल्पिक रूप से, आप केवल पैडिंग स्केल का विस्तार कर सकते हैं:

module.exports = { विषय: { बढ़ाना: { गद्दी: { '5px': '5px', } } } }

] मनमानी मूल्य

] यह आपको अपने tailwind.config.js फ़ाइल को संशोधित किए बिना जल्दी से एक-बंद कस्टम पैडिंग मान जोड़ने की अनुमति देता है।

]

] यह विशेष रूप से उपयोगी है जब आपको कस्टम रिक्ति की आवश्यकता होती है जो आपके थीम कॉन्फ़िगरेशन में एक स्थायी परिवर्तन का वारंट नहीं करता है।
निष्कर्ष ] P-* उपयोगिता सभी पक्षों पर समान पैडिंग लागू होती है। तार्किक गुण (ps-*, pe-*) पाठ दिशा के आधार पर पैडिंग को समायोजित करें, बहुभाषी लेआउट के लिए आदर्श।

  Resize your browser to see the padding change at medium screen sizes.

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