ఈ ట్యుటోరియల్ క్రింది విషయాలను వివరిస్తుంది:
- టెయిల్విండ్లో టెక్స్ట్ డెకరేషన్ మందంతో హోవర్, ఫోకస్ మరియు యాక్టివ్ స్టేట్లను ఎలా అప్లై చేయాలి?
- 'తో టెక్స్ట్ డెకరేషన్ మందాన్ని వర్తింపజేయడం హోవర్ ” రాష్ట్రం.
- 'తో టెక్స్ట్ డెకరేషన్ మందాన్ని వర్తింపజేయడం దృష్టి ” రాష్ట్రం.
- 'తో టెక్స్ట్ డెకరేషన్ మందాన్ని వర్తింపజేయడం చురుకుగా ” రాష్ట్రం.
టెయిల్విండ్లో టెక్స్ట్ డెకరేషన్ మందంతో హోవర్, ఫోకస్ మరియు యాక్టివ్ స్టేట్లను ఎలా అప్లై చేయాలి?
ది ' టెక్స్ట్ అలంకరణ మందం లక్ష్య స్థితిని ఉపయోగించడం ద్వారా 'ఈ రాష్ట్రాలతో వర్తించవచ్చు మరియు ' టెక్స్ట్-అలంకరణ-మందం పిక్సెల్లలో లక్ష్యం మందం విలువను అనుసరించే లక్షణం. ఈ విధానాల ఏకీకరణ మౌస్ హోవర్పై టెక్స్ట్ డెకరేషన్ మందాన్ని (పిక్సెల్లలో) మారుస్తుంది, ఎలిమెంట్ ఫోకస్ చేయబడుతుంది లేదా ఎలిమెంట్ సక్రియంగా ఉంటుంది. ఈ పిక్సెల్లు ' 1px ',' 2px ',' 4px 'లేదా' 8px ”. ఇది ఎక్కువ పిక్సెల్లు, మందం ఎక్కువగా ఉంటుంది.
ఉదాహరణ 1: 'హోవర్' స్టేట్తో టెక్స్ట్ డెకరేషన్ మందాన్ని వర్తింపజేయడం
ఈ ఉదాహరణ వర్తిస్తుంది ' టెక్స్ట్-అలంకరణ-మందం 'తో ఆస్తి' హోవర్ ” మౌస్ హోవర్పై మందాన్ని సెట్ చేయడానికి స్థితి:
< html >
< తల >
< మెటా అక్షర సమితి = 'utf-8' >
< మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' >
< స్క్రిప్ట్ src = 'https://cdn.tailwindcss.com' >< / స్క్రిప్ట్ >< / తల >
< శరీరం >
< వచన ప్రాంతం తరగతి = 'అండర్లైన్ హోవర్: డెకరేషన్-4' > జేమ్స్ సమయపాలన పాటించేవాడు < / వచన ప్రాంతం >
< / శరీరం >
< / html >
ఈ కోడ్ స్నిప్పెట్లో, టెయిల్విండ్ ఫంక్షనాలిటీలను ఉపయోగించుకోవడానికి “
” ట్యాగ్లో CDN పాత్ను చేర్చండి. ఆ తర్వాత, లోపల ' 'మూలకం, 'ని పేర్కొనండి హోవర్ 'అనువర్తితతో పాటు రాష్ట్రం' టెక్స్ట్-అలంకరణ-మందం ” మౌస్ హోవర్పై డెకరేషన్ మందాన్ని డిఫాల్ట్ అండర్లైన్ నుండి “4” పిక్సెల్ల మందానికి సెట్ చేసే లక్షణం.అవుట్పుట్
ఈ అవుట్పుట్ వచన అలంకరణ యొక్క మందం అంటే, అండర్లైన్ తదనుగుణంగా సెట్ చేయబడిందని సూచిస్తుంది.
ఉదాహరణ 2: 'ఫోకస్' స్టేట్తో టెక్స్ట్ డెకరేషన్ మందాన్ని వర్తింపజేయడం
కింది ఉదాహరణ కోడ్ ' ట్యాబ్ ”కీ:
< html >
< తల >
< మెటా అక్షర సమితి = 'utf-8' >
< మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' >
< స్క్రిప్ట్ src = 'https://cdn.tailwindcss.com' >< / స్క్రిప్ట్ >< / తల >
< శరీరం >
< వచన ప్రాంతం తరగతి = 'అండర్లైన్ డెకరేషన్-1 ఫోకస్: డెకరేషన్-4' >జేమ్స్ సమయపాలన < / వచన ప్రాంతం >
< / శరీరం >
< / html >
ఈ కోడ్ బ్లాక్లో, CDN పాత్ను చేర్చడానికి చర్చించిన విధానాలను పునరావృతం చేయండి మరియు “ ' మూలకం. ఇప్పుడు, పరివర్తన చెందిన మందంతో పాటు డిఫాల్ట్ మందాన్ని పేర్కొనండి అంటే, '4' పిక్సెల్లను ' దృష్టి 'ప్రేరేపిత స్థితిపై మార్పును వర్తింపజేయడానికి స్థితి.
గమనిక: డిఫాల్ట్' అండర్లైన్ ' ఇంకా ' అలంకరణ-1 కింద గీత 'గుణాలు అదే ఫలితాన్ని ఇస్తాయి.
అవుట్పుట్
ఈ అవుట్పుట్ నుండి, టెక్స్ట్ డెకరేషన్ మందం తదనుగుణంగా మార్చబడిందని ధృవీకరించవచ్చు.
ఉదాహరణ 3: 'యాక్టివ్' స్టేట్తో టెక్స్ట్ డెకరేషన్ మందాన్ని వర్తింపజేయడం
ఈ కోడ్ స్నిప్పెట్లో, ఎలిమెంట్ సక్రియంగా ఉన్నప్పుడు టెక్స్ట్ డెకరేషన్ యొక్క మందం మార్చబడుతుంది:
< html >
< తల >
< మెటా అక్షర సమితి = 'utf-8' >
< మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' >
< స్క్రిప్ట్ src = 'https://cdn.tailwindcss.com' >< / స్క్రిప్ట్ >< / తల >
< శరీరం >
< వచన ప్రాంతం తరగతి = 'అండర్లైన్ డెకరేషన్-1 యాక్టివ్: డెకరేషన్-8' >జేమ్స్ సమయపాలన < / వచన ప్రాంతం >
< / శరీరం >
< / html >
ఈ కోడ్ లైన్ల ప్రకారం, అదే విధంగా, CDN పాత్ మరియు “
అవుట్పుట్
గమనించినట్లుగా, టెక్స్ట్-డెకరేషన్ యొక్క మందం అంటే, ఎలిమెంట్లో క్లిక్ చేయడం ద్వారా అండర్లైన్ “8” పిక్సెల్లకు మార్చబడుతుంది అంటే, ఎలిమెంట్ తగిన విధంగా సక్రియంగా ఉంటుంది.
ముగింపు
ది ' హోవర్ ',' దృష్టి 'మరియు' చురుకుగా 'రాష్ట్రాలు'తో వర్తింపజేయవచ్చు టెక్స్ట్-అలంకరణ-మందం ”ఎలిమెంట్పై మౌస్పై మందాన్ని అమర్చడం, మూలకం దృష్టి కేంద్రీకరించడం లేదా మూలకం వరుసగా యాక్టివ్గా ఉంటుంది. టైల్విండ్లో టెక్స్ట్-డెకరేషన్ మందంతో హోవర్, ఫోకస్ మరియు యాక్టివ్ స్టేట్లను ఎలా అప్లై చేయాలో ఈ రైట్-అప్ వివరించింది.