ടെയിൽവിൻഡിൻ്റെ ശക്തി അൺലോക്ക് ചെയ്യുന്നു: സങ്കീർണ്ണമായ യൂട്ടിലിറ്റി കോമ്പിനേഷനുകൾക്കായി മോഡിഫയറുകൾ സ്റ്റാക്ക് ചെയ്യുന്ന കല

വെബ്സൈറ്റുകൾ സ്റ്റൈൽ ചെയ്യുന്ന രീതിയെ ടെയിൽവിൻഡ് സിഎസ്എസ് അടിസ്ഥാനപരമായി മാറ്റിമറിച്ചു. ഇതിന്റെ യൂട്ടിലിറ്റി-ഫസ്റ്റ് തത്വം എച്ച്ടിഎംഎൽ കോഡിൽ നിന്നുതന്നെ വേഗത്തിൽ പ്രോട്ടോടൈപ്പുകൾ നിർമ്മിക്കാനും ഇഷ്ടാനുസൃത ഡിസൈനുകൾ ഉണ്ടാക്കാനും സഹായിക്കുന്നു. p-4 അല്ലെങ്കിൽ text-blue-500 പോലുള്ള ഒറ്റ യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുന്നത് എളുപ്പമാണ്, എന്നാൽ ടെയിൽവിൻഡിൻ്റെ യഥാർത്ഥ ശക്തി വെളിവാകുന്നത് സങ്കീർണ്ണവും, സ്റ്റേറ്റ്ഫുൾ, റെസ്പോൺസീവ് ആയ യൂസർ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കുമ്പോഴാണ്. ഇതിന്റെ രഹസ്യം ലളിതവും എന്നാൽ ശക്തവുമായ ഒരു ആശയത്തിലാണ്: മോഡിഫയർ സ്റ്റാക്കിംഗ്.

hover:bg-blue-500 അല്ലെങ്കിൽ md:grid-cols-3 പോലുള്ള ഒറ്റ മോഡിഫയറുകൾ ഉപയോഗിക്കാൻ പല ഡെവലപ്പർമാർക്കും അറിയാം. എന്നാൽ ഹോവർ ചെയ്യുമ്പോൾ, വലിയ സ്ക്രീനിൽ, അതോടൊപ്പം ഡാർക്ക് മോഡ് പ്രവർത്തനക്ഷമമാകുമ്പോൾ ഒരു സ്റ്റൈൽ പ്രയോഗിക്കേണ്ടി വന്നാലോ? ഇവിടെയാണ് മോഡിഫയർ സ്റ്റാക്കിംഗ് പ്രയോജനപ്പെടുന്നത്. ഒന്നിലധികം സാഹചര്യങ്ങൾ ഒത്തുചേരുമ്പോൾ മാത്രം പ്രയോഗിക്കേണ്ട വളരെ നിർദ്ദിഷ്ടമായ സ്റ്റൈലിംഗ് നിയമങ്ങൾ ഉണ്ടാക്കാൻ ഒന്നിലധികം മോഡിഫയറുകൾ ഒരുമിച്ച് ചേർക്കുന്ന സാങ്കേതികതയാണിത്.

ഈ സമഗ്രമായ ഗൈഡ് നിങ്ങളെ മോഡിഫയർ സ്റ്റാക്കിംഗിന്റെ ലോകത്തേക്ക് ആഴത്തിൽ കൊണ്ടുപോകും. അടിസ്ഥാനകാര്യങ്ങളിൽ തുടങ്ങി സ്റ്റേറ്റുകൾ, ബ്രേക്ക്‌പോയിൻ്റുകൾ, `group`, `peer`, കൂടാതെ ആർബിട്രറി വേരിയൻ്റുകൾ വരെ ഉൾപ്പെടുന്ന വിപുലമായ കോമ്പിനേഷനുകളിലേക്ക് നമ്മൾ മുന്നേറും. ഇത് പൂർത്തിയാകുമ്പോഴേക്കും, നിങ്ങൾക്ക് സങ്കൽപ്പിക്കാൻ കഴിയുന്ന ഏത് യുഐ ഘടകവും ടെയിൽവിൻഡ് സിഎസ്എസിന്റെ ഡിക്ലറേറ്റീവ് ചാരുതയോടെ നിർമ്മിക്കാൻ നിങ്ങൾ സജ്ജരാകും.

അടിസ്ഥാനം: സിംഗിൾ മോഡിഫയറുകൾ മനസ്സിലാക്കൽ

സ്റ്റാക്ക് ചെയ്യുന്നതിന് മുമ്പ്, അതിൻ്റെ നിർമ്മാണ ഘടകങ്ങൾ നാം മനസ്സിലാക്കണം. ടെയിൽവിൻഡിൽ, ഒരു യൂട്ടിലിറ്റി ക്ലാസിനോട് ചേർക്കുന്ന പ്രിഫിക്സാണ് മോഡിഫയർ. ആ യൂട്ടിലിറ്റി എപ്പോൾ പ്രയോഗിക്കണമെന്ന് ഇത് നിർണ്ണയിക്കുന്നു. സിഎസ്എസ് സ്യൂഡോ-ക്ലാസുകൾ, മീഡിയ ക്വറികൾ, മറ്റ് സോപാധികമായ നിയമങ്ങൾ എന്നിവയുടെ യൂട്ടിലിറ്റി-ഫസ്റ്റ് പ്രയോഗമാണിത്.

