டெயில்விண்ட் CSS இல் 'அடிப்படை பாணிகளை' சேர்ப்பதற்கான சாத்தியமான அனைத்து அம்சங்களையும் இந்த இடுகை விளக்குகிறது.
டெயில்விண்டில் 'பேஸ்' ஸ்டைலை எப்படி சேர்ப்பது?
முழு HTML உள்ளடக்கத்திலும் அல்லது ஒரு குறிப்பிட்ட உறுப்பிலும் “அடிப்படை” பாணிகளைச் சேர்க்க “டெய்ல்விண்ட் CSS” பின்வரும் மூன்று முறைகளுடன் வருகிறது:
- டெயில்விண்டில் அடிப்படை பாணிகளைச் சேர்க்க “CSS” ஐப் பயன்படுத்தவும்.
- டெயில்விண்டில் அடிப்படை ஸ்டைல்களைச் சேர்க்க “செருகுநிரல்” பயன்படுத்தவும்.
அவற்றை ஒவ்வொன்றாக ஆராய்வோம்.
முன்நிபந்தனைகள்
நடைமுறைச் செயலாக்கத்திற்குச் செல்வதற்கு முன், முதலில், புதிதாக உருவாக்கப்பட்ட 'Linuxhint' என்ற திட்டத்தைப் பாருங்கள், இது 'அடிப்படை பாணிகளை' சேர்க்கப் பயன்படுகிறது:
திட்ட கோப்பு அமைப்பு
இப்போது, 'index.html' கோப்பிற்குச் சென்று அதன் HTML குறியீட்டைப் பாருங்கள்:
< html >< தலை >
< இணைப்பு href = '/dist/output.css' rel = 'ஸ்டைல்ஷீட்' >
< / தலை >
< உடல் >
< h2 வர்க்கம் = 'உரை-மைய எழுத்துரு-தடித்த உரை-பிங்க்-600 அடிக்கோடு' > Linuxhint க்கு வரவேற்கிறோம்! < / h2 >< br >
< h3 வர்க்கம் = 'உரை-மைய எழுத்துரு-தடித்த உரை-ஆரஞ்சு-600' > பயிற்சி: டெயில்விண்டில் அடிப்படை பாணிகளைச் சேர்த்தல். < / h3 >< br >
< / உடல் >
மேலே உள்ள குறியீடு வரிகளில்:
வெளியீடு
மேலே உள்ள குறியீட்டின் வெளியீடு இங்கே காட்டப்பட்டுள்ளது:
இப்போது, அடிப்படை பாணிகளைச் சேர்ப்பதன் மூலம் மேலே உள்ள HTML குறியீட்டைத் தனிப்பயனாக்க விவாதிக்கப்பட்ட முறையைப் பயன்படுத்தவும். டெயில்விண்ட் 'CSS' முறையுடன் ஆரம்பிக்கலாம்.
முறை 1: டெயில்விண்டில் 'அடிப்படை பாணிகளை' சேர்க்க CSS ஐப் பயன்படுத்தவும்
குறிப்பிட்ட HTML உறுப்புக்கு அடிப்படை பாணியைச் சேர்ப்பதற்கான எளிய மற்றும் எளிதான முறை, திட்டத்தின் முக்கிய CSS கோப்பில் அவற்றைச் சேர்ப்பதாகும். கொடுக்கப்பட்டுள்ள படிகளைப் பின்பற்றி இந்த பணியை நடைமுறையில் செய்யலாம்.
படி 1: CSS கோப்பைத் திறக்கவும்
முதலில், முக்கிய CSS கோப்பைத் திறக்கவும், அதாவது, ' style.css ” இதில் உள்ளமைக்கப்பட்ட டெயில்விண்ட் “பேஸ்”, “கூறுகள்” மற்றும் “பயன்பாடுகள்” அடுக்குகள் உள்ளன:
படி 2: CSS ஐச் சேர்க்கவும்
அடுத்து, குறிப்பிட்ட '
' மற்றும் '' HTML உறுப்புகளுக்கான 'அடிப்படை' பாணியைச் சேர்க்கவும், '' ஐப் பயன்படுத்தி வகுப்புகளைப் பயன்படுத்துவதன் மூலம் @விண்ணப்பிக்கவும் 'அடிப்படை' அடுக்கில் 'உதவியுடன்' கட்டளை @அடுக்கு ” முக்கிய வார்த்தை. '@layer' முக்கிய வார்த்தைகள் குறிப்பிட்ட 'அடிப்படை' லேயரில் வரையறுக்கப்பட்ட வகுப்புகளைச் சேர்க்கின்றன: @லேயர் அடிப்படை {
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}
மேலே உள்ள குறியீட்டு வரிகளில், ' எழுத்துரு அளவு '
' மற்றும் '' உறுப்புகளை முறையே குறிப்பிட்ட அளவு வரை பெரிதாக்குவதற்கு ” class பயன்படுத்தப்படுகிறது:
கோப்பை சேமிக்கவும் (Ctrl + S).
படி 3: வெளியீடு
இப்போது, லைவ் சர்வரில் குறியீட்டை இயக்கி, வெளியீட்டைப் பின்வருமாறு பார்க்கவும்:
இங்கே, டெயில்விண்ட் 'எழுத்துரு அளவு' வகுப்பு, பேஸ் லேயரில் குறிப்பிடப்பட்ட உறுப்புக்கு வெற்றிகரமாகப் பயன்படுத்தப்பட்டதை வெளியீடு காட்டுகிறது.
குறிப்பு : மற்ற அனைத்து டெயில்விண்ட் CSS வகுப்புகளுக்கும் இதே அணுகுமுறை பயன்படுத்தப்படுகிறது.
முறை 2: டெயில்விண்டில் 'அடிப்படை பாணிகளை' சேர்க்க செருகுநிரலைப் பயன்படுத்தவும்
'அடிப்படை' பாணியைச் சேர்க்க மற்றொரு பயனுள்ள முறை '' சொருகு 'மற்றும்' பயன்படுத்தவும் addBase() ” செயல்பாடு. இந்த செயல்பாடு புதிய வகுப்புகளை பதிவு செய்ய உதவுகிறது. அடித்தளம் ” அடுக்கு உத்தரவு. இந்தச் செயல்பாடு டெயில்விண்ட் “tailwind.config.js” கோப்பில் பயன்படுத்தப்படுகிறது. நடைமுறையில் செய்வோம்.
படி 1: “addBase()” செயல்பாட்டை வரையறுக்கவும்
முதலில், ' என்பதற்குச் செல்லவும் tailwind.config.js 'உள்ளமைவு கோப்பு மற்றும் சொருகி இருந்து அடிப்படை பாணிகளைச் சேர்த்து, 'addBase()' செயல்பாட்டை அழைக்கவும்:
கோப்பை சேமிக்கவும்.
படி 2: வெளியீடு
கடைசியாக, கொடுக்கப்பட்ட HTML குறியீட்டை இயக்கவும் மற்றும் வெளியீட்டைப் பார்க்கவும்:
பார்த்தபடி, 'addBase()' செயல்பாட்டில் JavaScript பொருளாக வரையறுக்கப்பட்ட Tailwind 'Font Size' வகுப்பு குறிப்பிட்ட HTML உறுப்புகளுக்குப் பயன்படுத்தப்படுகிறது.
முடிவுரை
டெயில்விண்ட் பேஸ் ஸ்டைல்களை எளிதாகச் சேர்க்கலாம் ' CSS 'முக்கிய CSS கோப்பில் வகுப்புகள் மற்றும் ' சொருகு ' உடன் ' addBase() கட்டமைப்பு கோப்பில் செயல்பாடு. 'CSS' முறை எளிமையான முறையாகக் கருதப்படுகிறது, ஏனெனில் இது 'அடிப்படை' லேயரில் அடிப்படை பாணிகளை மட்டுமே வரையறுத்து, குறிப்பிட்ட உறுப்பு மீது தானாகவே செயல்படுத்துகிறது. மறுபுறம், 'சொருகி' பிரிவு tailwind.config.js 'கோப்புக்கு அடிப்படை பாணிகளை ஜாவாஸ்கிரிப்ட் பொருள்களாக வரையறுக்க, 'addBase()' செயல்பாடு தேவைப்படுகிறது. டெயில்விண்ட் CSS இல் அடிப்படை பாணிகளைச் சேர்ப்பதற்கான சாத்தியமான அனைத்து அம்சங்களையும் இந்த இடுகை விளக்குகிறது.