ఈ పోస్ట్ Tailwind CSSలో టెంప్లేట్ పాత్‌లను కాన్ఫిగర్ చేసే విధానాన్ని ప్రదర్శిస్తుంది.
టెయిల్‌విండ్ CSSలో టెంప్లేట్ పాత్‌లను ఎలా కాన్ఫిగర్ చేయాలి?
ది ' tailwind.config.js ” కాన్ఫిగరేషన్ ఫైల్ టెంప్లేట్ పాత్‌లను కాన్ఫిగర్ చేయడానికి ఉపయోగించబడుతుంది, దీనిలో వినియోగదారు Tailwind CSSని పొందుపరచాలనుకుంటున్నారు. ఇది డిఫాల్ట్‌గా ఉండదు, అయితే ఇది “npm” ప్యాకేజీ మేనేజర్‌ని ఉపయోగించి ప్రాజెక్ట్‌లో సృష్టించబడుతుంది.
'tailwind.config.js' ఫైల్‌లో టెంప్లేట్ పాత్‌లను కాన్ఫిగర్ చేయడానికి ఈ విభాగం కొన్ని ముఖ్యమైన దశలను నిర్వహిస్తుంది.
గమనిక : “టైల్‌విండ్ CSS”ని అమలు చేయడానికి, ముందుగా “ని ఇన్స్టాల్ చేయండి Node.js 'అందించిన లింక్ ద్వారా మీ సిస్టమ్‌లో అప్లికేషన్' https://nodejs.org/en ” ఆదేశాలను అమలు చేయడానికి.
దశ 1: “టైల్‌విండ్‌సిఎస్‌ఎస్” ఇన్స్టాల్ చేయండి
ముందుగా, 'Project1' పేరుతో కొత్త ప్రాజెక్ట్‌ని సృష్టించి, దానిని కోడ్ ఎడిటర్‌లో తెరవండి. ఇప్పుడు, కొత్త టెర్మినల్‌ని తెరిచి, కింది కమాండ్ సహాయంతో “Tailwind CSS”ని ఇన్స్టాల్ చేయండి:
npm ఇన్స్టాల్ -D tailwindcss
పై ఆదేశంలో, ' npm ” అనేది క్రింది విధంగా “TailwindCSS”ని ఇన్స్టాల్ చేసే నోడ్ ప్యాకేజీ మేనేజర్:
ఇక్కడ అవుట్‌పుట్ “టైల్‌విండ్ CSS” మరియు దాని ప్యాకేజీలు విజయవంతంగా డౌన్‌లోడ్ అయినట్లు చూపిస్తుంది.
దశ 2: Tailwind కాన్ఫిగరేషన్ ఫైల్‌ను సృష్టించండి
తరువాత, టైల్‌విండ్ CSS కాన్ఫిగరేషన్ ఫైల్‌ని సృష్టించండి ' tailwind.config.js ” ఈ ఆదేశాన్ని ఉపయోగించి HTML టెంప్లేట్ పాత్‌లు, యూజర్-డిఫైన్డ్ క్లాస్‌లు మరియు అనేక ఇతర వాటిని పేర్కొనడం వంటి దాని కార్యాచరణను విస్తరించడానికి:
పేర్కొన్న కాన్ఫిగరేషన్ ఫైల్ సృష్టించబడిందని అవుట్‌పుట్ చూపుతుంది. ఇప్పుడు, ' tailwind.config.js ” ఫైల్:
దశ 3: ప్రధాన CSS ఫైల్‌కు టైల్‌విండ్ ఆదేశాలను జోడించండి
ఇప్పుడు, సృష్టించబడిన టైల్‌విండ్ ప్రాజెక్ట్‌కు ప్రత్యేక కార్యాచరణను జోడించడం కోసం, ముందుగా ఉన్న మూడు టెయిల్‌విండ్ ఆదేశాలను ప్రధానంగా జోడించండి style.css ” ఫైల్:
@tailwind భాగాలు;
@tailwind వినియోగాలు;
పై కోడ్ బ్లాక్‌లో:
- బేస్ : ఇది బ్యాక్‌గ్రౌండ్ కలర్, టెక్స్ట్ కలర్ లేదా ఫాంట్ ఫ్యామిలీ వంటి డిఫాల్ట్‌గా వెబ్ పేజీ స్టైలింగ్‌ను సవరించే “టైల్‌విండ్ CSS” మొదటి లేయర్.
- భాగాలు : ఈ రెండవ లేయర్ బ్రౌజర్ పరిమాణం ప్రకారం వెడల్పును జోడించే “కంటైనర్” క్లాస్ లోపల అందుబాటులో ఉంది. దాని విభాగంలో, వినియోగదారు వారి స్వంతంగా సృష్టించిన బాహ్య భాగాలను జోడించవచ్చు.
- వినియోగాలు : ఇది నీడలు, రంగులు, జోడించడం, ఫ్లెక్స్ మరియు అనేక ఇతర తరగతులు వంటి దాదాపు అన్ని స్టైలింగ్ తరగతులను జోడించే మూడవ పొర.
ఈ ఆదేశాలను క్రింది విండోలో చూడవచ్చు:
దశ 4: CSSని రూపొందించండి
ఇప్పుడు, కింది ఆదేశాన్ని అమలు చేయడం ద్వారా Tailwind CLI సాధనాన్ని ఉపయోగించి CSSని రూపొందించండి. ఇది అన్ని టెంప్లేట్ ఫైల్‌లను స్కాన్ చేస్తుంది మరియు 'లో CSSని నిర్మిస్తుంది dist/output.css ” ఫైల్:
పై ఆదేశం విజయవంతంగా అమలు చేయబడిందని గమనించవచ్చు. ఇప్పుడు, 'project1' యొక్క ఫైల్ నిర్మాణం ఇలా కనిపిస్తుంది:
దశ 5: HTML టెంప్లేట్‌ను సృష్టించండి మరియు దాని మార్గాన్ని కాన్ఫిగర్ చేయండి
వినియోగదారు “టైల్‌విండ్ CSS”ని పొందుపరచాలనుకునే HTML టెంప్లేట్‌ను సృష్టించండి మరియు దాని మార్గాన్ని “లో కాన్ఫిగర్ చేయండి tailwind.config.js ”. ముందుగా కింది HTML టెంప్లేట్‌ని చూద్దాం ' index.html ”:
< లింక్ href = '/dist/output.css' rel = 'స్టైల్‌షీట్' >
< / తల >
< శరీరం >
< h2 తరగతి = 'టెక్స్ట్-సెంటర్ ఫాంట్-బోల్డ్ టెక్స్ట్-వైట్ బిజి-ఆరెంజ్-500' > Linuxhintకి స్వాగతం!< / h2 >< br >
< h3 తరగతి = 'టెక్స్ట్-సెంటర్ ఫాంట్-బోల్డ్ టెక్స్ట్-బ్లూ-600 బిజి-పింక్-400' >మొదటి ట్యుటోరియల్: టైల్‌విండ్ CSS ఫ్రేమ్‌వర్క్.< / h3 >< br >
< p తరగతి = 'టెక్స్ట్-సెంటర్ టెక్స్ట్-గ్రీన్-500' >టైల్‌విండ్ CSS అనేది ముందుగా నిర్వచించబడిన CSS తరగతులను సెట్ చేయడంలో సహాయపడే ఒక ప్రసిద్ధ CSS ఫ్రేమ్‌వర్క్. శైలి మీ HTML అంశాలు.< / p >
< / శరీరం >
పై కోడ్ లైన్లలో:
- “హెడ్” విభాగం “ని ఉపయోగిస్తుంది <లింక్> 'సృష్టించబడిన/కంపైల్ చేయబడిన CSS ఫైల్‌ను లింక్ చేయడానికి ట్యాగ్' /dist/output.css 'ఇప్పటికే ఉన్న HTML ఫైల్‌తో' index.html ”.
- “శరీరం” విభాగం మొదట “ని నిర్దేశిస్తుంది ” Tailwind తరగతిని ఉపయోగించి మొదటి ఉపశీర్షికను నిర్వచించే ట్యాగ్ టెక్స్ట్ సమలేఖనం 'కేంద్రం' వద్ద దాని అమరికను సర్దుబాటు చేయడానికి, ' ఫాంట్ బరువు ” వచనాన్ని “బోల్డ్” చేయడానికి, “ టెక్స్ట్ రంగు 'పేర్కొన్న రంగును జోడించడానికి, మరియు ' నేపథ్య రంగు ” ఇచ్చిన నేపథ్య రంగును వరుసగా వర్తింపజేయడానికి.
- తరువాత, ' ' ఇంకా ' ” ట్యాగ్‌లు వాటి కంటెంట్‌ని స్టైల్ చేయడానికి పైన చర్చించిన Tailwind తరగతులను కూడా ఉపయోగిస్తాయి.
HTML టెంప్లేట్ మార్గాన్ని కాన్ఫిగర్ చేయండి
తరువాత, 'ని తెరవండి tailwind.config.js ” మరియు HTML టెంప్లేట్ ఫైల్ యొక్క “కంటెంట్” విభాగంలో లింక్‌లు లేదా మార్గాన్ని జోడించండి అంటే, “index.html”:
నొక్కండి' Ctrl+S ”కొత్త మార్పులను సేవ్ చేయడానికి.
దశ 6: HTML కోడ్‌ని అమలు చేయండి
చివరగా, లైవ్ సర్వర్‌లో HTML “index.html” కోడ్‌ని అమలు చేయండి మరియు దాని అవుట్‌పుట్ చూడండి:
అవుట్‌పుట్
చూసినట్లుగా, అవుట్‌పుట్ టైల్‌విండ్ CSS సహాయంతో స్టైల్ చేసిన HTML కంటెంట్‌ను చూపుతుంది.
ముగింపు
Tailwind CSS 'ని ఉపయోగిస్తుంది tailwind.config.js ” సృష్టించబడిన HTML టెంప్లేట్ పాత్‌లను కాన్ఫిగర్ చేయడానికి కాన్ఫిగరేషన్ ఫైల్. ఇది నిర్దేశిస్తుంది ' విషయము ”అన్ని HTML టెంప్లేట్‌ల యొక్క ఖచ్చితమైన మార్గాన్ని కలిగి ఉన్న విభాగం, Tailwind తరగతి పేర్లను కలిగి ఉన్న సోర్స్ ఫైల్‌లు మరియు JavaScript భాగాలను కలిగి ఉంటుంది. ఇది పేర్కొన్న HTML ఫైల్‌ను స్కాన్ చేస్తుంది మరియు దాని కంటెంట్‌లో Tailwind CSSని అమలు చేస్తుంది. ఈ పోస్ట్ Tailwind CSSలో టెంప్లేట్ పాత్‌లను కాన్ఫిగర్ చేయడానికి పూర్తి విధానాన్ని వివరించింది.