മോഡിഫയറുകളെ വിശാലമായി തരംതിരിക്കാം:

• സ്റ്റേറ്റ് മോഡിഫയറുകൾ: ഉപയോക്താവിൻ്റെ ഇടപെടൽ പോലുള്ള എലമെൻ്റിൻ്റെ നിലവിലെ അവസ്ഥയെ അടിസ്ഥാനമാക്കി ഇവ സ്റ്റൈലുകൾ പ്രയോഗിക്കുന്നു. hover:, focus:, active:, disabled:, visited: എന്നിവ സാധാരണ ഉദാഹരണങ്ങളാണ്.
• റെസ്പോൺസീവ് ബ്രേക്ക്‌പോയിൻ്റ് മോഡിഫയറുകൾ: ഒരു പ്രത്യേക സ്ക്രീൻ വലുപ്പത്തിലും അതിനു മുകളിലും സ്റ്റൈലുകൾ പ്രയോഗിക്കാൻ ഇവ ഉപയോഗിക്കുന്നു. ഇത് മൊബൈൽ-ഫസ്റ്റ് സമീപനത്തെ പിന്തുടരുന്നു. ഡിഫോൾട്ടായി sm:, md:, lg:, xl:, 2xl: എന്നിവയാണ് ഉള്ളത്.
• സിസ്റ്റം പ്രിഫറൻസ് മോഡിഫയറുകൾ: ഉപയോക്താവിൻ്റെ ഓപ്പറേറ്റിംഗ് സിസ്റ്റം അല്ലെങ്കിൽ ബ്രൗസർ ക്രമീകരണങ്ങളോട് ഇവ പ്രതികരിക്കുന്നു. ഡാർക്ക് മോഡിനുള്ള dark: ആണ് ഏറ്റവും പ്രധാനം, എന്നാൽ motion-reduce:, print: എന്നിവയും വളരെ ഉപയോഗപ്രദമാണ്.
• സ്യൂഡോ-ക്ലാസ് & സ്യൂഡോ-എലമെൻ്റ് മോഡിഫയറുകൾ: ഒരു എലമെൻ്റിൻ്റെ പ്രത്യേക ഘടനാപരമായ സവിശേഷതകളെയോ ഭാഗങ്ങളെയോ ഇവ ലക്ഷ്യമിടുന്നു. ഉദാഹരണത്തിന് first:, last:, odd:, even:, before:, after:, placeholder:.

ഉദാഹരണത്തിന്, ഒരു സാധാരണ ബട്ടൺ ഇതുപോലുള്ള ഒരു സ്റ്റേറ്റ് മോഡിഫയർ ഉപയോഗിച്ചേക്കാം:

<button class="bg-sky-500 hover:bg-sky-600 ...">Click me</button>

ഇവിടെ, hover:bg-sky-600 എന്നത് ഉപയോക്താവിൻ്റെ കഴ്സർ ബട്ടണിന് മുകളിൽ വരുമ്പോൾ മാത്രം ഇരുണ്ട പശ്ചാത്തല നിറം നൽകുന്നു. ഇതാണ് നാം കെട്ടിപ്പടുക്കാൻ പോകുന്ന അടിസ്ഥാന ആശയം.

സ്റ്റാക്കിംഗിന്റെ മാന്ത്രികത: ഡൈനാമിക് യുഐകൾക്കായി മോഡിഫയറുകൾ സംയോജിപ്പിക്കുന്നു

കൂടുതൽ നിർദ്ദിഷ്ടമായ ഒരു സാഹചര്യം സൃഷ്ടിക്കുന്നതിനായി ഈ പ്രിഫിക്സുകളെ ഒരുമിച്ച് ചേർക്കുന്ന പ്രക്രിയയാണ് മോഡിഫയർ സ്റ്റാക്കിംഗ്. ഇതിന്റെ സിൻ്റാക്സ് വളരെ ലളിതമാണ്: കോളനുകൾ ഉപയോഗിച്ച് അവയെ ഒന്നിനുപുറകെ ഒന്നായി സ്ഥാപിക്കുക.

സിൻ്റാക്സ്: modifier1:modifier2:utility-class

ക്രമം പ്രധാനമാണ്. ടെയിൽവിൻഡ് മോഡിഫയറുകൾ ഇടത്തുനിന്ന് വലത്തോട്ട് പ്രയോഗിക്കുന്നു. ഉദാഹരണത്തിന്, md:hover:text-red-500 എന്ന ക്ലാസ് ഏകദേശം താഴെ പറയുന്ന സിഎസ്എസ് ആയി പരിവർത്തനം ചെയ്യപ്പെടുന്നു:

@media (min-width: 768px) {
.md\:hover\:text-red-500:hover {
color: red;
}
}

