టైల్‌విండ్‌లో ఒకే వైపుకు పాడింగ్‌ను ఎలా జోడించాలి?

Tail Vind Lo Oke Vaipuku Pading Nu Ela Jodincali



Tailwind CSSలో, నిర్దిష్ట మూలకం యొక్క కంటెంట్ మరియు దాని సరిహద్దుల మధ్య ఖాళీని జోడించడానికి పాడింగ్ ఉపయోగించబడుతుంది. ఇది మూలకం లోపల అదనపు అంతరాన్ని జోడిస్తుంది. టైల్‌విండ్ CSS పాడింగ్ యుటిలిటీలు మరియు పాడింగ్ విలువల సమితిని అందిస్తుంది, ఇది వినియోగదారులకు కావలసిన మూలకాల అంతరాన్ని అనుకూలీకరించడానికి అనుమతిస్తుంది. అంతేకాకుండా, వినియోగదారులు ఒక నిర్దిష్ట మూలకం యొక్క ఎగువ, దిగువ, ఎడమ లేదా కుడి వంటి ఒకే వైపుకు పాడింగ్‌ని జోడించవచ్చు.

ఈ బ్లాగ్ Tailwind CSSలో ఒక మూలకం యొక్క ఒక వైపుకు పాడింగ్‌ని జోడించడానికి ఉదాహరణలను ప్రదర్శిస్తుంది.







టైల్‌విండ్‌లో ఒకే వైపుకు పాడింగ్‌ను ఎలా జోడించాలి?

టైల్‌విండ్‌లోని మూలకం యొక్క ఒక వైపుకు పాడింగ్‌ని జోడించడానికి, క్రింది యుటిలిటీ తరగతులను ఉపయోగించవచ్చు:



దీన్ని బాగా అర్థం చేసుకోవడానికి, దిగువ అందించిన ఉదాహరణలను చూడండి.



ఉదాహరణ 1: ఒక మూలకం యొక్క పైభాగానికి పాడింగ్‌ని జోడించండి





ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము pt-10 'లో యుటిలిటీ క్లాస్'

”ఎలిమెంట్ దాని పైభాగంలో 10 యూనిట్ల ప్యాడింగ్‌ని జోడించాలి:

< శరీరం >

< div తరగతి = 'bg-pink-600 pt-10 w-max' >
పాడింగ్ లో టైల్‌విండ్ CSS
div >

శరీరం >


అవుట్‌పుట్




పై అవుట్‌పుట్ కంటైనర్ పైభాగానికి పాడింగ్ జోడించబడిందని చూపిస్తుంది.

ఉదాహరణ 2: ఎలిమెంట్ దిగువన పాడింగ్‌ని జోడించండి

ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము pb-10 'లో తరగతి'

” మూలకం దాని దిగువన 10 యూనిట్ల పాడింగ్‌ని జోడించాలి:

< శరీరం >

< div తరగతి = 'bg-pink-600 pb-10 w-max' >
పాడింగ్ లో టైల్‌విండ్ CSS
div >

శరీరం >


అవుట్‌పుట్


కంటైనర్ దిగువన పాడింగ్ జోడించబడిందని చూడవచ్చు.

ఉదాహరణ 3: ఒక మూలకం యొక్క కుడి వైపున పాడింగ్‌ని జోడించండి

ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము pr-10 'లో తరగతి'

”ఎలిమెంట్ దాని కుడివైపున 10 యూనిట్ల పాడింగ్‌ని జోడించాలి:

< శరీరం >

< div తరగతి = 'bg-pink-600 pr-10 w-max' >
పాడింగ్ లో టైల్‌విండ్ CSS
div >

శరీరం >


అవుట్‌పుట్


కంటైనర్ మూలకం యొక్క కుడి వైపున పాడింగ్ జోడించబడిందని పై అవుట్‌పుట్ చూపిస్తుంది.

ఉదాహరణ 4: ఒక మూలకం యొక్క ఎడమ వైపున పాడింగ్‌ని జోడించండి

ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము pl-10 'లో తరగతి'

” ఎలిమెంట్ దాని ఎడమవైపు 10 యూనిట్ల పాడింగ్‌ని జోడించాలి:

< శరీరం >

< div తరగతి = 'bg-pink-600 pl-10 w-max' >
పాడింగ్ లో టైల్‌విండ్ CSS
div >

శరీరం >


అవుట్‌పుట్


కంటైనర్ యొక్క ఎడమ వైపున పాడింగ్ జోడించబడిందని గమనించవచ్చు.

ముగింపు

టైల్‌విండ్‌లోని మూలకం యొక్క ఒక వైపుకు పాడింగ్‌ని జోడించడానికి, వివిధ యుటిలిటీ తరగతులను ఉపయోగించవచ్చు, ఉదాహరణకు ' pl- ',' pr- ',' pt- ', మరియు' pb- ”. ఈ తరగతులు నిర్దిష్ట మూలకం యొక్క ఎడమ, కుడి, ఎగువ మరియు దిగువ వైపు వరుసగా పాడింగ్‌ను జోడిస్తాయి. పాడింగ్ పరిమాణం కోసం వినియోగదారులు వేర్వేరు విలువలను పేర్కొనవచ్చు. ఈ బ్లాగ్ Tailwind CSSలో ఒక మూలకం యొక్క ఒక వైపుకు పాడింగ్‌ని జోడించడానికి ఉదాహరణలను ప్రదర్శించింది.