ఈ కథనం టైల్‌విండ్‌లోని “క్లియర్” యుటిలిటీలపై బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను వర్తింపజేసే పద్ధతిని ఉదాహరణగా చూపుతుంది.
Tailwindలో 'క్లియర్'లో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను ఎలా ఉపయోగించాలి?
టైల్‌విండ్‌లోని “క్లియర్” యుటిలిటీలపై నిర్దిష్ట బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను వర్తింపజేయడానికి, HTML నిర్మాణాన్ని సృష్టించండి. అప్పుడు, కావలసిన విలువను నిర్వచించండి ' స్పష్టమైన-<విలువ> 'ని ఉపయోగించి వివిధ స్క్రీన్ పరిమాణాల కోసం ప్రయోజనం' md 'లేదా' lg ” బ్రేక్ పాయింట్స్. చివరగా, వెరిఫికేషన్ కోసం వెబ్ పేజీ స్క్రీన్ పరిమాణాన్ని మార్చండి.
ఉదాహరణ
ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము md 'బ్రేక్‌పాయింట్‌తో' స్పష్టమైన-రెండూ 'యుటిలిటీ మరియు' lg 'బ్రేక్‌పాయింట్‌తో' స్పష్టమైన-ఏదీ లేదు 'ఉపయోగం' మధ్యస్థ మరియు పెద్ద స్క్రీన్ పరిమాణంలో దాని స్థానాన్ని మార్చడానికి మూలకం:
< శరీరం >
< div తరగతి = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' తరగతి = 'ఫ్లోట్-లెఫ్ట్ p-3 w-28 h-24' ప్రతిదీ = 'చిత్రం' / >
< img src = 'tailwindcss_img.png' తరగతి = 'ఫ్లోట్-కుడి p-3' ప్రతిదీ = 'చిత్రం' / >
< p తరగతి = 'టెక్స్ట్-జస్టిఫై క్లియర్-లెఫ్ట్ md:క్లియర్-రెండూ lg:క్లియర్-ఏమీ లేదు' > Tailwind CSS ఒక మూలకం చుట్టూ కంటెంట్ చుట్టడాన్ని నియంత్రించడానికి 'ఫ్లోట్స్' యుటిలిటీలను అందిస్తుంది.
ఈ ఉదాహరణ Tailwindలో 'క్లియర్' యుటిలిటీతో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను ఎలా ఉపయోగించాలో చూపుతుంది. < / p >
< / div >
< / శరీరం >
ఇక్కడ:
- 'ఫ్లోట్-ఎడమ' తరగతి కంటైనర్ యొక్క ఎడమ వైపు మూలకాలను తేలుతుంది.
- 'ఫ్లోట్-కుడి' తరగతి కంటైనర్ యొక్క కుడి వైపున మూలకాలను తేలుతుంది.
- 'క్లియర్-ఎడమ' క్లాస్
మూలకాన్ని కంటైనర్‌లో ఎడమ-ఫ్లోటెడ్ ఎలిమెంట్ దిగువన తరలిస్తుంది.
- 'md: క్లియర్-రెండూ' class ఎడమ మరియు కుడి ఫ్లోట్‌లను క్లియర్ చేస్తుంది మరియు మధ్యస్థ స్క్రీన్ పరిమాణంలో వాటి క్రింద
మూలకాన్ని ఉంచుతుంది.
- 'lg: క్లియర్-ఏమీ లేదు' క్లాస్
మూలకానికి వర్తించే ఏదైనా క్లియర్‌ను నిలిపివేస్తుంది మరియు పెద్ద స్క్రీన్ పరిమాణంలో కంటైనర్‌కు రెండు వైపులా ఎలిమెంట్‌ను ఫ్లోట్ చేయడానికి అనుమతిస్తుంది.
అవుట్‌పుట్
పై అవుట్‌పుట్ ప్రకారం, పేర్కొన్న బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలు 'క్లియర్' యుటిలిటీకి విజయవంతంగా వర్తింపజేయబడ్డాయి.
ముగింపు
టైల్‌విండ్‌లోని “క్లియర్” యుటిలిటీలపై బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను వర్తింపజేయడానికి, కావలసిన విలువను “కి నిర్వచించండి స్పష్టమైన-<విలువ> 'ని ఉపయోగించడం ద్వారా వివిధ స్క్రీన్ పరిమాణాల కోసం యుటిలిటీ' md 'లేదా' lg ” బ్రేక్ పాయింట్స్. ధృవీకరణ కోసం, వెబ్ పేజీ స్క్రీన్ పరిమాణాన్ని మార్చండి మరియు మార్పులను నిర్ధారించుకోండి. ఈ కథనం టైల్‌విండ్‌లోని “క్లియర్” యుటిలిటీలపై నిర్దిష్ట బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను వర్తింపజేయడానికి ఉదాహరణను ప్రదర్శించింది.