ഈ നിയമം അർത്ഥമാക്കുന്നത്: "മീഡിയം ബ്രേക്ക്‌പോയിൻ്റിലും അതിനു മുകളിലും, ഈ എലമെൻ്റ് ഹോവർ ചെയ്യുമ്പോൾ, അതിലെ ടെക്സ്റ്റിന്റെ നിറം ചുവപ്പാക്കുക." നമുക്ക് ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ നോക്കാം.

ഉദാഹരണം 1: ബ്രേക്ക്‌പോയിൻ്റുകളും സ്റ്റേറ്റുകളും സംയോജിപ്പിക്കുന്നു

ടച്ച് ഉപകരണങ്ങളിലും കഴ്സർ അടിസ്ഥാനമാക്കിയുള്ള ഉപകരണങ്ങളിലും ഇൻ്ററാക്ടീവ് എലമെൻ്റുകൾ വ്യത്യസ്തമായി പ്രവർത്തിക്കേണ്ടത് ഒരു സാധാരണ ആവശ്യകതയാണ്. വ്യത്യസ്ത ബ്രേക്ക്‌പോയിൻ്റുകളിൽ ഹോവർ ഇഫക്റ്റുകൾ മാറ്റുന്നതിലൂടെ നമുക്കിത് സാധിക്കാം.

ഡെസ്ക്ടോപ്പിൽ ഹോവർ ചെയ്യുമ്പോൾ ചെറുതായി ഉയരുന്നതും, എന്നാൽ മൊബൈലിൽ ടച്ച് ചെയ്യുമ്പോൾ ഉണ്ടാകുന്ന സ്റ്റിക്കി ഹോവർ സ്റ്റേറ്റുകൾ ഒഴിവാക്കാൻ ഹോവർ ഇഫക്റ്റ് ഇല്ലാത്തതുമായ ഒരു കാർഡ് കമ്പോണൻ്റ് പരിഗണിക്കുക.

<div class="... transition-transform duration-300 md:hover:scale-105 md:hover:-translate-y-1">...</div>

വിശദീകരണം:

• transition-transform duration-300: ഇത് ഏത് ട്രാൻസ്ഫോം മാറ്റങ്ങൾക്കും ഒരു സുഗമമായ ട്രാൻസിഷൻ സജ്ജമാക്കുന്നു.
• md:hover:scale-105: മീഡിയം ബ്രേക്ക്‌പോയിൻ്റിലും (768px) അതിനു മുകളിലും, കാർഡ് ഹോവർ ചെയ്യുമ്പോൾ, അത് 5% വലുതാക്കുക.
• md:hover:-translate-y-1: മീഡിയം ബ്രേക്ക്‌പോയിൻ്റിലും അതിനു മുകളിലും, കാർഡ് ഹോവർ ചെയ്യുമ്പോൾ, അതിനെ ചെറുതായി മുകളിലേക്ക് നീക്കുക.

768px-ൽ താഴെയുള്ള സ്ക്രീനുകളിൽ, md: മോഡിഫയർ ഹോവർ ഇഫക്റ്റുകൾ പ്രയോഗിക്കുന്നത് തടയുന്നു, ഇത് മൊബൈൽ ഉപയോക്താക്കൾക്ക് മികച്ച അനുഭവം നൽകുന്നു.

ഉദാഹരണം 2: ഡാർക്ക് മോഡും ഇൻ്ററാക്റ്റിവിറ്റിയും ഒരുമിപ്പിക്കുന്നു

ഡാർക്ക് മോഡ് ഇപ്പോൾ ഒരു ചെറിയ വിഭാഗം മാത്രം ഉപയോഗിക്കുന്ന ഒന്നല്ല; അതൊരു ഉപയോക്തൃ പ്രതീക്ഷയാണ്. ഓരോ കളർ സ്കീമിനും പ്രത്യേകമായ ഇൻ്ററാക്ഷൻ സ്റ്റൈലുകൾ നിർവചിക്കാൻ സ്റ്റാക്കിംഗ് നിങ്ങളെ അനുവദിക്കുന്നു.

ലൈറ്റ്, ഡാർക്ക് മോഡുകളിൽ ഡിഫോൾട്ട്, ഹോവർ സ്റ്റേറ്റുകൾക്ക് വ്യത്യസ്ത നിറങ്ങളുള്ള ഒരു ലിങ്ക് സ്റ്റൈൽ ചെയ്യാം.

<a href="#" class="text-blue-600 underline hover:text-blue-800 dark:text-cyan-400 dark:hover:text-cyan-200">Read more</a>

വിശദീകരണം:

