यह पोस्ट Tailwind में कॉलम के बीच के गैप को जोड़ने की पूरी प्रक्रिया के बारे में विस्तार से बताती है।

टेलविंड में कॉलम के बीच गैप कैसे जोड़ें?

Tailwind में कॉलम के बीच गैप जोड़ने के लिए, बिल्ट-इन “का उपयोग करें अंतराल-{आकार} ' उपयोगिता। यह एक पूर्णांक मान निर्दिष्ट करता है जो स्तंभों के बीच क्षैतिज और लंबवत रूप से अंतर का प्रतिनिधित्व करता है। आइए इस कार्य को बताए गए उदाहरणों की सहायता से व्यावहारिक रूप से करें।

परियोजना फ़ाइल संरचना
' अंतराल-{आकार} ” उपयोगिता दी गई फ़ाइल संरचना का पालन करने वाले किसी भी Tailwind प्रोजेक्ट में लागू की जा सकती है:

आइए पहले उदाहरण से शुरू करते हैं।

उदाहरण 1: पंक्तियों और स्तंभों के बीच समान अंतर जोड़ने के लिए 'गैप-{आकार}' उपयोगिता का उपयोग करें
यह उदाहरण दिए गए कॉलम के बीच क्षैतिज और लंबवत रूप से समान अंतर जोड़ने के लिए 'अंतर-{आकार}' उपयोगिता लागू करता है।

HTML कोड
निम्नलिखित कोड का अवलोकन:

उपरोक्त कोड लाइनों में:

• सबसे पहले, मुख्य CSS फ़ाइल को लिंक करें ” /dist/output.css 'मौजूदा HTML फ़ाइल के साथ' index.html ' का उपयोग ' <लिंक> '' सिर 'अनुभाग में टैग करें।
• अगला, “बॉडी” सेक्शन एक “

  ” एलिमेंट बनाता है जो “का उपयोग करता है फ़ॉन्ट आकार ”, “ फ़ॉन्ट वजन ”, “ पाठ संरेखित ”, “ पाठ सजावट ', और यह ' पाठ का रंग ” टेलविंड क्लासेस, क्रमशः।

• उसके बाद, एक '
  ' तत्व जोड़ा जाता है जो 'लागू करता है' जाल 'ग्रिड लेआउट की घोषित संख्या में इसकी सामग्री को सेट करने के लिए उपयोगिता,' अंतर 'क्षैतिज मार्जिन सेट करने के लिए वर्ग, और' अंतर ” स्तंभों के बीच निर्दिष्ट अंतर जोड़ने के लिए उपयोगिता।
• '
  ' एलिमेंट बॉडी सेक्शन में, आगे आठ '

  ' एलिमेंट शामिल हैं जो 'का उपयोग करते हैं' सीमा चौड़ाई ' और यह ' सीमा रंग ” कक्षाएं, क्रमशः।

उत्पादन
उपरोक्त HTML कोड को लाइव सर्वर में चलाएँ और आउटपुट का विश्लेषण करें:

जैसा कि देखा गया है, आउटपुट दोनों आयामों में स्तंभों के बीच निर्दिष्ट अंतर को उचित रूप से जोड़ता है।

उदाहरण 2: स्वतंत्र रूप से पंक्तियों और स्तंभों के बीच अंतर जोड़ने के लिए 'गैप-{आकार}' उपयोगिता का उपयोग करें
' अंतराल-{आकार} ” उपयोगिता को पंक्तियों के लिए 'x (क्षैतिज)' और 'y (ऊर्ध्वाधर)' आयामों के साथ 'अंतराल-x-{आकार}' और स्तंभों के लिए 'अंतर-वाई-{आकार}' के रूप में लागू किया जा सकता है। उनके बीच व्यक्तिगत रूप से अंतर।

आइए इसके व्यावहारिक कार्यान्वयन को देखें।

HTML कोड
दिए गए कोड पर एक नज़र डालें:

यहां ही ' अंतराल-एक्स-{आकार} 'उपयोगिता पंक्तियों के बीच की खाई को जोड़ती है और' अंतराल-वाई-{आकार} ” स्तंभों के बीच स्वतंत्र रूप से निर्दिष्ट अंतर जोड़ता है।

उत्पादन

उपरोक्त परिणाम सत्यापित करता है कि पंक्तियों और स्तंभों के बीच का अंतर तदनुसार लागू होता है।

निष्कर्ष

“टेलविंड सीएसएस” एक बिल्ट-इन “ प्रदान करता है अंतराल-{आकार} ” उपयोगिता स्तंभों के बीच की खाई को जोड़ने के लिए। इसका उपयोग 'के माध्यम से पंक्तियों और स्तंभों के बीच के अंतर को अलग-अलग जोड़ने के लिए भी किया जा सकता है।' अंतराल-एक्स-{आकार} ' और यह ' अंतराल-वाई-{आकार} उपयोगिताओं। इस पोस्ट में Tailwind में कॉलम के बीच के गैप को जोड़ने की पूरी प्रक्रिया दी गई है.