ఈ పోస్ట్ Tailwind CSSలో 'బేస్ స్టైల్స్' జోడించడానికి సాధ్యమయ్యే అన్ని అంశాలను వివరిస్తుంది.
టైల్‌విండ్‌లో 'బేస్' స్టైల్స్‌ను ఎలా జోడించాలి?
'టైల్‌విండ్ CSS' మొత్తం HTML కంటెంట్‌లో లేదా నిర్దిష్ట మూలకంలో 'బేస్' స్టైల్‌లను జోడించడానికి క్రింది మూడు పద్ధతులతో వస్తుంది:
- Tailwindలో బేస్ స్టైల్‌లను జోడించడానికి 'CSS'ని ఉపయోగించండి.
- Tailwindలో బేస్ స్టైల్‌లను జోడించడానికి “ప్లగిన్” ఉపయోగించండి.
వాటిని ఒక్కొక్కటిగా అన్వేషిద్దాం.
ముందస్తు అవసరాలు
ఆచరణాత్మక అమలుకు వెళ్లే ముందు, ముందుగా, 'బేస్ స్టైల్స్' జోడించడానికి ఉపయోగించే 'Linuxhint' పేరుతో కొత్తగా సృష్టించబడిన ప్రాజెక్ట్‌ను చూడండి:
ప్రాజెక్ట్ ఫైల్ నిర్మాణం
ఇప్పుడు, “index.html” ఫైల్‌కి నావిగేట్ చేయండి మరియు దాని HTML కోడ్‌ను చూడండి:
< html >< తల >
< లింక్ href = '/dist/output.css' rel = 'స్టైల్‌షీట్' >
< / తల >
< శరీరం >
< h2 తరగతి = 'అండర్లైన్ టెక్స్ట్-సెంటర్ ఫాంట్-బోల్డ్ టెక్స్ట్-పింక్-600' > Linuxhintకి స్వాగతం! < / h2 >< br >
< h3 తరగతి = 'టెక్స్ట్-సెంటర్ ఫాంట్-బోల్డ్ టెక్స్ట్-ఆరెంజ్-600' > ట్యుటోరియల్: టైల్‌విండ్‌లో బేస్ స్టైల్‌లను జోడిస్తోంది. < / h3 >< br >
< / శరీరం >
పై కోడ్ లైన్లలో:
అవుట్‌పుట్
పై కోడ్ యొక్క అవుట్‌పుట్ ఇక్కడ చూపబడింది:
ఇప్పుడు, బేస్ స్టైల్‌లను జోడించడం ద్వారా పై HTML కోడ్‌ని అనుకూలీకరించడానికి చర్చించిన పద్ధతిని ఉపయోగించండి. Tailwind 'CSS' పద్ధతితో ప్రారంభిద్దాం.
విధానం 1: Tailwindలో “బేస్ స్టైల్స్” జోడించడానికి CSSని ఉపయోగించండి
నిర్దిష్ట HTML మూలకానికి బేస్ స్టైల్‌ని జోడించడానికి సులభమైన మరియు సులభమైన పద్ధతి ప్రాజెక్ట్ యొక్క ప్రధాన CSS ఫైల్‌లో వాటిని జోడించడం. ఇచ్చిన దశలను అనుసరించడం ద్వారా ఆచరణాత్మకంగా ఈ పనిని చేద్దాం.
దశ 1: CSS ఫైల్‌ను తెరవండి
ముందుగా, ప్రధాన CSS ఫైల్‌ను తెరవండి, అనగా, ' style.css ” ఇది అంతర్నిర్మిత టెయిల్‌విండ్ “బేస్”, “కాంపోనెంట్స్” మరియు “యుటిలిటీస్” లేయర్‌లను కలిగి ఉంటుంది:
దశ 2: CSSని జోడించండి
తరువాత, “ని ఉపయోగించి తరగతులను వర్తింపజేయడం ద్వారా నిర్దిష్ట “
” మరియు “” HTML మూలకాల కోసం “బేస్” శైలిని జోడించండి @వర్తించు 'బేస్' లేయర్‌లో 'ఆదేశిక' సహాయంతో @పొర ” కీవర్డ్. '@లేయర్' కీలకపదాలు పేర్కొన్న 'బేస్' లేయర్‌లో నిర్వచించిన తరగతులను జోడిస్తాయి: @లేయర్ బేస్ {
h2 {
@వర్తింపజేయి టెక్స్ట్-3xl;
}
h3 {
@వర్తిస్తాయి టెక్స్ట్-xl;
}
}
h2 {
@వర్తింపజేయి టెక్స్ట్-3xl;
}
h3 {
@వర్తిస్తాయి టెక్స్ట్-xl;
}
}
పై కోడ్ లైన్లలో, ' ఫాంట్ పరిమాణం '
' మరియు '' మూలకాలకు వరుసగా పేర్కొన్న పరిమాణం వరకు విస్తరించడానికి 'తరగతి వర్తించబడుతుంది:
ఫైల్‌ను సేవ్ చేయండి (Ctrl + S).
దశ 3: అవుట్‌పుట్
ఇప్పుడు, లైవ్ సర్వర్‌లో కోడ్‌ని అమలు చేయండి మరియు అవుట్‌పుట్‌ను ఈ క్రింది విధంగా చూడండి:
ఇక్కడ, టైల్‌విండ్ “ఫాంట్ సైజు” క్లాస్ బేస్ లేయర్‌లో పేర్కొన్న ఎలిమెంట్‌కు విజయవంతంగా వర్తింపజేయబడిందని అవుట్‌పుట్ చూపిస్తుంది.
గమనిక : ఇదే విధానం అన్ని ఇతర Tailwind CSS తరగతులకు ఉపయోగించబడుతుంది.
విధానం 2: టైల్‌విండ్‌లో “బేస్ స్టైల్స్” జోడించడానికి ప్లగిన్‌ని ఉపయోగించండి
'బేస్' స్టైల్‌లను జోడించడానికి మరొక ఉపయోగకరమైన పద్ధతి '' అని వ్రాయడం అనుసంధానించు 'మరియు' ఉపయోగించండి addBase() ” ఫంక్షన్. ఈ ఫంక్షన్ 'లో కొత్త తరగతులను నమోదు చేయడానికి సహాయపడుతుంది బేస్ ” పొర ఆదేశం. ఈ ఫంక్షన్ Tailwind “tailwind.config.js” ఫైల్‌లో ఉపయోగించబడుతుంది. ఆచరణాత్మకంగా చేద్దాం.
దశ 1: “addBase()” ఫంక్షన్‌ని నిర్వచించండి
ముందుగా, 'కి నావిగేట్ చేయండి tailwind.config.js ” కాన్ఫిగరేషన్ ఫైల్ మరియు ప్లగిన్ నుండి బేస్ స్టైల్‌లను జోడించి “addBase()” ఫంక్షన్‌కు కాల్ చేయండి:
ఫైల్‌ను సేవ్ చేయండి.
దశ 2: అవుట్‌పుట్
చివరగా, ఇచ్చిన HTML కోడ్‌ని అమలు చేయండి మరియు అవుట్‌పుట్ చూడండి:
చూసినట్లుగా, 'addBase()' ఫంక్షన్‌లో JavaScript ఆబ్జెక్ట్‌గా నిర్వచించబడిన Tailwind 'ఫాంట్ సైజు' క్లాస్ పేర్కొన్న HTML మూలకాలకు వర్తించబడుతుంది.
ముగింపు
టైల్‌విండ్ బేస్ స్టైల్‌లను 'ని ఉపయోగించి సులభంగా జోడించవచ్చు CSS 'ప్రధాన CSS ఫైల్‌లోని తరగతులు మరియు ' అనుసంధానించు 'తో' addBase() కాన్ఫిగరేషన్ ఫైల్‌లో ఫంక్షన్. 'CSS' పద్ధతి సరళమైన పద్ధతిగా పరిగణించబడుతుంది, ఎందుకంటే ఇది 'బేస్' లేయర్‌లోని బేస్ స్టైల్‌లను మాత్రమే నిర్వచిస్తుంది మరియు పేర్కొన్న మూలకంపై వాటిని స్వయంచాలకంగా అమలు చేస్తుంది. మరోవైపు, ' యొక్క 'ప్లగ్ఇన్' విభాగం tailwind.config.js ” ఫైల్‌కు బేస్ స్టైల్‌లను జావాస్క్రిప్ట్ ఆబ్జెక్ట్‌లుగా నిర్వచించడానికి “addBase()” ఫంక్షన్ అవసరం. ఈ పోస్ట్ Tailwind CSSలో బేస్ స్టైల్‌లను జోడించడానికి సాధ్యమయ్యే అన్ని అంశాలను వివరించింది.