• text-blue-600 hover:text-blue-800: ലൈറ്റ് മോഡിൽ (ഡിഫോൾട്ട്), ടെക്സ്റ്റ് നീല നിറത്തിലും ഹോവർ ചെയ്യുമ്പോൾ കടും നീല നിറത്തിലുമാണ്.
• dark:text-cyan-400: ഡാർക്ക് മോഡ് സജീവമാകുമ്പോൾ, ഡിഫോൾട്ട് ടെക്സ്റ്റ് നിറം ഇളം സിയാനായി മാറുന്നു.
• dark:hover:text-cyan-200: ഡാർക്ക് മോഡ് സജീവമായിരിക്കുമ്പോൾ ഒപ്പം ലിങ്ക് ഹോവർ ചെയ്യുമ്പോൾ, ടെക്സ്റ്റ് കൂടുതൽ ഇളം സിയാൻ നിറത്തിലേക്ക് മാറുന്നു.

ഒരൊറ്റ വരിയിൽ ഒരു എലമെൻ്റിനായി തീം-അധിഷ്ഠിത സ്റ്റൈലുകളുടെ ഒരു സമ്പൂർണ്ണ സെറ്റ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഇത് കാണിക്കുന്നു.

ഉദാഹരണം 3: മൂന്നും ഒരുമിച്ച് - റെസ്പോൺസീവ്, ഡാർക്ക് മോഡ്, സ്റ്റേറ്റ് മോഡിഫയറുകൾ സ്റ്റാക്ക് ചെയ്യുന്നു

ഇനി, നമുക്ക് ഈ മൂന്ന് ആശയങ്ങളെയും ഒരുമിപ്പിച്ച് ഒരു ശക്തമായ നിയമം ഉണ്ടാക്കാം. ഒരു ഇൻപുട്ട് ഫീൽഡ് ഫോക്കസ് ചെയ്യുമ്പോൾ അത് സൂചിപ്പിക്കേണ്ടതുണ്ട്. ഈ വിഷ്വൽ ഫീഡ്‌ബ্যাক ഡെസ്ക്ടോപ്പിലും മൊബൈലിലും വ്യത്യസ്തമായിരിക്കണം, കൂടാതെ അത് ഡാർക്ക് മോഡിനോട് പൊരുത്തപ്പെടുകയും വേണം.

<input type="text" class="border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 md:dark:focus:ring-yellow-400" />

ഇവിടെയുള്ള ഏറ്റവും സങ്കീർണ്ണമായ ക്ലാസ്സിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാം: md:dark:focus:ring-yellow-400.

വിശദീകരണം:

1. md:: ഈ നിയമം മീഡിയം ബ്രേക്ക്‌പോയിൻ്റിലും (768px) അതിന് മുകളിലും മാത്രമേ പ്രയോഗിക്കൂ.
2. dark:: ആ ബ്രേക്ക്‌പോയിൻ്റിനുള്ളിൽ, ഉപയോക്താവ് ഡാർക്ക് മോഡ് പ്രവർത്തനക്ഷമമാക്കിയിട്ടുണ്ടെങ്കിൽ മാത്രമേ ഇത് പ്രയോഗിക്കൂ.
3. focus:: ആ ബ്രേക്ക്‌പോയിൻ്റിലും കളർ മോഡിലും, ഇൻപുട്ട് എലമെൻ്റ് ഫോക്കസ് ചെയ്യുമ്പോൾ മാത്രമേ ഇത് പ്രയോഗിക്കൂ.
4. ring-yellow-400: ഈ മൂന്ന് വ്യവസ്ഥകളും പാലിക്കുമ്പോൾ, ഒരു മഞ്ഞ ഫോക്കസ് റിംഗ് പ്രയോഗിക്കുക.

ഈ ഒരൊറ്റ യൂട്ടിലിറ്റി ക്ലാസ് നമുക്ക് വളരെ നിർദ്ദിഷ്ടമായ ഒരു സ്വഭാവം നൽകുന്നു: "വലിയ സ്ക്രീനുകളിൽ, ഡാർക്ക് മോഡിൽ, ഫോക്കസ് ചെയ്ത ഈ ഇൻപുട്ടിനെ മഞ്ഞ റിംഗ് ഉപയോഗിച്ച് ഹൈലൈറ്റ് ചെയ്യുക." അതേസമയം, ലളിതമായ focus:ring-blue-500 മറ്റെല്ലാ സാഹചര്യങ്ങൾക്കും (മൊബൈൽ ലൈറ്റ്/ഡാർക്ക് മോഡ്, ഡെസ്ക്ടോപ്പ് ലൈറ്റ് മോഡ്) ഡിഫോൾട്ട് ഫോക്കസ് സ്റ്റൈലായി പ്രവർത്തിക്കുന്നു.

അടിസ്ഥാനങ്ങൾക്കപ്പുറം: group, peer എന്നിവ ഉപയോഗിച്ച് അഡ്വാൻസ്ഡ് സ്റ്റാക്കിംഗ്

എലമെൻ്റുകൾക്കിടയിൽ ബന്ധങ്ങൾ സൃഷ്ടിക്കുന്ന മോഡിഫയറുകൾ അവതരിപ്പിക്കുമ്പോൾ സ്റ്റാക്കിംഗ് കൂടുതൽ ശക്തമാകും. group, peer മോഡിഫയറുകൾ ഒരു പാരൻ്റ് അല്ലെങ്കിൽ ഒരു സിബ്ലിംഗ് എലമെൻ്റിൻ്റെ സ്റ്റേറ്റ് അടിസ്ഥാനമാക്കി ഒരു എലമെൻ്റിനെ സ്റ്റൈൽ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

