டெயில்விண்ட் CSS ஆர்பிட்ரரி வேரியன்ட்கள்: தனிப்பயன் சூடோ-செலக்டர்களை கட்டவிழ்த்துவிடுதல்

டெயில்விண்ட் CSS, ஸ்டைலிங்கிற்கான ஒரு யூட்டிலிட்டி-ஃபர்ஸ்ட் அணுகுமுறையை வழங்குவதன் மூலம் ஃப்ரண்ட்-எண்ட் மேம்பாட்டில் ஒரு புரட்சியை ஏற்படுத்தியுள்ளது. அதன் முன்-வரையறுக்கப்பட்ட கிளாஸ்கள் விரைவான முன்மாதிரி மற்றும் நிலையான வடிவமைப்பை அனுமதிக்கின்றன. இருப்பினும், சில நேரங்களில் இயல்புநிலை யூட்டிலிட்டிகள் ஒரு குறிப்பிட்ட வடிவமைப்புத் தேவையை அடைவதில் குறைபடுகின்றன. இந்த இடத்தில்தான் டெயில்விண்ட் CSS ஆர்பிட்ரரி வேரியன்ட்கள் devreye giriyor, டெயில்விண்டின் திறன்களை விரிவுபடுத்தவும், தனிப்பயன் சூடோ-செலக்டர்களுடன் கூறுகளை குறிவைக்கவும் ஒரு சக்திவாய்ந்த வழிமுறையை வழங்குகின்றன.

டெயில்விண்ட் CSS வேரியன்ட்களைப் புரிந்துகொள்ளுதல்

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

• `hover:`: மவுஸ் ஹோவர் மீது ஸ்டைலைச் செயல்படுத்துகிறது.
• `focus:`: உறுப்பு ஃபோகஸ் செய்யப்படும்போது ஸ்டைலைச் செயல்படுத்துகிறது.
• `active:`: உறுப்பு செயலில் இருக்கும்போது (எ.கா., கிளிக் செய்யப்பட்டது) ஸ்டைலைச் செயல்படுத்துகிறது.
• `disabled:`: உறுப்பு முடக்கப்பட்டிருக்கும்போது ஸ்டைலைச் செயல்படுத்துகிறது.
• `ரெஸ்பான்சிவ் பிரேக் பாயிண்ட்கள் (sm:, md:, lg:, xl:, 2xl:)`: திரையின் அளவைப் பொறுத்து ஸ்டைலைச் செயல்படுத்துகிறது.

இந்த வேரியன்ட்கள் யூட்டிலிட்டி கிளாஸிற்கு முன்னொட்டாக சேர்க்கப்படுகின்றன, எடுத்துக்காட்டாக, `hover:bg-blue-500` ஹோவர் மீது பின்னணி நிறத்தை நீலமாக மாற்றுகிறது. டெயில்விண்டின் உள்ளமைவு கோப்பு (`tailwind.config.js`) உங்கள் திட்டத்தின் தேவைகளுக்கு ஏற்ப இந்த வேரியன்ட்களைத் தனிப்பயனாக்கவும், புதியவற்றைச் சேர்க்கவும் உங்களை அனுமதிக்கிறது.

ஆர்பிட்ரரி வேரியன்ட்களை அறிமுகப்படுத்துதல்

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

ஆர்பிட்ரரி வேரியன்ட்களுக்கான தொடரியல் நேரடியானது:

[<selector>]:<utility-class>

இங்கே:

• `[<selector>]` என்பது நீங்கள் குறிவைக்க விரும்பும் ஆர்பிட்ரரி செலக்டர். இது எந்தவொரு செல்லுபடியாகும் CSS செலக்டராகவும் இருக்கலாம்.
• `<utility-class>` என்பது செலக்டர் பொருந்தும்போது நீங்கள் பயன்படுத்த விரும்பும் டெயில்விண்ட் CSS யூட்டிலிட்டி கிளாஸ் ஆகும்.

இதை எடுத்துக்காட்டுகளுடன் விளக்குவோம்.

ஆர்பிட்ரரி வேரியன்ட்களின் நடைமுறை எடுத்துக்காட்டுகள்

1. முதல் சைல்ட் உறுப்பைக் குறிவைத்தல்

ஒரு கண்டெய்னரின் முதல் சைல்ட் உறுப்பை வித்தியாசமாக ஸ்டைல் செய்ய விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம். இதை `:first-child` சூடோ-செலக்டரைப் பயன்படுத்தி நீங்கள் அடையலாம்:

<div class="flex flex-col">
  <div class="[&:first-child]:text-red-500">First Item</div>
  <div>Second Item</div>
  <div>Third Item</div>
</div>

