டெயில்விண்ட் CSS இல் நிலையான பயன்பாடுகளைப் பயன்படுத்துவதற்கான முறையை இந்தக் கட்டுரை விளக்குகிறது.
டெயில்விண்டில் நிலையான பயன்பாடுகளை எவ்வாறு பயன்படுத்துவது?
டெயில்விண்டில் நிலையான பயன்பாடுகளைப் பயன்படுத்த, ' 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-visibility': 'auto',
},
'.content-hidden': {
'உள்ளடக்கம்-தெரிவு': 'மறைக்கப்பட்ட',
},
'.bg-coral': {
பின்னணி: 'பவளம்'
},
'.skew-5deg': {
உருமாற்றம்: 'skewY(-5deg)',
},
})
})
]
};
இங்கே:
- ' addUtilities() ” செயல்பாடு பயன்பாட்டு வகுப்புகள் மற்றும் அவற்றின் தொடர்புடைய பாணிகளைக் கொண்ட ஒரு பொருளை வழங்குவதன் மூலம் தனிப்பயன் நிலையான பயன்பாடுகளைப் பதிவு செய்கிறது.
- ' .content-auto ” பயன்பாட்டு வகுப்பு உள்ளடக்கம்-தெரியும் தன்மையை தானாக அமைக்கிறது.
- ' .உள்ளடக்கம்-மறைக்கப்பட்ட ” பயன்பாட்டு வகுப்பு உள்ளடக்கம்-தெரியும் தன்மையை மறைக்கப்பட்டதாக அமைக்கிறது.
- ' .bg-பவளம் ” பயன்பாட்டு வகுப்பு பவள நிறத்தை பின்னணியில் அமைக்கிறது.
- ' .வளைவு-5deg 'பயன்பாட்டு வகுப்பு உருமாற்றப் பண்புகளை skewY(-5deg) ஆக அமைக்கிறது.
படி 2: HTML திட்டத்தில் நிலையான பயன்பாடுகளைப் பயன்படுத்தவும்
இப்போது, HTML நிரலில் விரும்பிய நிலையான பயன்பாடுகளைப் பயன்படுத்தவும்:
< div வர்க்கம் = 'h-screen bg-coral' >
< ப வர்க்கம் = 'உள்ளடக்கம்-தானாக' >வணக்கம்< / ப >
< ப வர்க்கம் = 'உள்ளடக்கம் மறைக்கப்பட்ட' > இங்கே வரவேற்கிறோம்< / ப >
< ப வர்க்கம் = 'வளைவு-5 டிகிரி' >உரையை மாற்றவும்< / ப >
< / div >
< / உடல் >
படி 3: வெளியீட்டைச் சரிபார்க்கவும்
இறுதியாக, நிலையான பயன்பாடுகள் சரியாக வேலை செய்கின்றன என்பதை உறுதிப்படுத்த HTML நிரலை இயக்கவும்:
மேலே உள்ள வெளியீடு நிலையான பயன்பாடுகள் சரியாக செயல்படுவதைக் குறிக்கிறது, அதன்படி அவை வரையறுக்கப்பட்டுள்ளன.
முடிவுரை
டெயில்விண்டில் நிலையான பயன்பாடுகளைப் பயன்படுத்த, ' addUtilities() 'tailwind.config.js' கோப்பில் செயல்படும் மற்றும் விரும்பிய நிலையான பயன்பாடுகளை உள்ளமைக்கவும். 'addUtilities()' செயல்பாடு மற்றும் HTML நிரலில் நேரடியாகப் பயன்படுத்தக்கூடிய பயன்பாட்டு வகுப்புகளைச் சேர்க்கவும். டெயில்விண்ட் CSS இல் நிலையான பயன்பாடுகளைப் பயன்படுத்துவதற்கான முறையை இந்தக் கட்டுரை விளக்கியுள்ளது.