group-* ഉപയോഗിച്ച് ഏകോപിപ്പിച്ച ഇഫക്റ്റുകൾ

ഒരു പാരൻ്റ് എലമെൻ്റുമായുള്ള ഇൻ്ററാക്ഷൻ അതിലെ ഒന്നോ അതിലധികമോ ചിൽഡ്രൺ എലമെൻ്റുകളെ ബാധിക്കേണ്ടിവരുമ്പോൾ group മോഡിഫയർ അനുയോജ്യമാണ്. ഒരു പാരൻ്റ് എലമെൻ്റിൽ group ക്ലാസ് ചേർത്താൽ, അതിലെ ഏത് ചൈൽഡ് എലമെൻ്റിലും നിങ്ങൾക്ക് group-hover:, group-focus: തുടങ്ങിയവ ഉപയോഗിക്കാം.

കാർഡിന്റെ ഏത് ഭാഗത്ത് ഹോവർ ചെയ്താലും അതിൻ്റെ ടൈറ്റിലിൻ്റെ നിറം മാറുകയും ഒരു ആരോ ഐക്കൺ നീങ്ങുകയും ചെയ്യുന്ന ഒരു കാർഡ് നിർമ്മിക്കാം. ഇത് ഡാർക്ക് മോഡിലും പ്രവർത്തിക്കണം.

<a href="#" class="group block p-6 bg-white dark:bg-slate-800 rounded-lg shadow-md"> <h3 class="text-slate-900 group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400">Card Title</h3> <p class="text-slate-500 dark:text-slate-400">Card content goes here.</p> <span class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">→</span> </a>

സ്റ്റാക്ക് ചെയ്ത മോഡിഫയർ വിശദീകരണം:

• h3-ലെ dark:group-hover:text-blue-400: ഡാർക്ക് മോഡ് സജീവമായിരിക്കുമ്പോൾ ഒപ്പം പാരൻ്റ് group ഹോവർ ചെയ്യുമ്പോൾ, ടൈറ്റിലിന്റെ ടെക്സ്റ്റ് നിറം മാറ്റുക. ഇത് ഡിഫോൾട്ട് ഡാർക്ക് മോഡ് നിറത്തെ മറികടക്കുന്നു, എന്നാൽ ലൈറ്റ് മോഡ് ഹോവർ സ്റ്റൈലിനെ ബാധിക്കുന്നില്ല.
• span-ലെ group-hover:translate-x-1: പാരൻ്റ് group ഹോവർ ചെയ്യുമ്പോൾ (ഏത് മോഡിലും), ആരോ ഐക്കൺ വലത്തേക്ക് നീക്കുക.

peer-* ഉപയോഗിച്ച് ഡൈനാമിക് സിബ്ലിംഗ് ഇൻ്ററാക്ഷനുകൾ

സിബ്ലിംഗ് എലമെൻ്റുകളെ സ്റ്റൈൽ ചെയ്യാനാണ് peer മോഡിഫയർ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. ഒരു എലമെൻ്റിനെ peer ക്ലാസ് ഉപയോഗിച്ച് അടയാളപ്പെടുത്തുമ്പോൾ, അതിനുശേഷമുള്ള ഒരു സിബ്ലിംഗ് എലമെൻ്റിൽ peer-focus:, peer-invalid:, അല്ലെങ്കിൽ peer-checked: പോലുള്ള മോഡിഫയറുകൾ ഉപയോഗിച്ച് പിയറിന്റെ സ്റ്റേറ്റ് അടിസ്ഥാനമാക്കി സ്റ്റൈൽ ചെയ്യാൻ കഴിയും.

ഒരു ഫോം ഇൻപുട്ടും അതിൻ്റെ ലേബലും ഇതിനൊരു മികച്ച ഉദാഹരണമാണ്. ഇൻപുട്ട് ഫോക്കസ് ചെയ്യുമ്പോൾ ലേബലിന്റെ നിറം മാറണം, ഇൻപുട്ട് ഇൻവാലിഡ് ആണെങ്കിൽ ഒരു എറർ മെസ്സേജ് പ്രത്യക്ഷപ്പെടണം. ഇത് എല്ലാ ബ്രേക്ക്‌പോയിൻ്റുകളിലും കളർ സ്കീമുകളിലും പ്രവർത്തിക്കണം.

<div> <label for="email" class="text-sm font-medium text-gray-700 dark:text-gray-300 peer-focus:text-violet-600 dark:peer-focus:text-violet-400">Email</label> <input type="email" id="email" class="peer mt-1 block w-full border-gray-300 invalid:border-red-500 focus:border-violet-500 ..." required /> <p class="mt-2 invisible text-sm text-red-600 peer-invalid:visible">Please provide a valid email address.</p> </div>

സ്റ്റാക്ക് ചെയ്ത മോഡിഫയർ വിശദീകരണം:

