ఈ బ్లాగ్ Tailwindలో బహుళ మూలకాల మధ్య సమాన స్థలాన్ని కేటాయించే ఆలోచనను అందిస్తుంది.
టైల్‌విండ్‌లో బహుళ మూలకాల మధ్య సమాన స్థలాన్ని ఎలా కేటాయించాలి?
వినియోగదారులు “ని ఉపయోగించడం ద్వారా మూలకాల మధ్య సమాన ఖాళీలను కేటాయించవచ్చు స్పేస్-{x/y}-{size} ” యుటిలిటీ క్లాస్. పూర్ణాంకం విలువను పేర్కొనడం ద్వారా వినియోగదారులు x లేదా y-axisపై ఖాళీని జోడించవచ్చు. స్పేసింగ్ యుటిలిటీ అవసరం ఎందుకంటే ఇది వెబ్ పేజీని ఆకర్షణీయంగా చేస్తుంది. వెబ్‌పేజీకి మూలకాల మధ్య సరైన అంతరం లేకపోతే, అది వినియోగదారులను ఆకర్షించదు.
గ్రిడ్ మూలకాల మధ్య సమాన స్థలాన్ని కేటాయించడానికి కోడ్ ఉదాహరణను తీసుకుందాం.
విధానం 1: X-యాక్సిస్‌పై స్థలాన్ని కేటాయించడం.
x-యాక్సిస్‌పై కేటాయించిన సమాన స్థలం మూలకం యొక్క కుడి మరియు ఎడమకు సమాన అంతరాన్ని చేస్తుంది. x-axisపై ఖాళీని కేటాయించడానికి క్రింది వాక్యనిర్మాణాన్ని ఉపయోగించండి:
స్థలం - x - { పరిమాణం }
పరిమాణం ఏదైనా పూర్ణాంకం విలువ కావచ్చు.
x-యాక్సిస్‌పై సమాన స్థలాన్ని కేటాయించడానికి దిగువ కోడ్‌ను పరిగణించండి:
< శరీరం >< div తరగతి = 'mx-4 గ్రిడ్ గ్రిడ్-కోల్స్-4 స్పేస్-x-4' >
< div తరగతి = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div తరగతి = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div తరగతి = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div తరగతి = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
శరీరం >
ఈ కోడ్‌లో:
- ' mx-4 ” x-అక్షం (కుడి మరియు ఎడమ)పై 4 px మార్జిన్‌ని జోడిస్తుంది.
- ది ' గ్రిడ్ ” తరగతి ఒక గ్రిడ్‌ను సృష్టిస్తుంది.
- ది ' గ్రిడ్-కోల్స్-4 ” గ్రిడ్‌లో 4 నిలువు వరుసలను చేయండి.
- ది ' స్పేస్-x-4 ” గ్రిడ్ మూలకాల మధ్య 4px ఖాళీని జోడిస్తుంది.
- ' bg-ఆకుపచ్చ-400 ” నేపథ్య రంగును ఆకుపచ్చగా సెట్ చేస్తుంది.
- ' h-16 ” ఎత్తును 16pxకి సెట్ చేస్తుంది.
- ది ' గుండ్రని-lg ” మూలను గుండ్రంగా చేస్తుంది మరియు సరిహద్దు వ్యాసార్థం పెద్దదిగా ఉంటుంది.
- ది ' సరిహద్దు-2 ” మూలకం చుట్టూ 2px అంచుని చేస్తుంది.
- ' సరిహద్దు-ఆకుపచ్చ-800 ” సరిహద్దును ముదురు ఆకుపచ్చగా చేస్తుంది.
అవుట్‌పుట్
ఎగువ కోడ్ ద్వారా సృష్టించబడిన అవుట్‌పుట్‌ను పరిదృశ్యం చేయండి:
మూలకాల మధ్య 4px అంతరం కేటాయించబడిందని చూడవచ్చు.
విధానం 2: y-యాక్సిస్‌పై ఖాళీని కేటాయించడం.
పై కోడ్‌లో చిన్న మార్పుల ద్వారా పై పద్ధతిని పోలిన y-యాక్సిస్‌పై అంతరాన్ని కేటాయించవచ్చు. ఇది y-యాక్సిస్ (ఎగువ మరియు దిగువ) వెంట ఖాళీలను కేటాయిస్తుంది. దీనికి వాక్యనిర్మాణం:
y-అక్షం వెంట ఖాళీలను జోడించడానికి క్రింది కోడ్‌ని అమలు చేయవచ్చు:
< శరీరం >< div తరగతి = 'mx-4 my-4 space-y-4' >
< div తరగతి = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div తరగతి = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div తరగతి = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div తరగతి = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
శరీరం >
ఈ కోడ్‌లో:
- ' mx-4 ” అవుట్‌పుట్‌ను మరింత ఆప్టిమైజ్ చేయడానికి మూలకాల యొక్క ఎడమ మరియు కుడి వైపున 4px మార్జిన్‌ను జోడిస్తుంది.
- ' నా-4 ” y-axis (ఎగువ మరియు దిగువ)పై 4px మార్జిన్‌ని జోడిస్తుంది.
- ' స్పేస్-y-4 ” y-యాక్సిస్ (ఎగువ మరియు దిగువ)పై 4px స్థలాన్ని జోడిస్తుంది.
అవుట్‌పుట్
పై కోడ్‌ని సేవ్ చేసి, దాని ద్వారా సృష్టించబడిన వెబ్‌పేజీని పరిదృశ్యం చేయడం ద్వారా అంతరాన్ని ఇలా చూడవచ్చు:
మూలకాల మధ్య సమాన ఖాళీని కేటాయించడం గురించి అంతే.
ముగింపు
Tailwindలో బహుళ మూలకాల మధ్య సమాన స్థలాన్ని కేటాయించడానికి, వినియోగదారులు “ స్పేస్-{x/y}-{size} ” యుటిలిటీ క్లాస్ మరియు అవసరానికి అనుగుణంగా పూర్ణాంక విలువను పరిమాణంగా పేర్కొనండి. మూలకాల మధ్య సమాన అంతరం అవుట్‌పుట్‌ను మరింత స్కేలబుల్‌గా చేస్తుంది మరియు వీక్షకులు వెబ్‌పేజీతో నిమగ్నమై ఉంటారు. ఈ పోస్ట్ Tailwindలో బహుళ మూలకాల మధ్య సమాన ఖాళీని కేటాయించే పద్ధతిని అందించింది.