இந்த கட்டுரை விளக்குகிறது:
- டெயில்விண்ட் தீமில் திரைகள், வண்ணங்கள் மற்றும் இடைவெளிகள் என்ன செய்கின்றன?
- டெயில்விண்ட் தீமில் திரைகள், வண்ணங்கள் மற்றும் இடைவெளியைப் பயன்படுத்துவது எப்படி?
- டெயில்விண்ட் தீமில் திரைகள், வண்ணங்கள் மற்றும் இடைவெளியை எவ்வாறு கட்டமைப்பது?
டெயில்விண்ட் தீமில் திரைகள், வண்ணங்கள் மற்றும் இடைவெளிகள் என்ன செய்கின்றன?
தி திரைகள் டெயில்விண்ட் திட்டத்தில் பதிலளிக்கக்கூடிய பிரேக் பாயின்ட்களை மாற்றுவதற்கு விசை பயனர்களை அனுமதிக்கிறது. பிரேக் பாயிண்ட்ஸ் என்பது திரையின் அகலத்தின் அடிப்படையில் தளவமைப்பு மாறும் புள்ளிகள் ஆகும். இயல்பாக, டெயில்விண்டில் ஐந்து திரைகள் உள்ளன, அதாவது sm (சிறியது), md (நடுத்தரம்), lg (பெரியது) மற்றும் xl (கூடுதல்-பெரியது). இருப்பினும், பயனர்கள் 'திரைகள்' விசையைப் பயன்படுத்தி தங்கள் இடைவெளிகளை வரையறுக்கலாம், பின்னர் அவற்றை HTML நிரலில் பயன்படுத்தலாம்.
வண்ணங்கள் வண்ணத் தட்டுகளை மாற்ற விசை பயன்படுத்தப்படுகிறது. வண்ணங்கள் வடிவமைப்பின் மிக முக்கியமான அம்சங்களில் ஒன்றாகும். டெயில்விண்ட் தீம் பரந்த அளவிலான நிழல்களுடன் இயல்புநிலை வண்ணத் தட்டுகளை வழங்குகிறது, ஆனால் பயனர்கள் அதைத் தனிப்பயனாக்கலாம் அல்லது தங்கள் வண்ணங்களுடன் நீட்டிக்கலாம். பயனர்கள் 'வண்ணங்கள்' விசையைப் பயன்படுத்தி வண்ணங்களை வரையறுக்கலாம், பின்னர் HTML குறியீட்டில் உள்ள எந்த வண்ணம் தொடர்பான பயன்பாட்டு வகுப்பிலும் அவற்றைப் பயன்படுத்தலாம்.
தி இடைவெளி இடைவெளி மற்றும் அளவு அளவை மாற்றுவதற்கு விசை பயன்படுத்தப்படுகிறது. இடைவெளி என்பது வடிவமைப்பின் மற்றொரு இன்றியமையாத அம்சமாகும், ஏனெனில் இது உறுப்புகளின் வாசிப்பு, சீரமைப்பு மற்றும் சமநிலையை பாதிக்கிறது. டெயில்விண்ட் தீம் 4 பிக்சல்கள் (0.25rem) அடிப்படை மதிப்பின் அடிப்படையில் நிலையான இடைவெளி அளவை வழங்குகிறது. இருப்பினும், இது தனிப்பயனாக்கப்படலாம் அல்லது தனிப்பயன் மதிப்புகளுடன் நீட்டிக்கப்படலாம். பயனர்கள் 'இடைவெளி' விசையைப் பயன்படுத்தி இடைவெளி மதிப்புகளை வரையறுக்கலாம், பின்னர் நிரல் கோப்பில் எந்த இடைவெளி தொடர்பான பயன்பாட்டு வகுப்பிலும் அவற்றைப் பயன்படுத்தலாம்.
டெயில்விண்ட் தீமில் திரைகள், வண்ணங்கள் மற்றும் இடைவெளியைப் பயன்படுத்துவது எப்படி?
டெயில்விண்ட் தீமில் திரைகள், வண்ணங்கள் மற்றும் இடைவெளியைப் பயன்படுத்த, ஒரு HTML நிரலை உருவாக்கி, தேவைக்கேற்ப இயல்புநிலை திரை, வண்ணங்கள் மற்றும் இடைவெளி பண்புகளைப் பயன்படுத்தவும். பின்னர், HTML நிரலை இயக்கவும் மற்றும் HTML வலைப்பக்கத்தைப் பார்க்கவும். கீழே குறிப்பிடப்பட்டுள்ள படிகளைப் பின்பற்றுவோம்:
படி 1: HTML வலைப்பக்கத்தை உருவாக்கவும்
முதலில், ஒரு HTML நிரலை உருவாக்கி, இயல்புநிலை திரை, வண்ணங்கள் மற்றும் இடைவெளி பண்புகளைப் பயன்படுத்தவும்:
<உடல் ><டிவி வகுப்பு = 'h-screen p-10 sm:bg-red-700 md:bg-blue-600 lg:bg-green-500 xl:bg-pink-700 ' >
= 'text-3xl m-5 sm: text-white text-center' >
லினக்ஸ் குறிப்பு!
>
= 'text-2xl m-5 md: text-white text-center' >
இந்த டுடோரியலுக்கு வரவேற்கிறோம்
>
= 'text-2xl m-5 lg: text-white text-center' >
டெயில்விண்ட் CSS
>
இந்த டுடோரியலுக்கு வரவேற்கிறோம்
>
= 'text-2xl m-5 lg: text-white text-center' >
டெயில்விண்ட் CSS
>
= 'text-2xl m-5 xl: text-white text-center' >
தீம்கள்
>
>
>
இங்கே:
- ' -ப-10 'மற்றும்' மீ-5 ” என்பது இடைவெளி சொத்து.
- ' sm ”,” எம்டி ”,” lg ', மற்றும் ' xl ” என்பது திரை பண்புகள்.
- ' சிவப்பு-700 ”,” நீலம்-600 ”,” பச்சை-500 ”,” இளஞ்சிவப்பு-700 ', மற்றும் ' வெள்ளை ” என்பது வண்ண பண்புகள்.
படி 2: HTML நிரலை இயக்கவும்
பின்னர், HTML வலைப்பக்கத்தைப் பார்க்க HTML நிரலை இயக்கவும்:
மேலே உள்ள வெளியீட்டில், இயல்புநிலை திரைகள், வண்ணங்கள் மற்றும் இடைவெளி பண்புகள் ஆகியவற்றைக் காணலாம்.
டெயில்விண்ட் தீமில் திரைகள், வண்ணங்கள் மற்றும் இடைவெளியை எவ்வாறு கட்டமைப்பது?
டெயில்விண்ட் தீமில் திரைகள், வண்ணங்கள் மற்றும் இடைவெளியை உள்ளமைக்க, கொடுக்கப்பட்ட படிகளைப் பார்க்கவும்:
- திற ' tailwind.config.js ' கோப்பு.
- செல்க' தீம் ” பிரிவு மற்றும் திரைகள், வண்ணங்கள் மற்றும் இடைவெளி பண்புகளை தேவைக்கேற்ப தனிப்பயனாக்கவும்.
- HTML நிரலில் தனிப்பயனாக்கப்பட்ட பண்புகளைப் பயன்படுத்தவும்.
- சரிபார்ப்புக்கு HTML வலைப்பக்கத்தைப் பார்க்கவும்.
படி 1: டெயில்விண்ட் கட்டமைப்பு கோப்பில் திரைகள், வண்ணங்கள் மற்றும் இடைவெளியை உள்ளமைக்கவும்
இல் ' தீம் 'பிரிவு' tailwind.config.js 'கோப்பு, திரைகள், வண்ணங்கள் மற்றும் இடைவெளி பண்புகளை தேவைக்கேற்ப தனிப்பயனாக்கவும். உதாரணமாக, இந்த பண்புகளை நாங்கள் பின்வருமாறு தனிப்பயனாக்கியுள்ளோம்:
தொகுதி .ஏற்றுமதி = {உள்ளடக்கம் : [ './index.html' ] ,
தீம் : {
//திரைகளைத் தனிப்பயனாக்குதல்
திரைகள் : {
sm : '480px' ,
எம்டி : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//வண்ணங்களைத் தனிப்பயனாக்குதல்
வண்ணங்கள் : {
வெள்ளை : #ffffff ,
கருப்பு : '#000000' ,
நீலம் : '#08609c' ,
பச்சை : '#089c28' ,
சிவப்பு : '#9c0306' ,
மஞ்சள் : '#ede60e' ,
இளஞ்சிவப்பு : '#ed0e55' ,
} ,
// இடைவெளியைத் தனிப்பயனாக்குதல்
இடைவெளி : {
px : '1px' ,
'0' : '0' ,
'1' : '0.25 rem' ,
'2' : '0.5 rem' ,
'3' : '0.75ரெம்' ,
'4' : '1 விஷயம்' ,
'5' : '1.25 rem' ,
'6' : '1.5 rem' ,
'8' : '2rem' ,
'10' : '2.5 rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'இருபது' : '5 rem' ,
}
} ,
} ;
இந்த குறியீட்டில்:
- ' திரைகள் 'பண்பு பல்வேறு அளவுகளுக்கான திரை முறிவு புள்ளிகளை வரையறுக்கிறது. இது மாற்றுப்பெயர்கள் (sm, md, lg, xl போன்றவை) மற்றும் அவற்றின் சமமான மதிப்புகளை வழங்குகிறது.
- ' வண்ணங்கள் 'சொத்து அவற்றின் பெயர் மற்றும் ஹெக்ஸாடெசிமல் மதிப்பு ஜோடிகளைப் பயன்படுத்தி தனிப்பயன் வண்ணங்களை வரையறுக்கிறது.
- ' இடைவெளி 'பண்பு பல அளவுகளுக்கான தனிப்பயன் இடைவெளி மதிப்புகளைக் குறிப்பிடுகிறது. 'rem' அலகுகளில் குறிப்பிட்ட இடைவெளி மதிப்புகளைக் குறிக்க இது மாற்றுப்பெயர்களைப் பயன்படுத்துகிறது (px, 0, 1, 2, முதலியன).
படி 2: HTML திட்டத்தில் உள்ளமைக்கப்பட்ட பண்புகளைப் பயன்படுத்தவும்
இப்போது, HTML திட்டத்தில் தனிப்பயனாக்கப்பட்ட பண்புகளைப் பயன்படுத்தவும்:
<உடல் ><டிவி வகுப்பு = 'h-screen p-10 sm:bg-red md:bg-blue lg:bg-green xl:bg-பிங்க்' >
= 'text-3xl m-5 sm: text-white text-center' >
லினக்ஸ் குறிப்பு!
>
= 'text-2xl m-5 md: text-white text-center' >
இந்த டுடோரியலுக்கு வரவேற்கிறோம்
>
= 'text-2xl m-5 lg: text-white text-center' >
டெயில்விண்ட் CSS
>
இந்த டுடோரியலுக்கு வரவேற்கிறோம்
>
= 'text-2xl m-5 lg: text-white text-center' >
டெயில்விண்ட் CSS
>
= 'text-2xl m-5 xl: text-white text-center' >
தீம்கள்
>
>
>
படி 3: HTML இணையப் பக்கத்தைப் பார்க்கவும்
இறுதியாக, HTML வலைப்பக்கத்தைப் பார்ப்பதன் மூலம் வெளியீட்டைச் சரிபார்க்கவும்:
கட்டமைக்கப்பட்ட திரைகள், வண்ணங்கள் மற்றும் இடைவெளி பண்புகளுக்கு ஏற்ப வலைப்பக்கத்தின் உள்ளடக்கம் மாறுவதை அவதானிக்கலாம்.
முடிவுரை
தி திரைகள் விசையானது பயனர்கள் பதிலளிக்கக்கூடிய பிரேக் பாயின்ட்களைத் தனிப்பயனாக்க/மாற்றியமைக்க அனுமதிக்கிறது வண்ணங்கள் திட்டத்திற்கான வண்ணத் தட்டுகளைத் தனிப்பயனாக்க விசை பயன்படுத்தப்படுகிறது இடைவெளி இடைவெளி மற்றும் அளவு அளவை தனிப்பயனாக்க விசை பயன்படுத்தப்படுகிறது. மேலும், பயனர்கள் தங்கள் தேவைகளுக்கு ஏற்ப இந்த விசைகள் அல்லது பண்புகளை தனிப்பயனாக்கலாம். இந்தக் கட்டுரை டெயில்விண்ட் தீமில் திரைகள், வண்ணங்கள் மற்றும் இடைவெளியை விளக்கியுள்ளது.