Tailwind CSSలో, రీప్లేస్డ్ ఎలిమెంట్స్ అంటే ఇమేజ్‌లు మరియు వీడియోల వంటి బాహ్య వనరు ద్వారా కంటెంట్ రీప్లేస్ చేయబడిన అంశాలు. కొన్నిసార్లు, వినియోగదారులు కంటైనర్‌లో భర్తీ చేయబడిన మూలకాన్ని ఉంచడానికి సవాలును ఎదుర్కొంటారు. ఎందుకంటే ఈ మూలకాలు వాటి పరిమాణం అందుబాటులో ఉన్న స్థలం కంటే పెద్దగా ఉన్నట్లయితే కంటైనర్‌ను ఓవర్‌ఫ్లో చేయగలవు. టెయిల్‌విండ్ CSS, భర్తీ చేయబడిన మూలకం యొక్క కంటెంట్ కంటైనర్‌లో ఎలా ఉంచబడుతుందో మరియు సమలేఖనం చేయబడిందో నియంత్రించడానికి యుటిలిటీ తరగతులను అందిస్తుంది.
ఈ కథనం Tailwind CSSలోని కంటైనర్‌లో భర్తీ చేయబడిన మూలకాలను ఉంచే పద్ధతిని వివరిస్తుంది.
టైల్‌విండ్‌లోని కంటైనర్‌లో భర్తీ చేయబడిన మూలకాలను ఎలా ఉంచాలి?
టైల్‌విండ్‌లోని కంటైనర్‌లో భర్తీ చేయబడిన మూలకాలను ఉంచడానికి, HTML ప్రోగ్రామ్‌ను రూపొందించి, ' వస్తువు-<స్థానం/వైపు> ” కావలసిన మూలకాలతో యుటిలిటీస్. భర్తీ చేయబడిన మూలకాలను ఉంచడానికి 'object-
వాక్యనిర్మాణం
< మూలకం తరగతి = 'object-
ఉదాహరణ
ఈ ఉదాహరణలో, మేము ఒక కంటైనర్‌ను తయారు చేస్తాము మరియు అన్నింటిని ఉపయోగిస్తాము ' వస్తువు-<స్థానం/వైపు> 'ఉపయోగాలు' కంటైనర్‌లో వాటి భర్తీ స్థానాన్ని పేర్కొనడానికి ” (చిత్రం) మూలకాలు:
< శరీరం >
< div తరగతి = 'bg-sky-300 గ్రిడ్ గ్రిడ్-వరుసలు-3 గ్రిడ్-ఫ్లో-కోల్ m-5 స్పేస్-y-4 p-4 జస్టిఫై-మధ్య' >
< img తరగతి = 'వస్తువు-ఏదీ ఆబ్జెక్ట్-లెఫ్ట్-టాప్ w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img తరగతి = 'వస్తువు-ఏదీ ఆబ్జెక్ట్-ఎడమ w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img తరగతి = 'వస్తువు-ఏదీ ఆబ్జెక్ట్-ఎడమ-దిగువ w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img తరగతి = 'ఆబ్జెక్ట్-నోన్ ఆబ్జెక్ట్-టాప్ w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img తరగతి = 'object-none object-center w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img తరగతి = 'ఆబ్జెక్ట్-ఏమీ ఆబ్జెక్ట్-బాటమ్ w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img తరగతి = 'ఆబ్జెక్ట్-ఏమీ ఆబ్జెక్ట్-రైట్-టాప్ w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img తరగతి = 'ఆబ్జెక్ట్-ఏమీ ఆబ్జెక్ట్-రైట్ w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img తరగతి = 'వస్తువు-ఏదీ ఆబ్జెక్ట్-కుడి-దిగువ w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
శరీరం >
ఇక్కడ, పేరెంట్
- ' bg-sky-300 ” క్లాస్ కంటైనర్ యొక్క నేపథ్య రంగును ఆకాశానికి సెట్ చేస్తుంది.
- ' గ్రిడ్ ” క్లాస్ గ్రిడ్ లేఅవుట్‌ను ప్రారంభిస్తుంది.
- ' గ్రిడ్-వరుసలు-3 ” క్లాస్ గ్రిడ్‌లోని అడ్డు వరుసల సంఖ్యను 3కి సెట్ చేస్తుంది.
- ' గ్రిడ్-ఫ్లో-కోల్ ” క్లాస్ నిలువు వరుసలలో గ్రిడ్ అంశాల ప్రవాహాన్ని నిర్వచిస్తుంది.
- ' m-5 ”క్లాస్ కంటైనర్ చుట్టూ 5 యూనిట్ల మార్జిన్‌ని జోడిస్తుంది.
- ' స్పేస్-y-4 ”క్లాస్ కంటైనర్‌లోని చైల్డ్
మూలకాల మధ్య 4 యూనిట్ల నిలువు అంతరాన్ని జోడిస్తుంది.
- ' p-4 ”క్లాస్ కంటైనర్‌లోని కంటెంట్‌కు 4 యూనిట్ల పాడింగ్‌ని జోడిస్తుంది.
- ' సమర్థించు-మధ్య ”క్లాస్ కంటైనర్‌లోని చైల్డ్ ఎలిమెంట్‌లను సమలేఖనం చేస్తుంది మరియు వాటిని సమానంగా పంపిణీ చేస్తుంది.
మూలకాలలో:
- ' వస్తువు-ఏదీ లేదు ” క్లాస్ ఎలిమెంట్‌కు ఏ స్థానమును వర్తింపజేయదు మరియు కంటైనర్‌లో దాని డిఫాల్ట్ స్థానంలో మూలకాన్ని ప్రదర్శిస్తుంది.
- ' వస్తువు-ఎడమ-పైన ” క్లాస్
మూలకాన్ని దాని కంటైనర్ యొక్క ఎగువ-ఎడమ మూలలో ఉంచుతుంది.
- ' వస్తువు-ఎడమ ” క్లాస్ మూలకాన్ని కంటైనర్ యొక్క ఎడమ అంచుకు సమలేఖనం చేస్తుంది మరియు దానిని నిలువుగా మధ్యలో ఉంచుతుంది.
- ' వస్తువు-ఎడమ-దిగువ ” క్లాస్
మూలకాన్ని దాని కంటైనర్ యొక్క దిగువ-ఎడమ మూలలో ఉంచుతుంది.
- ' వస్తువు-పైభాగం 'తరగతి మూలకాన్ని దాని కంటైనర్ ఎగువ అంచున ఉంచుతుంది మరియు దానిని అడ్డంగా కేంద్రీకృతం చేస్తుంది.
- ' వస్తువు-కేంద్రం ” తరగతి మూలకాన్ని కంటైనర్ మధ్యలో ఉంచుతుంది మరియు దానిని అడ్డంగా మరియు నిలువుగా కేంద్రీకృతం చేస్తుంది.
- ' వస్తువు-దిగువ ” తరగతి మూలకాన్ని దాని కంటైనర్ దిగువ అంచున ఉంచుతుంది మరియు దానిని అడ్డంగా మధ్యలో ఉంచుతుంది.
- ' వస్తువు-కుడి-ఎగువ ” క్లాస్
మూలకాన్ని కంటైనర్ యొక్క కుడి ఎగువ మూలలో ఉంచుతుంది.
- ' వస్తువు-కుడి 'తరగతి మూలకాన్ని దాని కంటైనర్ యొక్క కుడి అంచుకు ఉంచుతుంది మరియు దానిని నిలువుగా మధ్యలో ఉంచుతుంది.
- ' వస్తువు-కుడి-దిగువ 'తరగతి మూలకాన్ని దాని కంటైనర్ దిగువ-కుడి మూలలో ఉంచుతుంది.
అవుట్‌పుట్
పై వెబ్ పేజీలో, భర్తీ చేయబడిన మూలకం యొక్క మొత్తం కంటెంట్ విజయవంతంగా ఉంచబడిందని గమనించవచ్చు.
ముగింపు
టైల్‌విండ్‌లోని కంటైనర్‌లో భర్తీ చేయబడిన మూలకాలను ఉంచడానికి, ' వస్తువు-<స్థానం/వైపు> ” యుటిలిటీలు ఇమేజ్‌ల వంటి కావలసిన అంశాలతో ఉపయోగించబడతాయి. భర్తీ చేయబడిన మూలకాలను ఉంచడానికి వినియోగదారులు 'object-
' యుటిలిటీలో నిర్దిష్ట స్థానం లేదా వైపు అంటే ఎడమ, కుడి లేదా మధ్యలో నిర్వచించవలసి ఉంటుంది. ఈ కథనం Tailwind CSSలోని కంటైనర్‌లో భర్తీ చేయబడిన మూలకాలను ఉంచే పద్ధతిని వివరించింది.