டெயில்விண்ட் என்பது வண்ணங்கள், இடைவெளி, எழுத்துரு அளவுகள் போன்ற பல்வேறு பண்புகளுக்கான முன் வரையறுக்கப்பட்ட மதிப்புகளின் தொகுப்பை வழங்கும் CSS கட்டமைப்பாகும். இருப்பினும், சில நேரங்களில் பயனர்கள் தனிப்பயன் போன்ற இயல்புநிலை உள்ளமைவில் சேர்க்கப்படாத மதிப்பைப் பயன்படுத்த விரும்பலாம். நிறம் அல்லது ஒரு குறிப்பிட்ட விளிம்பு. இந்த சூழ்நிலையில், அவர்கள் தன்னிச்சையான மதிப்புகளைப் பயன்படுத்தலாம்.

டெயில்விண்ட் CSS இல் தன்னிச்சையான மதிப்புகளைப் பயன்படுத்துவதற்கான முறையை இந்தக் கட்டுரை விளக்குகிறது.

டெயில்விண்டில் தன்னிச்சையான மதிப்புகளை எவ்வாறு பயன்படுத்துவது?

தன்னிச்சையான மதிப்புகள் டெயில்விண்ட் உள்ளமைவு கோப்பில் வரையறுக்காமல் HTML வகுப்பு பண்புக்கூறில் நேரடியாக எழுதக்கூடிய தனிப்பயன் மதிப்புகள் ஆகும். அவை [24px], [2.5rem] போன்ற சதுர அடைப்புக்குறிக் குறிப்புடன் முன்னொட்டாக உள்ளன. டெயில்விண்டில் தன்னிச்சையான மதிப்புகளைப் பயன்படுத்த, ஒரு சதுர அடைப்புக்குறி குறியீட்டைப் பயன்படுத்தவும் மற்றும் பயன்பாட்டு வகுப்புகளை மாறும் வகையில் உருவாக்க, தனிப்பயன் மதிப்பைக் குறிப்பிடவும்.

சிறந்த புரிதலுக்கு கீழே பட்டியலிடப்பட்டுள்ள படிகளைப் பார்க்கவும்:

படி 1: HTML திட்டத்தில் தன்னிச்சையான மதிப்புகளைப் பயன்படுத்தவும்

ஒரு HTML நிரலை உருவாக்கி, விரும்பிய வகுப்புகளை உருவாக்க, தனிப்பயன் மதிப்புடன் சதுர அடைப்புக்குறி குறியீட்டைப் பயன்படுத்தவும். உதாரணமாக, நாங்கள் பயன்படுத்தினோம் “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, மற்றும் பிற வகுப்புகள்:

இங்கே:

• “bg-[#e9e516]” class ஆனது
  இன் பின்னணி நிறத்தை அமைக்கிறது “#e9e516” (மஞ்சள்).
• “w-[600px]” வகுப்பு
  இன் அகலத்தை 600 பிக்சல்களாக அமைக்கிறது.
• 'h-[400px]' வர்க்கம்
  உறுப்புக்கு 400 பிக்சல்களின் உயரத்தைப் பயன்படுத்துகிறது.
• 'p-[13px]' வகுப்பு
  இன் திணிப்பை 13 பிக்சல்களாக அமைக்கிறது.
• “m-[19px]” class ஆனது
  இன் விளிம்பை 19 பிக்சல்களாக அமைக்கிறது.

• 'உரை-[30px]' class ஆனது

  உறுப்பின் எழுத்துரு அளவை 30 பிக்சல்களாக அமைக்கிறது.

• “உரை-[#7405ab]” வகுப்பு

  உறுப்பின் உரை நிறத்தை ஊதா நிறமாக அமைத்தது (#7405ab).

• “கண்காணிப்பு-[0.5rem]” வர்க்கம் எழுத்து இடைவெளியை 0.5 rem முதல்

  உறுப்பு வரை பயன்படுத்துகிறது.

படி 2: வெளியீட்டைச் சரிபார்க்கவும்

தன்னிச்சையான மதிப்புகள் சரியாகச் செயல்படுவதை உறுதிசெய்ய, HTML வலைப்பக்கத்தைப் பார்க்கவும்:

மேலே உள்ள வெளியீடு, தன்னிச்சையான மதிப்புகள் வரையறுக்கப்பட்டபடி சரியாகச் செயல்படுவதைக் குறிக்கிறது.

முடிவுரை

டெயில்விண்டில் தன்னிச்சையான மதிப்புகளைப் பயன்படுத்த, HTML நிரலில் உள்ள தனிப்பயன் மதிப்புடன் ஒரு சதுர அடைப்புக்குறி குறியீட்டைப் பயன்படுத்தி மாறும் வகையில் வகுப்புகளை உருவாக்கவும். எழுத்துரு அளவு, நிறம், அகலம், உயரம், விளிம்பு, திணிப்பு போன்ற எண் அல்லது வண்ண மதிப்பை ஏற்கும் எந்த ஒரு சொத்துக்கும் பயனர்கள் மதிப்புகளைப் பயன்படுத்தலாம். டெயில்விண்ட் CSS இல் தன்னிச்சையான மதிப்புகளைப் பயன்படுத்துவதற்கான முறையை இந்தக் கட்டுரை விளக்கியுள்ளது.