இந்த எடுத்துக்காட்டில், `[&:first-child]:text-red-500` என்பது `flex flex-col` கிளாஸுடன் கூடிய `div`-இன் முதல் சைல்ட் உறுப்புக்கு `text-red-500` யூட்டிலிட்டி கிளாஸை (உரையை சிவப்பாக மாற்றுகிறது) பயன்படுத்துகிறது. `&` சின்னம், கிளாஸ்கள் பயன்படுத்தப்படும் பெற்றோர் உறுப்பைக் குறிக்கிறது. இது செலக்டர் குறிப்பிட்ட பெற்றோருக்குள் *உள்ள* முதல் சைல்டை குறிவைப்பதை உறுதி செய்கிறது.

2. பெற்றோர் நிலையின் அடிப்படையில் ஸ்டைலிங் (குரூப்-ஹோவர்)

ஒரு பொதுவான வடிவமைப்பு முறை என்னவென்றால், ஒரு பெற்றோர் மீது ஹோவர் செய்யப்படும்போது அதன் சைல்ட் உறுப்பின் தோற்றத்தை மாற்றுவது. டெயில்விண்ட் அடிப்படை சூழ்நிலைகளுக்கு `group-hover` வேரியன்ட்டை வழங்குகிறது, ஆனால் ஆர்பிட்ரரி வேரியன்ட்கள் அதிக நெகிழ்வுத்தன்மையை வழங்குகின்றன.

<div class="group hover:bg-gray-100 p-4 rounded-md shadow-md">
  <h2 class="text-lg font-semibold">Product Title</h2>
  <p class="text-gray-600 [&_.description]:line-clamp-2">Product description goes here.  This is a longer description that will be truncated.
  If the parent is hovered, the description becomes black.</p>
  <p class="description [&:hover]:text-black">Hover Parent to change this color</p>
</div>

இங்கே, `group` மீது ஹோவர் செய்யப்படும்போது `[&:hover]:bg-gray-100` ஒரு வெளிர் சாம்பல் பின்னணியைச் சேர்க்கிறது. இந்தச் செயல்பாட்டிற்கு `group` கிளாஸை ஆர்பிட்ரரி வேரியன்ட்டுடன் எப்படி இணைக்கிறோம் என்பதைக் கவனியுங்கள். இந்தச் செயல்பாடு வேலை செய்ய `group` கிளாஸ் இருப்பது முக்கியம்.

3. பண்புக்கூறு மதிப்புகளின் அடிப்படையில் கூறுகளை குறிவைத்தல்

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

<a href="/internal-page" class="[&[href^='/']]:text-blue-500">Internal Link</a>
<a href="https://www.example.com" class="[&[href*='example.com']]:text-green-500">External Link</a>

இந்தக் குறியீட்டில்:

• `[&[href^='/']]` என்பது `href` பண்புக்கூறு `/` உடன் தொடங்கும் இணைப்புகளை (உள் இணைப்புகள்) தேர்ந்தெடுத்து `text-blue-500` கிளாஸைப் பயன்படுத்துகிறது.
• `[&[href*='example.com']]` என்பது `href` பண்புக்கூறில் `example.com` உள்ள இணைப்புகளைத் தேர்ந்தெடுத்து `text-green-500` கிளாஸைப் பயன்படுத்துகிறது.

4. சிக்கலான நிலை மேலாண்மை (எ.கா., படிவ சரிபார்ப்பு)

படிவ சரிபார்ப்பு நிலைகளின் அடிப்படையில் கூறுகளை ஸ்டைல் செய்ய ஆர்பிட்ரரி வேரியன்ட்கள் நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருக்கும். ஒரு படிவ உள்ளீடு செல்லுபடியாகுமா அல்லது செல்லாததா என்பதை பார்வைக்குக் குறிக்க விரும்பும் ஒரு சூழ்நிலையைக் கவனியுங்கள்.

<input type="text" class="border rounded p-2 [&:invalid]:border-red-500 [&:valid]:border-green-500" placeholder="Enter your email" required>

இங்கே:

• `[&:invalid]:border-red-500` உள்ளீடு செல்லாததாக இருக்கும்போது (`required` பண்புக்கூறு மற்றும் சரியான உள்ளீடு இல்லாததால்) ஒரு சிவப்பு பார்டரைப் பயன்படுத்துகிறது.
• `[&:valid]:border-green-500` உள்ளீடு செல்லுபடியாகும் போது ஒரு பச்சை பார்டரைப் பயன்படுத்துகிறது.

இது பயனருக்கு உடனடி காட்சி கருத்தை வழங்குகிறது, பயனர் அனுபவத்தை மேம்படுத்துகிறது.

5. தனிப்பயன் பண்புகளுடன் (CSS வேரியபிள்கள்) வேலை செய்தல்

இன்னும் அதிக டைனமிக் ஸ்டைலிங்கிற்காக நீங்கள் ஆர்பிட்ரரி வேரியன்ட்களை CSS வேரியபிள்களுடன் (தனிப்பயன் பண்புகள்) இணைக்கலாம். இது ஒரு CSS வேரியபிளின் மதிப்பின் அடிப்படையில் கூறுகளின் தோற்றத்தை மாற்ற உங்களை அனுமதிக்கிறது.

