ఈ కథనం Tailwind వినియోగాలను ఉపయోగించి మూలకం యొక్క ఫాంట్ కుటుంబాన్ని నియంత్రించే విధానాన్ని అందిస్తుంది.
టైల్‌విండ్ యుటిలిటీలను ఉపయోగించి మూలకం యొక్క ఫాంట్ కుటుంబాన్ని ఎలా నియంత్రించాలి?
టైల్‌విండ్‌లోని మూలకం యొక్క ఫాంట్ కుటుంబాన్ని నియంత్రించడానికి, మూలకానికి క్రింది యుటిలిటీని అందించాలి:
ఫాంట్- { ఫాంట్ కుటుంబం }
పైన అందించిన యుటిలిటీని ఉపయోగించి సెట్ చేయగల మూడు డిఫాల్ట్ ఫాంట్ కుటుంబాలు ఉన్నాయి. వీటితొ పాటు ' సెరిఫ్ ',' లేకుండా ', మరియు' మోనో ”.
'ని ఉపయోగించి ప్రదర్శనలో ఈ ఫాంట్ కుటుంబాలను ఉపయోగిస్తాము ఫాంట్-{ఫాంట్ కుటుంబం} 'ఇది ఎలా పని చేస్తుందో చూడటానికి తరగతి:
< div తరగతి = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
ఇది FONT-SERIF కుటుంబం
< / div >
< div తరగతి = ' font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
ఇది FONT-SANS కుటుంబం
< / div >
< div తరగతి = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
ఇది ఫాంట్-మోనో కుటుంబం
< / div >
పై కోడ్ యొక్క వివరణ క్రింది విధంగా ఉంది:
- 'ని ఉపయోగించి సృష్టించబడిన మూడు div అంశాలు ఉన్నాయి ” మరియు వివిధ ఫాంట్ కుటుంబాలతో అందించబడ్డాయి.
- ది ' ఫాంట్ కుటుంబం} ” క్లాస్ మూలకంలోని వచనానికి పేర్కొన్న ఫాంట్ కుటుంబాన్ని అందిస్తుంది.
- ది ' గుండ్రని-xl 'తరగతి div మూలకం యొక్క మూలలను గుండ్రంగా చేస్తుంది.
- ది ' నీడ-lg 'తరగతి div మూలకానికి పెద్ద నీడను అందిస్తుంది.
- ది ' టెక్స్ట్-సెంటర్ ” వచనాన్ని మూలకం మధ్యలో సమలేఖనం చేస్తుంది.
- ది ' py-2 'మరియు' నా-2 'తరగతులు అందజేస్తాయి' 8px మూలకం యొక్క ఎగువ మరియు దిగువ దిశలో పాడింగ్ మరియు మార్జిన్.
- ది ' bg-{color}-{number} మూలకం యొక్క నేపథ్యాన్ని పేర్కొన్న రంగుకు సెట్ చేయడానికి తరగతి బాధ్యత వహిస్తుంది.
అవుట్‌పుట్ నుండి, ప్రతి మూలకం వేరే ఫాంట్ కుటుంబాన్ని కలిగి ఉందని స్పష్టంగా తెలుస్తుంది:
మేము హోవర్ ఫంక్షన్‌ని ఉపయోగించి మూలకం యొక్క ఫాంట్ కుటుంబాన్ని కూడా డైనమిక్‌గా మార్చవచ్చు. ఉదాహరణ కోసం, క్రింది కోడ్ ద్వారా వెళ్ళండి:
< div తరగతి = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >ఇది డిఫాల్ట్‌గా ఫాంట్-మోనో కుటుంబం< / div >పైన అందించిన కోడ్‌లో, “ హోవర్: ఫాంట్-{కుటుంబం} ” మౌస్ కర్సర్ దానిపై హోవర్ చేసిన వెంటనే మూలకం యొక్క ఫాంట్ కుటుంబాన్ని మార్చడానికి యుటిలిటీ బాధ్యత వహిస్తుంది. వినియోగదారు మౌస్ కర్సర్‌ను దానిపై ఉంచినప్పుడు టెక్స్ట్ యొక్క ఫాంట్ కుటుంబం మారుతుందని అవుట్‌పుట్‌లో చూడవచ్చు:
టైల్‌విండ్‌లోని మూలకం యొక్క ఫాంట్ కుటుంబాన్ని నియంత్రించడం గురించి అంతే.
ముగింపు
టైల్‌విండ్‌లో, ''ని ఉపయోగించి మూలకానికి ఫాంట్ కుటుంబాన్ని కేటాయించవచ్చు ఫాంట్ కుటుంబం} ” తరగతి. Tailwind అందించిన మూడు డిఫాల్ట్ ఫాంట్ కుటుంబాలు ఉన్నాయి, అనగా ' లేకుండా ',' సెరిఫ్ ', మరియు' మోనో ”. వినియోగదారు మూలకం స్థితిని మార్చిన తర్వాత మూలకం యొక్క ఫాంట్ కుటుంబాన్ని కూడా మార్చవచ్చు. ఈ కథనం Tailwindలో మూలకం యొక్క ఫాంట్ కుటుంబాన్ని నియంత్రించే విధానాన్ని అందించింది.