• label-ലെ dark:peer-focus:text-violet-400: ഡാർക്ക് മോഡ് സജീവമായിരിക്കുമ്പോൾ ഒപ്പം സിബ്ലിംഗ് peer ഇൻപുട്ട് ഫോക്കസ് ചെയ്യുമ്പോൾ, ലേബലിന്റെ നിറം വയലറ്റായി മാറ്റുക. ഇത് ലൈറ്റ് മോഡിനായുള്ള സാധാരണ peer-focus:text-violet-600-നോടൊപ്പം പ്രവർത്തിക്കുന്നു.
• എറർ p-യിലെ peer-invalid:visible: സിബ്ലിംഗ് peer ഇൻപുട്ടിന് ഒരു `invalid` സ്റ്റേറ്റ് ഉണ്ടാകുമ്പോൾ (ഉദാഹരണത്തിന്, പൂരിപ്പിക്കാത്ത റിക്വയേർഡ് ഫീൽഡ്), അതിന്റെ വിസിബിലിറ്റി `invisible`-ൽ നിന്ന് `visible`-ലേക്ക് മാറ്റുക. ജാവാസ്ക്രിപ്റ്റ് ഇല്ലാതെ ഫോം വാലിഡേഷൻ സ്റ്റൈലിംഗിൻ്റെ ഒരു മികച്ച ഉദാഹരണമാണിത്.

അവസാന ഘട്ടം: ആർബിട്രറി വേരിയൻ്റുകൾ ഉപയോഗിച്ച് സ്റ്റാക്കിംഗ്

ചിലപ്പോൾ, ടെയിൽവിൻഡ് ഡിഫോൾട്ടായി നൽകാത്ത ഒരു സാഹചര്യത്തെ അടിസ്ഥാനമാക്കി ഒരു സ്റ്റൈൽ പ്രയോഗിക്കേണ്ടി വന്നേക്കാം. ഇവിടെയാണ് ആർബിട്രറി വേരിയൻ്റുകൾ വരുന്നത്. നിങ്ങളുടെ ക്ലാസ് നാമത്തിൽ തന്നെ ഒരു കസ്റ്റം സെലക്ടർ എഴുതാൻ അവ നിങ്ങളെ അനുവദിക്കുന്നു, അതെ, അവ സ്റ്റാക്ക് ചെയ്യാനും കഴിയും!

സിൻ്റാക്സ് സ്ക്വയർ ബ്രാക്കറ്റുകൾ ഉപയോഗിക്കുന്നു: [&_selector]:utility.

ഉദാഹരണം 1: ഹോവർ ചെയ്യുമ്പോൾ പ്രത്യേക ചിൽഡ്രണുകളെ ടാർഗെറ്റുചെയ്യുന്നു

നിങ്ങൾക്ക് ഒരു കണ്ടെയ്‌നർ ഉണ്ടെന്ന് കരുതുക, അതിൽ ഹോവർ ചെയ്യുമ്പോൾ അതിനുള്ളിലെ എല്ലാ <strong> ടാഗുകളും പച്ച നിറത്തിലേക്ക് മാറണം, എന്നാൽ ഇത് വലിയ സ്ക്രീനുകളിൽ മാത്രം മതി.

<div class="p-4 border lg:hover:[&_strong]:text-green-500"> <p>This is a paragraph with <strong>important text</strong> that will change color.</p> <p>This is another paragraph with another <strong>bolded part</strong>.</p> </div>

വിശദീകരണം:

lg:hover:[&_strong]:text-green-500 എന്ന ക്ലാസ് ഒരു റെസ്പോൺസീവ് മോഡിഫയർ (lg:), ഒരു സ്റ്റേറ്റ് മോഡിഫയർ (hover:), ഒരു ആർബിട്രറി വേരിയൻ്റ് ([&_strong]:) എന്നിവ സംയോജിപ്പിച്ച് വളരെ നിർദ്ദിഷ്ടമായ ഒരു നിയമം സൃഷ്ടിക്കുന്നു: "വലിയ സ്ക്രീനുകളിലും അതിനു മുകളിലും, ഈ div ഹോവർ ചെയ്യുമ്പോൾ, അതിലെ എല്ലാ <strong> എലമെൻ്റുകളെയും കണ്ടെത്തി അവയുടെ ടെക്സ്റ്റ് പച്ചയാക്കുക."

ഉദാഹരണം 2: ആട്രിബ്യൂട്ട് സെലക്ടറുകൾ ഉപയോഗിച്ച് സ്റ്റാക്കിംഗ്

സ്റ്റേറ്റ് മാനേജ് ചെയ്യാൻ `data-*` ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്ന ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്കുകളുമായി സംയോജിപ്പിക്കുമ്പോൾ ഈ ടെക്നിക് വളരെ ഉപയോഗപ്രദമാണ് (ഉദാഹരണത്തിന്, അക്കോർഡിയനുകൾ, ടാബുകൾ, അല്ലെങ്കിൽ ഡ്രോപ്പ്ഡൗണുകൾ).