<div class="[&[--theme='dark']]:bg-gray-800 [&[--theme='dark']]:text-white p-4 rounded-md" style="--theme: light;">
  <p>This is a themed box.</p>
</div>

இந்த எடுத்துக்காட்டில்:

• நாம் ஒரு CSS வேரியபிளான `--theme`-ஐ `light` என்ற இயல்புநிலை மதிப்புடன் இன்லைனில் வரையறுக்கிறோம்.
• `[&[--theme='dark']]:bg-gray-800 [&[--theme='dark']]:text-white` `--theme` வேரியபிள் `dark` என அமைக்கப்பட்டால் ஒரு இருண்ட பின்னணி மற்றும் வெள்ளை உரையைப் பயன்படுத்துகிறது.

வெவ்வேறு தீம்களுக்கு இடையில் மாற ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி `--theme` வேரியபிளின் மதிப்பை நீங்கள் டைனமிக்காக மாற்றலாம்.

6. மீடியா வினவல்களின் அடிப்படையில் கூறுகளை குறிவைத்தல்

டெயில்விண்ட் ரெஸ்பான்சிவ் வேரியன்ட்களை (`sm:`, `md:`, போன்றவை) வழங்கும்போது, நீங்கள் மிகவும் சிக்கலான மீடியா வினவல் சூழ்நிலைகளுக்கு ஆர்பிட்ரரி வேரியன்ட்களைப் பயன்படுத்தலாம்.

<div class="[&[media(max-width: 768px)]]:text-center">
  <p>This text will be centered on screens smaller than 768px.</p>
</div>

திரையின் அகலம் 768 பிக்சல்களுக்கு குறைவாகவோ அல்லது சமமாகவோ இருக்கும்போது இந்தக் குறியீடு `text-center` யூட்டிலிட்டி கிளாஸைப் பயன்படுத்துகிறது.

சிறந்த நடைமுறைகள் மற்றும் பரிசீலனைகள்

1. தனித்தன்மை (Specificity)

ஆர்பிட்ரரி வேரியன்ட்களைப் பயன்படுத்தும்போது CSS தனித்தன்மையைக் கவனத்தில் கொள்ளுங்கள். ஆர்பிட்ரரி வேரியன்ட்கள் நேரடியாக உங்கள் CSS-ல் செலுத்தப்படுகின்றன, மேலும் அவற்றின் தனித்தன்மை நீங்கள் பயன்படுத்தும் செலக்டரால் தீர்மானிக்கப்படுகிறது. அதிக தனித்தன்மை வாய்ந்த செலக்டர்கள் குறைந்த தனித்தன்மை வாய்ந்தவற்றை மேலெழுதும்.

2. வாசிப்புத்தன்மை மற்றும் பராமரிப்புத்தன்மை

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

3. செயல்திறன்

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

4. டெயில்விண்ட் கட்டமைப்பு

ஆர்பிட்ரரி வேரியன்ட்கள் பறக்கும்போது ஸ்டைலிங்கை அனுமதித்தாலும், அடிக்கடி பயன்படுத்தப்படும் தனிப்பயன் செலக்டர்களை உங்கள் `tailwind.config.js` கோப்பில் தனிப்பயன் வேரியன்ட்களாகச் சேர்ப்பதைக் கருத்தில் கொள்ளுங்கள். இது குறியீடு மறுபயன்பாடு மற்றும் நிலைத்தன்மையை மேம்படுத்தும்.

5. அணுகல்தன்மை (Accessibility)

உங்கள் ஆர்பிட்ரரி வேரியன்ட்களின் பயன்பாடு அணுகல்தன்மையை எதிர்மறையாக பாதிக்கவில்லை என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். எடுத்துக்காட்டாக, நிலையைக் குறிக்க நீங்கள் நிறத்தைப் பயன்படுத்துகிறீர்கள் என்றால், நிறக்குருடு உள்ள பயனர்களுக்கு மாற்று காட்சி குறிப்புகளை வழங்குவதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

`tailwind.config.js`-ல் தனிப்பயன் வேரியன்ட்களைச் சேர்த்தல்

முன்னர் குறிப்பிட்டபடி, உங்கள் `tailwind.config.js` கோப்பில் தனிப்பயன் வேரியன்ட்களைச் சேர்க்கலாம். இது பொதுவாகப் பயன்படுத்தப்படும் செலக்டர்களுக்கு பயனுள்ளதாக இருக்கும். இதோ ஒரு எடுத்துக்காட்டு:

module.exports = {
  theme: {
    extend: {
      extend: {},
    },
  },
  plugins: [],
}

முடிவுரை

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

மேலும் கற்றல்

• டெயில்விண்ட் CSS ஆவணம்: https://tailwindcss.com/docs/hover-focus-and-other-states
• CSS தனித்தன்மை: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity