టైల్‌విండ్‌లో బేస్ స్టైల్‌ని జోడించడం ద్వారా స్టైల్ హెడ్డింగ్‌ల పద్ధతిని ఈ రైట్-అప్ వివరిస్తుంది.
బేస్ స్టైల్ టైల్‌విండ్‌ని ఉపయోగించి హెడ్డింగ్‌లను ఎలా స్టైల్ చేయాలి?
Tailwindలో హెడ్డింగ్‌లను స్టైల్ చేయడానికి, అందించిన దశలను చూడండి:
- ప్రాజెక్ట్ యొక్క CSS ఫైల్‌ను తెరవండి.
- CSS ఫైల్‌లో, “ని ఉపయోగించి హెడ్డింగ్‌లకు బేస్ స్టైల్‌ని జోడించండి @పొర 'నిర్దేశనం' కింద @tailwind బేస్; ” ఆదేశం.
- ఒక HTML ప్రోగ్రామ్‌ను రూపొందించి, అందులో హెడ్డింగ్ ఎలిమెంట్‌లను ఉపయోగించండి.
- HTML ప్రోగ్రామ్‌ను అమలు చేయండి మరియు అవుట్‌పుట్‌ను ధృవీకరించండి.
దశ 1: CSS ఫైల్‌లోని హెడ్డింగ్‌లకు బేస్ స్టైల్‌ని జోడించండి
ముందుగా, ''ని తెరవండి style.css ” ఫైల్ చేసి దానిలోని హెడ్డింగ్‌లకు బేస్ స్టైల్‌ని జోడించి “ @పొర ” ఆదేశం. ఉదాహరణకు, మేము ఈ క్రింది హెడ్డింగ్‌లకు బేస్ స్టైల్‌ని జోడించాము:
@టెయిల్‌విండ్ బేస్ ;
@పొర బేస్ {
h1 {
@వర్తించు టెక్స్ట్-6xl ;
}
h2 {
@వర్తించు టెక్స్ట్-5xl ;
}
h3 {
@వర్తించు టెక్స్ట్-4xl ;
}
h4 {
@వర్తించు టెక్స్ట్-3xl ;
}
h5 {
@వర్తించు టెక్స్ట్-2xl ;
}
}
@టెయిల్‌విండ్ భాగాలు ;
@టెయిల్‌విండ్ వినియోగాలు ;
ఇక్కడ:
- ' @లేయర్ బేస్ {…} ” కొత్త బేస్ లేయర్‌ని నిర్వచిస్తుంది మరియు హెడ్డింగ్ కాంపోనెంట్స్ కోసం స్టైల్‌లను కలిగి ఉంటుంది.
- ' h1 {@apply text-6xl; } ' వర్తిస్తుంది ' టెక్స్ట్-6xl 'యుటిలిటీ క్లాస్ నుండి' h1 ”మూలకాలు.
- అదేవిధంగా, ' h2 ',' h3 ',' h4 ', మరియు' h5 'మూలకాలు వాటి ఫాంట్ పరిమాణాలను ఉపయోగించి సెట్ చేయబడ్డాయి' @వర్తించు ” మరియు సంబంధిత వినియోగ తరగతులు (టెక్స్ట్-5xl, టెక్స్ట్-4xl, టెక్స్ట్-3xl మరియు టెక్స్ట్-2xl).
దశ 2: హెడ్డింగ్‌లను ఉపయోగించి HTML వెబ్ పేజీని సృష్టించండి
అప్పుడు, HTML ప్రోగ్రామ్‌ను తయారు చేసి, అందులోని హెడ్డింగ్ ఎలిమెంట్‌లను ఉపయోగించండి. ఇక్కడ, మేము ఈ క్రింది హెడ్డింగ్ ఎలిమెంట్‌లను ఉపయోగించాము:
< శరీరం >
< div తరగతి = 'h-స్క్రీన్ జస్టిఫై-సెంటర్ టెక్స్ట్-సెంటర్ bg-వైలెట్-400' >
< h1 > హెడ్డింగ్ 1 < / h1 >
< h2 > హెడ్డింగ్ 2 < / h2 >
< h3 > శీర్షిక 3 < / h3 >
< h4 > హెడ్డింగ్ 4 < / h4 >
< h5 > హెడ్డింగ్ 5 < / h5 >
< / div >
< / శరీరం >
దశ 3: HTML ప్రోగ్రామ్‌ను అమలు చేయండి
చివరగా, HTML ప్రోగ్రామ్‌ను అమలు చేయండి మరియు ధృవీకరణ కోసం వెబ్ పేజీని వీక్షించండి:
CSS ఫైల్‌లో స్టైల్‌లుగా ఉన్నందున పై అవుట్‌పుట్ హెడ్డింగ్‌లను ప్రదర్శించింది.
ముగింపు
టైల్‌విండ్‌లో హెడ్డింగ్‌లను స్టైల్ చేయడానికి, CSS ఫైల్‌ను తెరిచి, ''ని ఉపయోగించి హెడ్డింగ్‌లకు బేస్ స్టైల్‌ను జోడించండి @పొర 'నిర్దేశనం' కింద @tailwind బేస్; ” ఆదేశం. అప్పుడు, ఒక HTML ప్రోగ్రామ్‌ను తయారు చేసి, అందులో హెడ్డింగ్ ఎలిమెంట్‌లను ఉపయోగించండి. చివరగా, అవుట్‌పుట్‌ని ధృవీకరించడానికి HTML వెబ్ పేజీని వీక్షించండి. టైల్‌విండ్‌లో బేస్ స్టైల్‌ని జోడించడం ద్వారా స్టైల్ హెడ్డింగ్‌ల పద్ధతిని ఈ రైట్-అప్ వివరించింది.