ഒരു അക്കോർഡിയൻ ഐറ്റത്തിൻ്റെ ഉള്ളടക്ക ഏരിയ സ്റ്റൈൽ ചെയ്യാം, അത് ഡിഫോൾട്ടായി മറഞ്ഞിരിക്കുകയും അതിൻ്റെ പാരൻ്റിന് `data-state="open"` ഉണ്ടാകുമ്പോൾ ദൃശ്യമാകുകയും വേണം. ഡാർക്ക് മോഡിൽ അത് തുറന്നിരിക്കുമ്പോൾ വ്യത്യസ്തമായ പശ്ചാത്തല നിറവും വേണം.

<div data-state="closed" class="border rounded"> <h3>... Accordion Trigger ...</h3> <div class="overflow-hidden h-0 [data-state=open]:h-auto dark:[data-state=open]:bg-gray-800"> Accordion Content... </div> </div>

നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് പാരൻ്റിലെ `data-state` ആട്രിബ്യൂട്ട് `open`, `closed` എന്നിവയ്ക്കിടയിൽ ടോഗിൾ ചെയ്യും.

സ്റ്റാക്ക് ചെയ്ത മോഡിഫയർ വിശദീകരണം:

ഉള്ളടക്ക div-ലെ dark:[data-state=open]:bg-gray-800 എന്ന ക്ലാസ് ഒരു മികച്ച ഉദാഹരണമാണ്. ഇത് പറയുന്നത്: "ഡാർക്ക് മോഡ് സജീവമായിരിക്കുമ്പോൾ ഒപ്പം എലമെൻ്റിന് `data-state="open"` എന്ന ആട്രിബ്യൂട്ട് ഉള്ളപ്പോൾ, ഒരു കടും ചാരനിറത്തിലുള്ള പശ്ചാത്തലം പ്രയോഗിക്കുക." എല്ലാ മോഡുകളിലും അതിൻ്റെ വിസിബിലിറ്റി നിയന്ത്രിക്കുന്ന അടിസ്ഥാന `[data-state=open]:h-auto` നിയമവുമായി ഇത് സ്റ്റാക്ക് ചെയ്തിരിക്കുന്നു.

മികച്ച രീതികളും പ്രകടനവും

മോഡിഫയർ സ്റ്റാക്കിംഗ് ശക്തമാണെങ്കിലും, വൃത്തിയുള്ളതും കൈകാര്യം ചെയ്യാൻ കഴിയുന്നതുമായ ഒരു കോഡ്ബേസ് നിലനിർത്താൻ ഇത് വിവേകപൂർവ്വം ഉപയോഗിക്കേണ്ടത് അത്യാവശ്യമാണ്.

• വായനാക്ഷമത നിലനിർത്തുക: യൂട്ടിലിറ്റി ക്ലാസുകളുടെ നീണ്ട നിരകൾ വായിക്കാൻ പ്രയാസമുണ്ടാക്കും. ഔദ്യോഗിക ടെയിൽവിൻഡ് സിഎസ്എസ് പ്രെറ്റിയർ പ്ലഗിൻ പോലുള്ള ഒരു ഓട്ടോമാറ്റിക് ക്ലാസ് സോർട്ടർ ഉപയോഗിക്കുന്നത് വളരെ ശുപാർശ ചെയ്യുന്നു. ഇത് ക്ലാസുകളുടെ ക്രമം സ്റ്റാൻഡേർഡ് ആക്കുന്നു, ഇത് സങ്കീർണ്ണമായ കോമ്പിനേഷനുകൾ എളുപ്പത്തിൽ മനസ്സിലാക്കാൻ സഹായിക്കുന്നു.
• കമ്പോണൻ്റ് അബ്സ്ട്രാക്ഷൻ: ഒരേ സങ്കീർണ്ണമായ മോഡിഫയർ സ്റ്റാക്ക് പല എലമെൻ്റുകളിലും നിങ്ങൾ ആവർത്തിക്കുകയാണെങ്കിൽ, ആ പാറ്റേൺ ഒരു പുനരുപയോഗിക്കാവുന്ന കമ്പോണൻ്റിലേക്ക് മാറ്റേണ്ടതിൻ്റെ ശക്തമായ സൂചനയാണത് (ഉദാഹരണത്തിന്, ഒരു റിയാക്ട് അല്ലെങ്കിൽ വ്യൂ കമ്പോണൻ്റ്, ലാറവെലിലെ ഒരു ബ്ലേഡ് കമ്പോണൻ്റ്, അല്ലെങ്കിൽ ഒരു ലളിതമായ പാർഷ്യൽ).
• ജെഐടി എഞ്ചിൻ ഉപയോഗിക്കുക: മുൻകാലങ്ങളിൽ, ധാരാളം വേരിയൻ്റുകൾ പ്രവർത്തനക്ഷമമാക്കുന്നത് വലിയ സിഎസ്എസ് ഫയൽ വലുപ്പത്തിലേക്ക് നയിക്കുമായിരുന്നു. ടെയിൽവിൻഡിൻ്റെ ജസ്റ്റ്-ഇൻ-ടൈം (ജെഐടി) എഞ്ചിൻ ഉപയോഗിച്ച്, ഇത് ഒരു പ്രശ്നമല്ല. ജെഐടി എഞ്ചിൻ നിങ്ങളുടെ ഫയലുകൾ സ്കാൻ ചെയ്യുകയും നിങ്ങൾക്ക് ആവശ്യമുള്ള സിഎസ്എസ് മാത്രം ഉണ്ടാക്കുകയും ചെയ്യുന്നു. ഇതിൽ സങ്കീർണ്ണമായ എല്ലാ സ്റ്റാക്ക് ചെയ്ത മോഡിഫയർ കോമ്പിനേഷനുകളും ഉൾപ്പെടുന്നു. നിങ്ങളുടെ അവസാന ബിൽഡിലെ പ്രകടനത്തെ ഇത് കാര്യമായി ബാധിക്കില്ല, അതിനാൽ നിങ്ങൾക്ക് ആത്മവിശ്വാസത്തോടെ സ്റ്റാക്ക് ചെയ്യാം.
• പ്രത്യേകതയും ക്രമവും മനസ്സിലാക്കുക: നിങ്ങളുടെ എച്ച്ടിഎംഎല്ലിലെ ക്ലാസുകളുടെ ക്രമം സാധാരണ സിഎസ്എസിലെ പോലെ പ്രത്യേകതയെ ബാധിക്കാറില്ല. എന്നിരുന്നാലും, ഒരേ ബ്രേക്ക്‌പോയിൻ്റിലും സ്റ്റേറ്റിലുമുള്ള രണ്ട് യൂട്ടിലിറ്റികൾ ഒരേ പ്രോപ്പർട്ടി നിയന്ത്രിക്കാൻ ശ്രമിക്കുമ്പോൾ (ഉദാഹരണത്തിന്, `md:text-left md:text-right`), സ്ട്രിംഗിൽ അവസാനം വരുന്ന യൂട്ടിലിറ്റി വിജയിക്കും. പ്രെറ്റിയർ പ്ലഗിൻ ഈ ലോജിക് നിങ്ങൾക്കായി കൈകാര്യം ചെയ്യുന്നു.

