టైల్‌విండ్‌లో, కారక నిష్పత్తి అనేది వీడియో లేదా చిత్రం వంటి ఎలిమెంట్ యొక్క వెడల్పు మరియు ఎత్తు యొక్క నిష్పత్తి. Tailwind CSS యాస్పెక్ట్-రేషియో యుటిలిటీల కోసం స్థానిక మద్దతును ప్రవేశపెట్టింది, ఇది మూలకం కోసం కావలసిన కారక నిష్పత్తిని సెట్ చేయడానికి CSS కారక నిష్పత్తి ప్రాపర్టీని ఉపయోగిస్తుంది. అయితే, పాత బ్రౌజర్‌లలో ఈ ప్రాపర్టీకి మద్దతు లేదు. అందువల్ల, వినియోగదారులు ఈ బ్రౌజర్‌లకు మద్దతు ఇవ్వడానికి కారక నిష్పత్తి ప్లగ్ఇన్‌ని ఉపయోగించవచ్చు. ఈ ప్లగ్ఇన్ రెండు తరగతులను పరిచయం చేస్తుంది అంటే, ' aspect-w-{n} 'మరియు' aspect-h-{n} ”, ఇది ఒక మూలకానికి స్థిరమైన కారక నిష్పత్తిని అందించడానికి కలపవచ్చు.
ఈ కథనం Tailwindలో కారక నిష్పత్తి ప్లగిన్‌ని సెట్ చేసే పద్ధతిని వివరిస్తుంది.
Tailwind CSSలో యాస్పెక్ట్ రేషియో ప్లగిన్‌ని ఎలా సెట్ చేయాలి?
టైల్‌విండ్‌లో కారక నిష్పత్తి ప్లగిన్‌ని సెట్ చేయడానికి, దిగువ అందించిన దశలను చూడండి:
- ప్రాజెక్ట్‌లో యాస్పెక్ట్ రేషియో ప్లగిన్‌ని ఇన్‌స్టాల్ చేయండి
- “tailwind.config.js” ఫైల్‌లో కారక నిష్పత్తి ప్లగిన్‌ని జోడించి, “ని నిలిపివేయండి అంశం ”కోర్ ప్లగ్ఇన్
- HTML ప్రోగ్రామ్‌లో కారక నిష్పత్తి ప్లగ్ఇన్ తరగతులను ఉపయోగించండి
- HTML వెబ్ పేజీని వీక్షించడం ద్వారా అవుట్‌పుట్‌ను ధృవీకరించండి
దశ 1: టైల్‌విండ్ ప్రాజెక్ట్‌లో యాస్పెక్ట్ రేషియో ప్లగిన్‌ని ఇన్‌స్టాల్ చేయండి
ముందుగా, ప్రాజెక్ట్‌లో కారక నిష్పత్తి ప్లగిన్‌ను ఇన్‌స్టాల్ చేయడానికి టెర్మినల్‌ను తెరిచి, దిగువ పేర్కొన్న ఆదేశాన్ని అమలు చేయండి:
asl మరియు @ tailwindcss / కారక నిష్పత్తి
దశ 2: టైల్‌విండ్ కాన్ఫిగర్ ఫైల్‌లో ఆస్పెక్ట్ రేషియో ప్లగిన్‌ని కాన్ఫిగర్ చేయండి
ఆ తర్వాత, “tailwind.config.js” ఫైల్‌ని తెరిచి, అందులో కారక నిష్పత్తి ప్లగిన్‌ని జోడించి, “ని నిలిపివేయండి అంశం 'ఏ వైరుధ్యాలను నివారించడానికి కోర్ ప్లగ్ఇన్:
module.exports = {విషయము: [ './index.html' ] ,
కోర్ ప్లగిన్లు: {
కారక నిష్పత్తి: తప్పుడు ,
} ,
ప్లగిన్లు: [
అవసరం ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;
దశ 3: HTML ప్రోగ్రామ్‌లో ఆస్పెక్ట్ రేషియో ప్లగిన్‌ని ఉపయోగించండి
ఇప్పుడు, ఒక HTML ప్రోగ్రామ్‌ను తయారు చేసి, దానిలోని కారక నిష్పత్తి ప్లగ్ఇన్‌ని ఉపయోగించండి. ఉదాహరణకు, మేము ఉపయోగించాము ' aspect-w-16 'మరియు' aspect-h-9 ” 16:9 కారక నిష్పత్తిని నిర్వహించడానికి మా ప్రోగ్రామ్‌లోని తరగతులు:
< శరీరం >< div తరగతి = 'aspect-w-16 aspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
ఫ్రేమ్‌బోర్డర్ = '0' అనుమతిస్తాయి = 'యాక్సిలరోమీటర్; ఆటోప్లే;
క్లిప్బోర్డ్-వ్రాయడం; ఎన్క్రిప్టెడ్-మీడియా; గైరోస్కోప్;
పిక్చర్-ఇన్-పిక్చర్' పూర్తి స్క్రీన్‌ని అనుమతించండి > iframe >
div >
శరీరం >
ఇక్కడ:
- ది ' 'మూలకం రెండు కారక నిష్పత్తి ప్లగ్ఇన్ తరగతులను ఉపయోగిస్తోంది, అనగా, ' aspect-w-16 'మరియు' aspect-h-9 ”. ఈ తరగతులు 16:9 స్థిర కారక నిష్పత్తితో కంటైనర్‌ను రూపొందించడానికి ఉపయోగించబడతాయి.
- ది '