ఈ కథనం Tailwind CSSలో స్టాటిక్ యుటిలిటీలను ఉపయోగించే పద్ధతిని వివరిస్తుంది.
Tailwindలో స్టాటిక్ యుటిలిటీలను ఎలా ఉపయోగించాలి?
Tailwindలో స్టాటిక్ యుటిలిటీలను ఉపయోగించడానికి, ' addUtilities() 'tailwind.config.js' ఫైల్‌లో ఫంక్షన్ చేసి, కావలసిన స్టాటిక్ యుటిలిటీలను కాన్ఫిగర్ చేయండి. ఆపై, HTML ప్రోగ్రామ్‌లో స్టాటిక్ యుటిలిటీలను ఉపయోగించండి మరియు HTML వెబ్ పేజీని వీక్షిస్తున్నప్పుడు స్టాటిక్ యుటిలిటీలు సరిగ్గా పనిచేస్తున్నాయని నిర్ధారించుకోండి.
కింది దశలను అన్వేషిద్దాం:
దశ 1: 'tailwind.config.js' ఫైల్‌లో స్టాటిక్ యుటిలిటీలను కాన్ఫిగర్ చేయండి
తెరవండి ' tailwind.config.js 'ఫైల్ మరియు జోడించు' ప్లగిన్లు ” విభాగం. అప్పుడు, 'ని ఉపయోగించండి addUtilities() ” కావలసిన స్టాటిక్ యుటిలిటీలను కాన్ఫిగర్ చేయడానికి ఫంక్షన్. ఉదాహరణకు, మేము ఈ క్రింది స్టాటిక్ యుటిలిటీలను కాన్ఫిగర్ చేసాము:
const plugin = అవసరం('tailwindcss/plugin')
module.exports = {
కంటెంట్: ['./index.html'],
ప్లగిన్లు: [
ప్లగిన్(ఫంక్షన్({ addUtilities }) {
addUtilities({
'.content-auto': {
'కంటెంట్-విజిబిలిటీ': 'ఆటో',
},
'.content-hidden': {
'కంటెంట్-విజిబిలిటీ': 'దాచిన',
},
'.bg-coral': {
నేపథ్యం: 'పగడపు'
},
'.skew-5deg': {
రూపాంతరం: 'skewY(-5deg)',
},
})
})
]
};
ఇక్కడ:
- ది ' addUtilities() ” ఫంక్షన్ యుటిలిటీ తరగతులు మరియు వాటి సంబంధిత శైలులను కలిగి ఉన్న వస్తువును అందించడం ద్వారా అనుకూల స్టాటిక్ యుటిలిటీలను నమోదు చేస్తుంది.
- ది ' .కంటెంట్-ఆటో ” యుటిలిటీ క్లాస్ కంటెంట్-విజిబిలిటీ ప్రాపర్టీని ఆటోగా సెట్ చేస్తుంది.
- ది ' .కంటెంట్-దాచిన ” యుటిలిటీ క్లాస్ కంటెంట్-విజిబిలిటీ ప్రాపర్టీని దాచినట్లు సెట్ చేస్తుంది.
- ది ' .bg-పగడపు ” యుటిలిటీ క్లాస్ పగడపు రంగును నేపథ్యానికి సెట్ చేస్తుంది.
- ది ' .skew-5deg ” యుటిలిటీ క్లాస్ ట్రాన్స్‌ఫార్మ్ ప్రాపర్టీని skewY(-5deg)కి సెట్ చేస్తుంది.
దశ 2: HTML ప్రోగ్రామ్‌లో స్టాటిక్ యుటిలిటీలను ఉపయోగించండి
ఇప్పుడు, HTML ప్రోగ్రామ్‌లో కావలసిన స్టాటిక్ యుటిలిటీలను ఉపయోగించండి:
< div తరగతి = 'h-స్క్రీన్ bg-కోరల్' >
< p తరగతి = 'కంటెంట్-ఆటో' >హలో< / p >
< p తరగతి = 'కంటెంట్-దాచిన' > ఇక్కడ స్వాగతం < / p >
< p తరగతి = 'వక్రత-5డిగ్రీలు' > వచనాన్ని మార్చు< / p >
< / div >
< / శరీరం >
దశ 3: అవుట్‌పుట్‌ని ధృవీకరించండి
చివరగా, స్టాటిక్ యుటిలిటీలు సరిగ్గా పనిచేస్తున్నాయని నిర్ధారించుకోవడానికి HTML ప్రోగ్రామ్‌ను అమలు చేయండి:
స్టాటిక్ యుటిలిటీలు నిర్వచించబడిన దాని ప్రకారం సరిగ్గా పని చేస్తున్నాయని పై అవుట్‌పుట్ సూచిస్తుంది.
ముగింపు
Tailwindలో స్టాటిక్ యుటిలిటీలను ఉపయోగించడానికి, ఇది ' addUtilities() 'tailwind.config.js' ఫైల్‌లో ఫంక్షన్ చేసి, కావలసిన స్టాటిక్ యుటిలిటీలను కాన్ఫిగర్ చేయండి. “addUtilities()” ఫంక్షన్ మరియు HTML ప్రోగ్రామ్‌లో నేరుగా వర్తించే యుటిలిటీ తరగతులను జోడించండి. ఈ కథనం Tailwind CSSలో స్టాటిక్ యుటిలిటీలను ఉపయోగించే పద్ధతిని వివరించింది.