టైల్‌విండ్‌లో “ఓవర్‌ఫ్లో-ఆటో” మరియు “ఓవర్‌ఫ్లో-స్క్రోల్” ఎలా ఉపయోగించాలి?

ఉదాహరణ
ఈ ఉదాహరణలో, మేము దరఖాస్తు చేస్తాము 'ఓవర్‌ఫ్లో-ఆటో' ప్రయోజనం

• 'ఓవర్‌ఫ్లో-ఆటో' స్క్రోల్‌బార్‌లను జోడించడానికి తరగతి ఉపయోగించబడుతుంది కంటైనర్ మరియు స్క్రోలింగ్ అవసరమైనప్పుడు మాత్రమే వాటిని చూపించు.
• 'bg-purple-300' క్లాస్ పర్పుల్ కలర్‌ను కంటైనర్ బ్యాక్‌గ్రౌండ్ కలర్‌కి సెట్ చేస్తుంది.
• 'p-4' తరగతి కంటైనర్ యొక్క అన్ని వైపులా 4 యూనిట్ల ప్యాడింగ్ సెట్ చేస్తుంది.
• 'mx-16' తరగతి కంటైనర్ యొక్క x-యాక్సిస్‌పై 16 యూనిట్ల మార్జిన్‌ని వర్తింపజేస్తుంది.
• 'mt-5' తరగతి కంటైనర్ పైభాగానికి 5 యూనిట్ల మార్జిన్‌ని వర్తింపజేస్తుంది.
• 'h-32' తరగతి కంటైనర్ యొక్క ఎత్తును 32 యూనిట్లకు సెట్ చేస్తుంది.
• 'టెక్స్ట్-జస్టిఫై' తరగతి కంటైనర్‌లోని కంటెంట్ యొక్క వచనాన్ని సమర్థిస్తుంది.

అవుట్‌పుట్


---





---

టెక్స్ట్ ఓవర్‌ఫ్లో అయినప్పుడు పై అవుట్‌పుట్ నిలువు స్క్రోల్‌బార్‌ను చూపుతుంది. ఇది సూచిస్తుంది 'ఓవర్‌ఫ్లో-ఆటో' ఎలిమెంట్‌కు యుటిలిటీ విజయవంతంగా వర్తించబడింది.

టైల్‌విండ్‌లో “ఓవర్‌ఫ్లో-స్క్రోల్” ఎలా ఉపయోగించాలి?

ఈ యుటిలిటీ స్క్రోల్‌బార్‌లను కంటైనర్‌కు జోడిస్తుంది మరియు స్క్రోలింగ్ అవసరం లేకపోయినా వాటిని ఎల్లప్పుడూ చూపుతుంది. ఇది అన్ని దిశలలో స్క్రోలింగ్ చేయడానికి కూడా అనుమతిస్తుంది. Tailwindలో “ఓవర్‌ఫ్లో-స్క్రోల్”ని ఉపయోగించడానికి, HTML ప్రోగ్రామ్‌ను రూపొందించి, జోడించండి 'ఓవర్‌ఫ్లో-స్క్రోల్' HTML ప్రోగ్రామ్‌లోని నిర్దిష్ట మూలకానికి యుటిలిటీ క్లాస్.





వాక్యనిర్మాణం

< మూలకం తరగతి = 'ఓవర్‌ఫ్లో-స్క్రోల్ ...' > ... మూలకం >

ఉదాహరణ
ఈ ఉదాహరణలో, మేము దరఖాస్తు చేస్తాము 'ఓవర్‌ఫ్లో-స్క్రోల్' ప్రయోజనం

కంటైనర్: < శరీరం >

< div తరగతి = 'ఓవర్‌ఫ్లో-స్క్రోల్ bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >

Tailwind CSS 'ఓవర్‌ఫ్లో-ఆటో', 'ఓవర్‌ఫ్లో-స్క్రోల్', 'ఓవర్‌ఫ్లో-హిడెన్', 'ఓవర్‌ఫ్లో-విజిబుల్' మొదలైన వివిధ 'ఓవర్‌ఫ్లో' యుటిలిటీలను అందిస్తుంది. ఈ యుటిలిటీలు కంటైనర్‌ను మించిన కంటెంట్‌ను నిర్దిష్ట ఎలిమెంట్ ఎలా హ్యాండిల్ చేస్తుందో నిర్ణయిస్తుంది. పరిమాణం. ప్రతి యుటిలిటీ ప్రత్యేకమైన కార్యాచరణను అందిస్తుంది, అయినప్పటికీ, వారి అంతిమ లక్ష్యం అలాగే ఉంటుంది, అంటే ఎంచుకున్న మూలకం యొక్క ఓవర్‌ఫ్లో ప్రవర్తనను నియంత్రించడం.

< / div >

< / శరీరం >

ఇక్కడ, ది 'ఓవర్‌ఫ్లో-స్క్రోల్' స్క్రోల్‌బార్‌లను జోడించడానికి తరగతి ఉపయోగించబడుతుంది

కంటైనర్ మరియు ఎల్లప్పుడూ వాటిని చూపుతుంది.

అవుట్‌పుట్



పై అవుట్‌పుట్‌లో, నిలువు మరియు క్షితిజ సమాంతర స్క్రోల్‌బార్‌లు రెండూ చూడవచ్చు. ఇది సూచిస్తుంది 'ఓవర్‌ఫ్లో-స్క్రోల్' ఎలిమెంట్‌కు యుటిలిటీ విజయవంతంగా వర్తించబడింది.

ముగింపు

టైల్‌విండ్‌లో “ఓవర్‌ఫ్లో-ఆటో” మరియు “ఓవర్‌ఫ్లో-స్క్రోల్”ని ఉపయోగించడానికి, ఇది జోడించాల్సిన అవసరం ఉంది 'ఓవర్‌ఫ్లో-ఆటో' మరియు 'ఓవర్‌ఫ్లో-స్క్రోల్' HTML ప్రోగ్రామ్‌లో కావలసిన మూలకాలకు యుటిలిటీ తరగతులు. రెండు యుటిలిటీ తరగతులు పేర్కొన్న అంశాలకు స్క్రోల్‌బార్‌లను జోడిస్తాయి. అయినప్పటికీ, 'ఓవర్‌ఫ్లో-ఆటో' క్లాస్ స్క్రోలింగ్ అవసరమైనప్పుడు మాత్రమే స్క్రోల్‌బార్‌లను చూపుతుంది, అయితే 'ఓవర్‌ఫ్లో-స్క్రోల్' క్లాస్ ఎల్లప్పుడూ స్క్రోలింగ్ అవసరం లేకపోయినా వాటిని చూపుతుంది. టైల్‌విండ్‌లో “ఓవర్‌ఫ్లో-ఆటో” మరియు “ఓవర్‌ఫ్లో-స్క్రోల్” ఉపయోగించే పద్ధతులను ఈ రైట్-అప్ వివరించింది.