இந்தக் கட்டுரை டெயில்விண்ட் பயன்பாடுகளைப் பயன்படுத்தி ஒரு தனிமத்தின் எழுத்துருக் குடும்பத்தைக் கட்டுப்படுத்தும் செயல்முறையை வழங்குகிறது.
டெயில்விண்ட் பயன்பாடுகளைப் பயன்படுத்தி ஒரு தனிமத்தின் எழுத்துரு குடும்பத்தை எவ்வாறு கட்டுப்படுத்துவது?
டெயில்விண்டில் உள்ள உறுப்பின் எழுத்துருக் குடும்பத்தைக் கட்டுப்படுத்த, உறுப்புக்கு பின்வரும் பயன்பாடு வழங்கப்பட வேண்டும்:
எழுத்துரு- { எழுத்துரு குடும்பம் }
மேலே வழங்கப்பட்ட பயன்பாட்டைப் பயன்படுத்தி அமைக்கக்கூடிய மூன்று இயல்புநிலை எழுத்துரு குடும்பங்கள் உள்ளன. இதில் அடங்கும் ' செரிஃப் ',' இல்லாமல் ', மற்றும் ' மோனோ ”.
இந்த எழுத்துரு குடும்பங்களை ஒரு ஆர்ப்பாட்டத்தில் பயன்படுத்துவோம் ' எழுத்துரு-{எழுத்துரு குடும்பம்} 'இது எப்படி வேலை செய்கிறது என்பதைப் பார்க்க வகுப்பு:
< div வர்க்கம் = 'font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100' >
இது ஒரு FONT-SERIF குடும்பம்
< / div >
< div வர்க்கம் = 'font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
இது ஒரு FONT-SANS குடும்பம்
< / div >
< div வர்க்கம் = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
இது ஒரு FONT-MONO குடும்பம்
< / div >
மேலே உள்ள குறியீட்டிற்கான விளக்கம் பின்வருமாறு:
- 'ஐப் பயன்படுத்தி உருவாக்கப்பட்ட மூன்று பிரிவு கூறுகள் உள்ளன ” மற்றும் வெவ்வேறு எழுத்துரு குடும்பங்களுடன் வழங்கப்படுகின்றன.
- ' எழுத்துரு குடும்பம்} ” class ஆனது குறிப்பிட்ட எழுத்துருக் குடும்பத்தை உறுப்பில் உள்ள உரைக்கு வழங்கும்.
- ' வட்டமான-xl 'வகுப்பு DIV உறுப்புகளின் மூலைகளை வட்டமாக்கும்.
- ' நிழல்-எல்ஜி 'வகுப்பு div உறுப்புக்கு ஒரு பெரிய நிழலை வழங்கும்.
- ' உரை மையம் ”உறுப்பின் மையத்தில் உரையை சீரமைக்கும்.
- ' பை-2 'மற்றும்' என்-2 'வகுப்புகள் வழங்கப்படும்' 8px உறுப்பின் மேல் மற்றும் கீழ் திசையில் திணிப்பு மற்றும் விளிம்பு.
- ' bg-{color}-{number} 'உறுப்பின் பின்னணியை குறிப்பிட்ட வண்ணத்திற்கு அமைப்பதற்கு வர்க்கம் பொறுப்பாகும்.
வெளியீட்டில் இருந்து, ஒவ்வொரு உறுப்புக்கும் வெவ்வேறு எழுத்துரு குடும்பம் உள்ளது என்பது தெளிவாகிறது:
ஹோவர் செயல்பாட்டைப் பயன்படுத்தி ஒரு தனிமத்தின் எழுத்துருக் குடும்பத்தையும் மாறும் வகையில் மாற்றலாம். விளக்கத்திற்கு, கீழே உள்ள குறியீட்டைப் பார்க்கவும்:
< div வர்க்கம் = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >இது முன்னிருப்பாக FONT-MONO குடும்பமாகும்< / div >மேலே வழங்கப்பட்ட குறியீட்டில், ' மிதவை: எழுத்துரு-{குடும்பம்} மவுஸ் கர்சர் அதன் மேல் வட்டமிட்டவுடன் உறுப்பின் எழுத்துரு குடும்பத்தை மாற்றுவதற்கு பயன்பாடு பொறுப்பாகும். பயனர் மவுஸ் கர்சரை அதன் மேல் வைக்கும்போது உரையின் எழுத்துருக் குடும்பம் மாறுவதை வெளியீட்டில் காணலாம்:
டெயில்விண்டில் உள்ள ஒரு தனிமத்தின் எழுத்துருக் குடும்பத்தைக் கட்டுப்படுத்துவது இதுவே.
முடிவுரை
டெயில்விண்டில், '' ஐப் பயன்படுத்தி ஒரு உறுப்புக்கு எழுத்துரு குடும்பத்தை ஒதுக்கலாம் எழுத்துரு குடும்பம்} ' வர்க்கம். டெயில்விண்டால் வழங்கப்பட்ட மூன்று இயல்புநிலை எழுத்துரு குடும்பங்கள் உள்ளன, அதாவது ' இல்லாமல் ',' செரிஃப் ', மற்றும் ' மோனோ ”. ஒரு உறுப்பின் நிலை மாறும்போது ஒரு உறுப்பின் எழுத்துருக் குடும்பத்தையும் பயனர் மாற்றலாம். இந்தக் கட்டுரையில் டெயில்விண்டில் உள்ள ஒரு தனிமத்தின் எழுத்துருக் குடும்பத்தைக் கட்டுப்படுத்துவதற்கான செயல்முறையை வழங்கியுள்ளது.