ఈ పోస్ట్ Tailwindలో నిలువు వరుసల మధ్య అంతరాన్ని జోడించడానికి పూర్తి విధానాన్ని వివరిస్తుంది.
టైల్‌విండ్‌లో నిలువు వరుసల మధ్య ఖాళీని ఎలా జోడించాలి?
Tailwindలో నిలువు వరుసల మధ్య అంతరాన్ని జోడించడానికి, అంతర్నిర్మిత “ని ఉపయోగించండి ఖాళీ-{పరిమాణం} ' వినియోగ. ఇది నిలువు వరుసల మధ్య అంతరాన్ని అడ్డంగా మరియు నిలువుగా సూచించే పూర్ణాంక విలువను నిర్దేశిస్తుంది. పేర్కొన్న ఉదాహరణల సహాయంతో ఈ పనిని ఆచరణాత్మకంగా చేద్దాం.
ప్రాజెక్ట్ ఫైల్ నిర్మాణం
ది ' ఖాళీ-{పరిమాణం} ”ఇచ్చిన ఫైల్ నిర్మాణాన్ని అనుసరించే టైల్‌విండ్ ప్రాజెక్ట్‌లలో దేనిలోనైనా యుటిలిటీని అమలు చేయవచ్చు:
మొదటి ఉదాహరణతో ప్రారంభిద్దాం.
ఉదాహరణ 1: అడ్డు వరుసలు మరియు నిలువు వరుసల మధ్య ఒకే అంతరాన్ని జోడించడానికి “గ్యాప్-{సైజ్}” యుటిలిటీని ఉపయోగించండి
ఇచ్చిన నిలువు వరుసల మధ్య అదే గ్యాప్‌ను అడ్డంగా మరియు నిలువుగా జోడించడానికి ఈ ఉదాహరణ “గ్యాప్-{సైజ్}” యుటిలిటీని వర్తిస్తుంది.
HTML కోడ్
కింది కోడ్ యొక్క అవలోకనం:
< తల >
< లింక్ href = '/dist/output.css' rel = 'స్టైల్‌షీట్' >
< / తల >
< శరీరం >
< h1 తరగతి = 'text-3xl font-bold text-center underline text-orange-600' > Linuxhintకి స్వాగతం! < / h1 >< br >
< div తరగతి = 'mx-2 గ్రిడ్ గ్రిడ్-కోల్స్-3 గ్యాప్-4' >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' > మొదటి ట్యుటోరియల్ < / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' > రెండవ ట్యుటోరియల్ < / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' > మూడవ ట్యుటోరియల్ < / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' > నాల్గవ ట్యుటోరియల్ < / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' > ఐదవ ట్యుటోరియల్ < / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' > ఆరవ ట్యుటోరియల్ < / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' > ఏడవ ట్యుటోరియల్ < / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' > ఎనిమిదవ ట్యుటోరియల్ < / div >
< / div >
<శరీరం <
పై కోడ్ లైన్లలో:
- ముందుగా, ప్రధాన CSS ఫైల్‌ను లింక్ చేయండి ' /dist/output.css 'ఇప్పటికే ఉన్న HTML ఫైల్‌తో' index.html 'ఉపయోగించి' <లింక్> 'హెడ్' విభాగంలో 'ట్యాగ్.
- తరువాత, “శరీరం” విభాగం “
” మూలకాన్ని సృష్టిస్తుంది, అది “ ఫాంట్ పరిమాణం ',' ఫాంట్ బరువు ',' టెక్స్ట్ సమలేఖనం ',' టెక్స్ట్ డెకరేషన్ ', ఇంకా ' టెక్స్ట్ రంగు ” వరుసగా టైల్‌విండ్ తరగతులు.
- ఆ తర్వాత, “” మూలకం జోడించబడుతుంది, అది “ గ్రిడ్ గ్రిడ్ లేఅవుట్‌ల యొక్క పేర్కొన్న సంఖ్యలో దాని కంటెంట్‌ను సెట్ చేయడానికి యుటిలిటీ, ' మార్జిన్ క్షితిజ సమాంతర మార్జిన్‌ను సెట్ చేయడానికి తరగతి, మరియు ' అంతరం నిలువు వరుసల మధ్య పేర్కొన్న గ్యాప్‌ని జోడించడానికి యుటిలిటీ.
- “
” మూలకం బాడీ విభాగంలో, “ని ఉపయోగించుకునే మరో ఎనిమిది “” అంశాలు చేర్చబడ్డాయి అంచు వెడల్పు ' ఇంకా ' అంచు రంగు ” తరగతులు, వరుసగా.అవుట్‌పుట్
లైవ్ సర్వర్‌లో పై HTML కోడ్‌ని అమలు చేయండి మరియు అవుట్‌పుట్‌ను విశ్లేషించండి:
చూసినట్లుగా, అవుట్‌పుట్ రెండు పరిమాణాలలో నిలువు వరుసల మధ్య పేర్కొన్న అంతరాన్ని తగిన విధంగా జోడిస్తుంది.
ఉదాహరణ 2: అడ్డు వరుసలు మరియు నిలువు వరుసల మధ్య స్వతంత్రంగా ఖాళీని జోడించడానికి “గ్యాప్-{సైజ్}” యుటిలిటీని ఉపయోగించండి
ది ' ఖాళీ-{పరిమాణం} ” యుటిలిటీని “x(క్షితిజ సమాంతర)” మరియు “y(నిలువు)” కొలతలతో అడ్డు వరుసల కోసం “గ్యాప్-x-{సైజ్}”గా మరియు నిలువు వరుసల కోసం “గ్యాప్-y-{సైజ్}”తో కూడా అమలు చేయవచ్చు వ్యక్తిగతంగా వాటి మధ్య అంతరం.దాని ఆచరణాత్మక అమలును చూద్దాం.
HTML కోడ్
< తల >
ఇచ్చిన కోడ్‌ను చూడండి:
< లింక్ href = '/dist/output.css' rel = 'స్టైల్‌షీట్' >
< / తల >
< శరీరం >
< div తరగతి = 'mx-2 గ్రిడ్ గ్రిడ్-కోల్స్-4 గ్యాప్-x-4 గ్యాప్-y-6' >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' >మొదటి ట్యుటోరియల్< / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' >రెండవ ట్యుటోరియల్< / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' >మూడవ ట్యుటోరియల్< / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' >నాల్గవ ట్యుటోరియల్< / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' >ఐదవ ట్యుటోరియల్< / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' >ఆరవ ట్యుటోరియల్< / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' >ఏడవ ట్యుటోరియల్< / div >
< div తరగతి = 'సరిహద్దు-2 సరిహద్దు-నారింజ-600' >ఎనిమిదవ ట్యుటోరియల్< / div >
< / div >
< శరీరం >ఇక్కడ, ' gap-x-{size} 'యుటిలిటీ అడ్డు వరుసలు మరియు ' మధ్య అంతరాన్ని జోడిస్తుంది gap-y-{size} ” స్వతంత్రంగా నిలువు వరుసల మధ్య పేర్కొన్న అంతరాన్ని జోడిస్తుంది.
అవుట్‌పుట్
పై ఫలితం అడ్డు వరుసలు మరియు నిలువు వరుసల మధ్య అంతరం తదనుగుణంగా వర్తింపజేయబడిందని ధృవీకరిస్తుంది.
ముగింపు
“టైల్‌విండ్ CSS” అంతర్నిర్మిత “ని అందిస్తుంది ఖాళీ-{పరిమాణం} ” కాలమ్‌ల మధ్య అంతరాన్ని జోడించడానికి యుటిలిటీ. ఇది వరుసలు మరియు నిలువు వరుసల మధ్య అంతరాన్ని విడిగా జోడించడానికి కూడా ఉపయోగించవచ్చు “ gap-x-{size} ' ఇంకా ' gap-y-{size} 'ఉపయోగాలు. ఈ పోస్ట్ Tailwindలో నిలువు వరుసల మధ్య అంతరాన్ని జోడించడానికి పూర్తి విధానాన్ని అందించింది.
- “