ഉപസംഹാരം: നിങ്ങൾക്ക് സങ്കൽപ്പിക്കാൻ കഴിയുന്നതെന്തും നിർമ്മിക്കുക

ടെയിൽവിൻഡ് സിഎസ്എസ് മോഡിഫയർ സ്റ്റാക്കിംഗ് ഒരു ഫീച്ചർ മാത്രമല്ല; ടെയിൽവിൻഡിനെ ഒരു ലളിതമായ യൂട്ടിലിറ്റി ലൈബ്രറിയിൽ നിന്ന് ഒരു സമഗ്ര യുഐ ഡിസൈൻ ഫ്രെയിംവർക്കായി ഉയർത്തുന്ന പ്രധാന സംവിധാനമാണിത്. റെസ്പോൺസീവ്, സ്റ്റേറ്റ്, തീം, ഗ്രൂപ്പ്, പിയർ, കൂടാതെ ആർബിട്രറി വേരിയൻ്റുകൾ എന്നിവ സംയോജിപ്പിക്കുന്ന കലയിൽ വൈദഗ്ദ്ധ്യം നേടുന്നതിലൂടെ, നിങ്ങൾ മുൻകൂട്ടി നിർമ്മിച്ച കമ്പോണൻ്റുകളുടെ പരിമിതികളിൽ നിന്ന് മോചിതരാകുകയും യഥാർത്ഥത്തിൽ ഇഷ്ടാനുസൃതവും, ചലനാത്മകവും, റെസ്പോൺസീവുമായ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കാനുള്ള ശക്തി നേടുകയും ചെയ്യുന്നു.

നിങ്ങൾ ഇനി ഒറ്റ-കണ്ടീഷൻ സ്റ്റൈലുകളിൽ പരിമിതരല്ല എന്നതാണ് പ്രധാന ആശയം. ഒരു എലമെൻ്റ് കൃത്യമായ സാഹചര്യങ്ങളിൽ എങ്ങനെ കാണപ്പെടുകയും പെരുമാറുകയും ചെയ്യണമെന്ന് നിങ്ങൾക്ക് ഇപ്പോൾ ഡിക്ലറേറ്റീവ് ആയി നിർവചിക്കാൻ കഴിയും. ഡാർക്ക് മോഡിനോട് പൊരുത്തപ്പെടുന്ന ഒരു ലളിതമായ ബട്ടൺ ആയാലും സങ്കീർണ്ണമായ ഒരു ഫോം കമ്പോണൻ്റ് ആയാലും, മോഡിഫയർ സ്റ്റാക്കിംഗ് നിങ്ങൾക്ക് അത് മനോഹരമായും കാര്യക്ഷമമായും നിർമ്മിക്കാൻ ആവശ്യമായ ടൂളുകൾ നൽകുന്നു, എല്ലാം നിങ്ങളുടെ മാർക്കപ്പിൻ്റെ സൗകര്യത്തിൽ നിന്ന് പുറത്തുപോകാതെ തന്നെ.