ടെയിൽവിൻഡ് സിഎസ്എസ് വേരിയൻ്റ്സിൽ പ്രാവീണ്യം നേടാം: സ്യൂഡോ-ക്ലാസ്, സ്റ്റേറ്റ് സ്റ്റൈലിംഗിലേക്കുള്ള ഒരു ആഴത്തിലുള്ള പഠനം

ആധുനിക വെബ് ഡെവലപ്‌മെൻ്റിൽ, കാഴ്ചയിൽ ആകർഷകമായതും ഉപയോക്താവിൻ്റെ ഇടപെടലുകളോട് ചലനാത്മകമായി പ്രതികരിക്കുന്നതുമായ യൂസർ ഇൻ്റർഫേസുകൾ (UI) നിർമ്മിക്കേണ്ടത് അത്യാവശ്യമാണ്. ഇവിടെയാണ് ടെയിൽവിൻഡ് സിഎസ്എസ് പോലുള്ള ഒരു യൂട്ടിലിറ്റി-ഫസ്റ്റ് ഫ്രെയിംവർക്കിൻ്റെ യഥാർത്ഥ ശക്തി പ്രകാശിക്കുന്നത്. അതിൻ്റെ യൂട്ടിലിറ്റി ക്ലാസുകൾ 'എന്ത്' പ്രയോഗിക്കണമെന്ന് (പ്രത്യേക സ്റ്റൈൽ നിയമം) പറയുമ്പോൾ, അതിൻ്റെ വേരിയൻ്റുകൾ 'എപ്പോൾ' പ്രയോഗിക്കണമെന്ന് നിർണ്ണയിക്കുന്നു.

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

ലോകമെമ്പാടുമുള്ള ഡെവലപ്പർമാർക്കായി രൂപകൽപ്പന ചെയ്തതാണ് ഈ സമഗ്രമായ ഗൈഡ്. hover, focus പോലുള്ള അടിസ്ഥാന സ്യൂഡോ-ക്ലാസുകൾ മുതൽ സങ്കീർണ്ണമായ കമ്പോണൻ്റ് ഇൻ്ററാക്ഷനുകൾക്കായി group, peer എന്നിവ ഉപയോഗിക്കുന്ന വികസിത സാങ്കേതിക വിദ്യകൾ വരെ, ടെയിൽവിൻഡ് സിഎസ്എസ് വേരിയൻ്റുകളുടെ പൂർണ്ണ ശ്രേണി നമ്മൾ ഇവിടെ പര്യവേക്ഷണം ചെയ്യും. ഇത് പൂർത്തിയാകുമ്പോഴേക്കും, നിങ്ങളുടെ എച്ച്ടിഎംഎൽ-നുള്ളിൽ പൂർണ്ണമായും അത്യാധുനികവും സ്റ്റേറ്റ്-അവെയർ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കാനുമുള്ള അറിവ് നിങ്ങൾക്കുണ്ടാകും.

അടിസ്ഥാന ആശയം മനസ്സിലാക്കാം: എന്താണ് വേരിയൻ്റുകൾ?

ടെയിൽവിൻഡ് സിഎസ്എസ്-ൽ, ഒരു വേരിയൻ്റ് എന്നത് ഒരു യൂട്ടിലിറ്റി ക്ലാസിനോട് നിങ്ങൾ ചേർക്കുന്ന ഒരു പ്രിഫിക്സാണ്, ഇത് ഒരു കോളൻ (:) ഉപയോഗിച്ച് വേർതിരിച്ചിരിക്കുന്നു. ഈ പ്രിഫിക്സ് ഒരു നിബന്ധനയായി പ്രവർത്തിക്കുന്നു. ഈ നിബന്ധന പാലിക്കുമ്പോൾ മാത്രമേ അതിന് ശേഷമുള്ള യൂട്ടിലിറ്റി ക്ലാസ് പ്രയോഗിക്കുകയുള്ളൂ.

അടിസ്ഥാന വാക്യഘടന ലളിതവും എളുപ്പത്തിൽ മനസ്സിലാക്കാവുന്നതുമാണ്:

variant:utility-class

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

            .my-button {
  background-color: #3b82f6; /* bg-blue-500 */
}

.my-button:hover {
  background-color: #2563eb; /* bg-blue-700 */
}
            

              
                Copy
              
            
          

ടെയിൽവിൻഡിൻ്റെ വേരിയൻ്റുകൾ ഉപയോഗിച്ച്, നിങ്ങളുടെ സ്റ്റൈലിംഗ് മാർക്ക്അപ്പുമായി ഒരേ സ്ഥലത്ത് നിലനിർത്തിക്കൊണ്ട്, എച്ച്ടിഎംഎൽ-ൽ നേരിട്ട് ഇതേ ഫലം നേടാനാകും:

            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>
            

              
                Copy
              
            
          

ഇവിടെ, hover: ആണ് വേരിയൻ്റ്. ബട്ടൺ :hover അവസ്ഥയിലായിരിക്കുമ്പോൾ മാത്രം bg-blue-700 പ്രയോഗിക്കുന്ന ഒരു സിഎസ്എസ് നിയമം ഉണ്ടാക്കാൻ ഇത് ടെയിൽവിൻഡിൻ്റെ ജസ്റ്റ്-ഇൻ-ടൈം (JIT) എഞ്ചിനോട് പറയുന്നു. ലളിതവും എന്നാൽ ശക്തവുമായ ഈ ആശയം ടെയിൽവിൻഡ് സിഎസ്എസ്-ലെ എല്ലാ ഇൻ്ററാക്ടീവ് സ്റ്റൈലിംഗിൻ്റെയും അടിസ്ഥാനമാണ്.

ഏറ്റവും സാധാരണമായ വേരിയൻ്റുകൾ: ഇൻ്ററാക്ടീവ് സ്യൂഡോ-ക്ലാസുകൾ

സ്യൂഡോ-ക്ലാസുകൾ എന്നത് ഒരു എലമെൻ്റിൻ്റെ പ്രത്യേക അവസ്ഥയെ നിർവചിക്കുന്ന സിഎസ്എസ് സെലക്ടറുകളാണ്. ഉപയോക്താവിൻ്റെ പ്രവർത്തനങ്ങളോട് പ്രതികരിക്കുന്നതിന് നിങ്ങൾ ദിവസവും ഉപയോഗിക്കുന്ന എല്ലാ സാധാരണ സ്യൂഡോ-ക്ലാസുകൾക്കുമായി ടെയിൽവിൻഡ് വേരിയൻ്റുകൾ നൽകുന്നു.

hover വേരിയൻ്റ്: മൗസ് കഴ്സറുകളോട് പ്രതികരിക്കുന്നു

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

ഉദാഹരണം: ഒരു ഇൻ്ററാക്ടീവ് കാർഡ് കമ്പോണൻ്റ്

ഹോവർ ചെയ്യുമ്പോൾ ഉയർന്നു പൊങ്ങുകയും കൂടുതൽ വ്യക്തമായ നിഴൽ നേടുകയും ചെയ്യുന്ന ഒരു കാർഡ് ഉണ്ടാക്കാം, ഇത് ആധുനിക യുഐ ഡിസൈനിലെ ഒരു സാധാരണ പാറ്റേൺ ആണ്.

            <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md 
             transition-all duration-300 
             hover:shadow-xl hover:-translate-y-1">
  <h3 class="text-xl font-medium text-black">Global Insights</h3>
  <p class="text-slate-500">Discover trends from around the world.</p>
</div>
            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ:

• hover:shadow-xl ഹോവർ ചെയ്യുമ്പോൾ ബോക്സ്-ഷാഡോ വലുതാക്കുന്നു.
• hover:-translate-y-1 കാർഡിനെ ചെറുതായി മുകളിലേക്ക് നീക്കുന്നു, ഇത് ഒരു "ഉയർത്തുന്ന" പ്രഭാവം നൽകുന്നു.
• അവസ്ഥാമാറ്റം സുഗമവും ആനിമേറ്റഡും ആക്കുന്നതിനായി നമ്മൾ transition-all, duration-300 എന്നിവ ചേർത്തു.

focus വേരിയൻ്റ്: അക്സസിബിലിറ്റിക്കും ഇൻപുട്ടിനും വേണ്ടിയുള്ള സ്റ്റൈലിംഗ്

അക്സസിബിലിറ്റിക്ക് focus വേരിയൻ്റ് വളരെ പ്രധാനമാണ്. മൗസ് ഉപയോഗിച്ച് ക്ലിക്ക് ചെയ്യുമ്പോഴോ അല്ലെങ്കിൽ കീബോർഡ് ഉപയോഗിച്ച് നാവിഗേറ്റ് ചെയ്യുമ്പോഴോ (ഉദാഹരണത്തിന്, 'Tab' കീ ഉപയോഗിച്ച്) ഒരു എലമെൻ്റ് തിരഞ്ഞെടുക്കുമ്പോൾ ഇത് സ്റ്റൈലുകൾ പ്രയോഗിക്കുന്നു. ഇൻപുട്ടുകൾ, ടെക്സ്റ്റ് ഏരിയകൾ, ബട്ടണുകൾ പോലുള്ള ഫോം എലമെൻ്റുകളിലാണ് ഇത് സാധാരണയായി ഉപയോഗിക്കുന്നത്.

ഉദാഹരണം: നന്നായി സ്റ്റൈൽ ചെയ്ത ഒരു ഫോം ഇൻപുട്ട്

വ്യക്തമായ ഒരു ഫോക്കസ് സ്റ്റേറ്റ്, ഉപയോക്താക്കൾക്ക് അവർ പേജിൽ എവിടെയാണെന്ന് കൃത്യമായി അറിയിക്കുന്നു, ഇത് കീബോർഡ്-മാത്രം നാവിഗേഷന് അത്യാവശ്യമാണ്.

            <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
<input type="email" id="email"
       class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md 
              text-sm shadow-sm placeholder-slate-400
              focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
            

              
                Copy
              
            
          

focus: വേരിയൻ്റുകൾ ചെയ്യുന്നത് ഇതാ:

• focus:outline-none: ബ്രൗസറിൻ്റെ ഡിഫോൾട്ട് ഫോക്കസ് ഔട്ട്ലൈൻ നീക്കംചെയ്യുന്നു. കാഴ്ചയ്ക്ക് കൂടുതൽ ആകർഷകമായ നമ്മുടെ സ്വന്തം സ്റ്റൈൽ നൽകുന്നതിനാണ് നമ്മൾ ഇത് ചെയ്യുന്നത്.
• focus:border-sky-500: ബോർഡർ നിറം തിളക്കമുള്ള ആകാശ നീലയാക്കി മാറ്റുന്നു.
• focus:ring-1 focus:ring-sky-500: അതേ നിറത്തിലുള്ള ഒരു സൂക്ഷ്മമായ പുറം തിളക്കം (ബോക്സ്-ഷാഡോ റിംഗ്) ചേർക്കുന്നു, ഇത് ഫോക്കസ് സ്റ്റേറ്റിനെ കൂടുതൽ പ്രമുഖമാക്കുന്നു.

active വേരിയൻ്റ്: ക്ലിക്കുകളും ടാപ്പുകളും പിടിച്ചെടുക്കുന്നു

ഒരു എലമെൻ്റ് ഉപയോക്താവിനാൽ സജീവമാക്കപ്പെടുമ്പോൾ active വേരിയൻ്റ് പ്രയോഗിക്കപ്പെടുന്നു—ഉദാഹരണത്തിന്, ഒരു ബട്ടൺ അമർത്തിപ്പിടിക്കുമ്പോൾ. ക്ലിക്ക് അല്ലെങ്കിൽ ടാപ്പ് രജിസ്റ്റർ ചെയ്തു എന്നതിൻ്റെ ഉടനടി ഫീഡ്‌ബ্যাক ഇത് നൽകുന്നു.

ഉദാഹരണം: "അമർത്തിയ" പ്രതീതിയുള്ള ഒരു ബട്ടൺ

            <button class="bg-indigo-500 text-white font-semibold py-2 px-4 rounded-lg 
             shadow-md hover:bg-indigo-600 focus:outline-none 
             focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75 
             active:bg-indigo-700 active:translate-y-0.5">
  Submit
</button>
            

              
                Copy
              
            
          

ഈ മെച്ചപ്പെടുത്തിയ ബട്ടണിൽ:

• active:bg-indigo-700 അമർത്തിപ്പിടിക്കുമ്പോൾ ബട്ടണിനെ കൂടുതൽ ഇരുണ്ടതാക്കുന്നു.
• active:translate-y-0.5 ബട്ടണിനെ ചെറുതായി താഴേക്ക് തള്ളുന്നു, ഇത് ഭൗതികമായി അമർത്തുന്ന ഒരു പ്രഭാവം നൽകുന്നു.

മറ്റ് ഇൻ്ററാക്ടീവ് വേരിയൻ്റുകൾ: focus-within, focus-visible

focus-within: ഈ ഉപയോഗപ്രദമായ വേരിയൻ്റ്, ഒരു പാരൻ്റ് എലമെൻ്റിൻ്റെ ഏതെങ്കിലും ഒരു ചൈൽഡ് എലമെൻ്റിന് ഫോക്കസ് ലഭിക്കുമ്പോഴെല്ലാം ആ പാരൻ്റ് എലമെൻ്റിൽ സ്റ്റൈലുകൾ പ്രയോഗിക്കുന്നു. ഉപയോക്താവ് ഒരു ഫോം ഗ്രൂപ്പിലെ ഇൻപുട്ടുമായി സംവദിക്കുമ്പോൾ ആ മുഴുവൻ ഗ്രൂപ്പും സ്റ്റൈൽ ചെയ്യാൻ ഇത് മികച്ചതാണ്.

            <div class="flex items-center space-x-2 p-4 border rounded-lg focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
  <!-- SVG Icon -->
  <svg class="h-6 w-6 text-gray-400">...</svg>
  <input type="text" placeholder="Search..." class="outline-none">
</div>
            

              
                Copy
              
            
          

ഇപ്പോൾ, ഉപയോക്താവ് <input>-ൽ ഫോക്കസ് ചെയ്യുമ്പോൾ, മുഴുവൻ പാരൻ്റ് <div>-നും ഒരു നീല ബോർഡറും റിംഗും ലഭിക്കുന്നു.

focus-visible: ഒരു ഫോക്കസ് റിംഗ് എപ്പോൾ കാണിക്കണം എന്നതിനെക്കുറിച്ച് ബ്രൗസറുകൾക്ക് വ്യത്യസ്ത സമീപനങ്ങളുണ്ട്. ഉദാഹരണത്തിന്, ഒരു മൗസ് ക്ലിക്കിന് ശേഷം അവർ അത് ഒരു ബട്ടണിൽ കാണിച്ചേക്കില്ല, പക്ഷേ കീബോർഡ് നാവിഗേഷന് ശേഷം കാണിക്കും. focus-visible വേരിയൻ്റ് ഈ മികച്ച സ്വഭാവം ഉപയോഗിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. മൗസ്, കീബോർഡ് ഉപയോക്താക്കൾക്ക് മികച്ച അനുഭവം നൽകുന്നതിന് ഔട്ട്ലൈൻ/റിംഗ് സ്റ്റൈലിംഗിനായി focus-ന് പകരം focus-visible ഉപയോഗിക്കാൻ സാധാരണയായി ശുപാർശ ചെയ്യുന്നു.

അവസ്ഥയെ അടിസ്ഥാനമാക്കിയുള്ള സ്റ്റൈലിംഗ്: ഫോം, യുഐ എലമെൻ്റ് വേരിയൻ്റുകൾ

നേരിട്ടുള്ള ഉപയോക്തൃ ഇടപെടലിനുപരി, എലമെൻ്റുകൾക്ക് അവയുടെ ആട്രിബ്യൂട്ടുകളെ അടിസ്ഥാനമാക്കി പലപ്പോഴും അവസ്ഥകളുണ്ട്. ഈ അവസ്ഥകളെ വ്യക്തമായി സ്റ്റൈൽ ചെയ്യുന്നതിനായി ടെയിൽവിൻഡ് വേരിയൻ്റുകൾ നൽകുന്നു.

disabled വേരിയൻ്റ്: ലഭ്യമല്ലാത്ത അവസ്ഥ അറിയിക്കുന്നു

ഒരു ബട്ടണിലോ ഫോം ഇൻപുട്ടിലോ disabled ആട്രിബ്യൂട്ട് ഉള്ളപ്പോൾ, അതുമായി സംവദിക്കാൻ കഴിയില്ല. ഉപയോക്താവിന് ഇത് ദൃശ്യപരമായി വ്യക്തമാക്കുന്നതിന് ഈ അവസ്ഥയെ സ്റ്റൈൽ ചെയ്യാൻ disabled വേരിയൻ്റ് അനുവദിക്കുന്നു.

            <button disabled class="bg-slate-300 text-slate-500 font-bold py-2 px-4 rounded cursor-not-allowed 
                     disabled:opacity-50">
  Processing...
</button>
            

              
                Copy
              
            
          

ഇവിടെ, disabled:opacity-50 എന്നത് disabled ആട്രിബ്യൂട്ട് ഉള്ളപ്പോൾ ബട്ടണിൻ്റെ അതാര്യത കുറയ്ക്കുന്നു, ഇത് ഒരു പ്രവർത്തനരഹിതമായ അവസ്ഥയെ സൂചിപ്പിക്കുന്നതിനുള്ള ഒരു സാധാരണ രീതിയാണ്. cursor-not-allowed യൂട്ടിലിറ്റി ഇത് കൂടുതൽ ഉറപ്പിക്കുന്നു.

checked വേരിയൻ്റ്: ചെക്ക്ബോക്സുകൾക്കും റേഡിയോ ബട്ടണുകൾക്കുമായി

ഇഷ്ടാനുസൃത ചെക്ക്ബോക്സുകളും റേഡിയോ ബട്ടണുകളും നിർമ്മിക്കുന്നതിന് checked വേരിയൻ്റ് അത്യാവശ്യമാണ്. ഇൻപുട്ടിൻ്റെ checked ആട്രിബ്യൂട്ട് ട്രൂ ആയിരിക്കുമ്പോൾ ഇത് സ്റ്റൈലുകൾ പ്രയോഗിക്കുന്നു.

ഉദാഹരണം: ഒരു കസ്റ്റം സ്റ്റൈൽ ചെയ്ത ചെക്ക്ബോക്സ്

            <label class="flex items-center space-x-3">
  <input type="checkbox" class="appearance-none h-5 w-5 border border-gray-300 rounded-md 
                                checked:bg-blue-600 checked:border-transparent">
  <span class="text-gray-900 font-medium">Accept terms and conditions</span>
</label>
            

              
                Copy
              
            
          

ബ്രൗസറിൻ്റെ ഡിഫോൾട്ട് സ്റ്റൈലിംഗ് നീക്കംചെയ്യാൻ നമ്മൾ appearance-none ഉപയോഗിക്കുന്നു, തുടർന്ന് ബോക്സ് ചെക്ക് ചെയ്യുമ്പോൾ പശ്ചാത്തല നിറം മാറ്റാൻ checked: വേരിയൻ്റ് ഉപയോഗിക്കുന്നു. ::before അല്ലെങ്കിൽ ::after സ്യൂഡോ-എലമെൻ്റുകൾ ഈ വേരിയൻ്റുമായി സംയോജിപ്പിച്ച് നിങ്ങൾക്ക് ഒരു ചെക്ക്മാർക്ക് ഐക്കൺ പോലും ചേർക്കാൻ കഴിയും.

ഫോം വാലിഡേഷൻ വേരിയൻ്റുകൾ: required, optional, valid, invalid

ആധുനിക ഫോമുകൾ തത്സമയ വാലിഡേഷൻ ഫീഡ്‌ബ্যাক നൽകുന്നു. ടെയിൽവിൻഡിൻ്റെ വാലിഡേഷൻ വേരിയൻ്റുകൾ ബ്രൗസറിൻ്റെ കൺസ്ട്രെയിൻ്റ് വാലിഡേഷൻ എപിഐ ഉപയോഗിക്കുന്നു. required പോലുള്ള ആട്രിബ്യൂട്ടുകളെയും ഇൻപുട്ടിൻ്റെ മൂല്യത്തിൻ്റെ നിലവിലെ സാധുതയെയും (ഉദാഹരണത്തിന്, type="email"-ന്) അടിസ്ഥാനമാക്കിയാണ് ഈ വേരിയൻ്റുകൾ പ്രയോഗിക്കുന്നത്.

            <input type="email" required 
       class="border rounded-md px-3 py-2 
              invalid:border-pink-500 invalid:text-pink-600
              focus:invalid:border-pink-500 focus:invalid:ring-pink-500
              valid:border-green-500">
            

              
                Copy
              
            
          

ഈ ഇൻപുട്ട് ഫീൽഡിന് താഴെ പറയുന്നവ ഉണ്ടാകും:

• ഉള്ളടക്കം സാധുവായ ഒരു ഇമെയിൽ വിലാസം അല്ലെങ്കിൽെങ്കിൽ പിങ്ക് ബോർഡറും ടെക്സ്റ്റും (invalid:).
• സാധുവായ ഒരു ഇമെയിൽ വിലാസം നൽകുമ്പോൾ പച്ച ബോർഡർ (valid:).
• ഫീൽഡ് അസാധുവായിരിക്കുമ്പോൾ ഫോക്കസ് ചെയ്താൽ ഫോക്കസ് റിംഗും പിങ്ക് നിറമാകും (focus:invalid:).

വികസിത ഇൻ്ററാക്ടിവിറ്റി: `group`, `peer` വേരിയൻ്റുകൾ

ചിലപ്പോൾ, ഒരു *വ്യത്യസ്ത* എലമെൻ്റിൻ്റെ അവസ്ഥയെ അടിസ്ഥാനമാക്കി മറ്റൊരു എലമെൻ്റിനെ സ്റ്റൈൽ ചെയ്യേണ്ടിവരും. ഇവിടെയാണ് ശക്തമായ group, peer ആശയങ്ങൾ വരുന്നത്. യൂട്ടിലിറ്റി ക്ലാസുകൾ മാത്രം ഉപയോഗിച്ച് കൈകാര്യം ചെയ്യാൻ മുൻപ് ബുദ്ധിമുട്ടായിരുന്ന ഒരു കൂട്ടം യുഐ വെല്ലുവിളികൾ ഇവ പരിഹരിക്കുന്നു.

`group`-ൻ്റെ ശക്തി: പാരൻ്റ് സ്റ്റേറ്റിനെ അടിസ്ഥാനമാക്കി ചിൽഡ്രനെ സ്റ്റൈൽ ചെയ്യുന്നു

ഒരു പാരൻ്റ് എലമെൻ്റിൻ്റെ അവസ്ഥയെ അടിസ്ഥാനമാക്കി ചൈൽഡ് എലമെൻ്റുകളെ സ്റ്റൈൽ ചെയ്യാൻ group വേരിയൻ്റ് നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് ഉപയോഗിക്കുന്നതിന്, നിങ്ങൾ ട്രാക്ക് ചെയ്യാൻ ആഗ്രഹിക്കുന്ന പാരൻ്റ് എലമെൻ്റിൽ group ക്ലാസ് ചേർക്കുക. തുടർന്ന്, ഏതൊരു ചൈൽഡ് എലമെൻ്റിലും, നിങ്ങൾക്ക് group-hover, group-focus പോലുള്ള വേരിയൻ്റുകൾ ഉപയോഗിക്കാം.

ഉദാഹരണം: ഹോവർ ചെയ്യുമ്പോൾ ഒരുമിച്ച് നിറം മാറുന്ന ടൈറ്റിലും ഐക്കണുമുള്ള ഒരു കാർഡ്

            <a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 
                   hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <!-- SVG Icon -->
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white">...</svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New Project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of templates.</p>
</a>
            

              
                Copy
              
            
          

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു:

1. നമ്മൾ പാരൻ്റ് <a> ടാഗിൽ group ക്ലാസ് ചേർക്കുന്നു.
2. ഉപയോക്താവ് മുഴുവൻ ലിങ്കിലും ഹോവർ ചെയ്യുമ്പോൾ, hover:bg-sky-500 കാരണം അതിൻ്റെ പശ്ചാത്തല നിറം മാറുന്നു.
3. അതേ സമയം, SVG-യിലെ group-hover:stroke-white ക്ലാസും ടെക്സ്റ്റ് എലമെൻ്റുകളിലെ group-hover:text-white ക്ലാസും സജീവമാവുകയും, അവയുടെ നിറങ്ങൾ വെള്ളയായി മാറുകയും ചെയ്യുന്നു.

ഇത് ഒരു ഏകീകൃതമായ ഹോവർ പ്രഭാവം സൃഷ്ടിക്കുന്നു, അല്ലെങ്കിൽ ഇതിന് കസ്റ്റം സിഎസ്എസ് അല്ലെങ്കിൽ ജാവാസ്ക്രിപ്റ്റ് ആവശ്യമായി വരുമായിരുന്നു.

`peer` ഉപയോഗിച്ചുള്ള സിബ്ലിംഗ് സ്റ്റൈലിംഗ്: ഫോമുകൾക്ക് ഒരു വഴിത്തിരിവ്

peer വേരിയൻ്റ് group-ന് സമാനമാണ്, പക്ഷേ ഇത് സിബ്ലിംഗ് എലമെൻ്റുകളെ സ്റ്റൈൽ ചെയ്യുന്നതിനാണ് പ്രവർത്തിക്കുന്നത്. നിങ്ങൾ ഒരു എലമെൻ്റിന് peer ക്ലാസ് ചേർക്കുന്നു, തുടർന്ന് ആ "പിയറി"ൻ്റെ അവസ്ഥയെ അടിസ്ഥാനമാക്കി *തുടർന്നുള്ള* സിബ്ലിംഗ് എലമെൻ്റുകളെ സ്റ്റൈൽ ചെയ്യുന്നതിന് peer-checked അല്ലെങ്കിൽ peer-invalid പോലുള്ള വേരിയൻ്റുകൾ ഉപയോഗിക്കാം. കസ്റ്റം ഫോം കൺട്രോളുകൾക്ക് ഇത് അവിശ്വസനീയമാംവിധം ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം: ബന്ധപ്പെട്ട ചെക്ക്ബോക്സ് ചെക്ക് ചെയ്യുമ്പോൾ മാറുന്ന ഒരു ലേബൽ

            <label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" class="sr-only peer">
  <div class="w-11 h-6 bg-gray-200 rounded-full 
            peer-focus:ring-4 peer-focus:ring-blue-300 
            peer-checked:after:translate-x-full peer-checked:after:border-white 
            after:content-[''] after:absolute after:top-0.5 after:left-[2px] 
            after:bg-white after:border-gray-300 after:border after:rounded-full 
            after:h-5 after:w-5 after:transition-all 
            peer-checked:bg-blue-600"></div>
  <span class="ml-3 text-sm font-medium text-gray-900 peer-checked:text-blue-600">
    Enable Notifications
  </span>
</label>
            

              
                Copy
              
            
          

ഇതൊരു സമ്പൂർണ്ണവും, അക്സസിബിളുമായ ടോഗിൾ സ്വിച്ചാണ്, പൂജ്യം ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് നിർമ്മിച്ചത്!

1. യഥാർത്ഥ ചെക്ക്ബോക്സ് <input>, sr-only ഉപയോഗിച്ച് ദൃശ്യപരമായി മറച്ചിരിക്കുന്നു (ഇത് ഇപ്പോഴും സ്ക്രീൻ റീഡറുകൾക്ക് ലഭ്യമാണ്) കൂടാതെ ഒരു peer ആയി അടയാളപ്പെടുത്തിയിരിക്കുന്നു.
2. ദൃശ്യമായ ടോഗിൾ സ്വിച്ച് എന്നത് ഒരു <div> ആണ്, അത് ഒരു ഹാൻഡിൽ ഉള്ള ട്രാക്ക് പോലെ സ്റ്റൈൽ ചെയ്തിരിക്കുന്നു (::after സ്യൂഡോ-എലമെൻ്റ് ഉപയോഗിച്ച്).
3. മറഞ്ഞിരിക്കുന്ന ചെക്ക്ബോക്സ് ചെക്ക് ചെയ്യുമ്പോൾ peer-checked:bg-blue-600 ട്രാക്കിൻ്റെ പശ്ചാത്തല നിറം മാറ്റുന്നു.
4. ചെക്ക്ബോക്സ് ചെക്ക് ചെയ്യുമ്പോൾ peer-checked:after:translate-x-full ഹാൻഡിൽ വലതുവശത്തേക്ക് നീക്കുന്നു.
5. peer-checked:text-blue-600 സിബ്ലിംഗ് <span> ലേബൽ ടെക്സ്റ്റിൻ്റെ നിറം മാറ്റുന്നു.

സൂക്ഷ്മമായ നിയന്ത്രണത്തിനായി വേരിയൻ്റുകൾ സംയോജിപ്പിക്കുന്നു

വേരിയൻ്റുകളെ ഒരുമിച്ച് ചേർക്കാനുള്ള കഴിവ് ടെയിൽവിൻഡിൻ്റെ ഏറ്റവും ശക്തമായ സവിശേഷതകളിലൊന്നാണ്. ഇത് വളരെ നിർദ്ദിഷ്ടമായ ഉപാധികളോടുകൂടിയ സ്റ്റൈലുകൾ സൃഷ്ടിക്കാൻ അനുവദിക്കുന്നു.

റെസ്പോൺസീവും സ്റ്റേറ്റ് വേരിയൻ്റുകളും: ചലനാത്മകമായ ജോഡി

നിങ്ങൾക്ക് റെസ്പോൺസീവ് പ്രിഫിക്സുകളും (md:, lg: പോലുള്ളവ) സ്റ്റേറ്റ് വേരിയൻ്റുകളുമായി സംയോജിപ്പിച്ച്, ചില സ്ക്രീൻ വലുപ്പങ്ങളിലും ചില അവസ്ഥകളിലും മാത്രം സ്റ്റൈലുകൾ പ്രയോഗിക്കാൻ കഴിയും. റെസ്പോൺസീവ് വേരിയൻ്റ് എല്ലായ്പ്പോഴും ആദ്യം വരുന്നു.

വാക്യഘടന: breakpoint:state:utility-class

            <button class="bg-blue-500 text-white p-2 rounded 
             hover:bg-blue-600 
             md:bg-green-500 md:hover:bg-green-600">
  Responsive Button
</button>
            

              
                Copy
              
            
          

ഈ ബട്ടൺ:

• ചെറിയ സ്ക്രീനുകളിൽ നീലയായിരിക്കും, ഹോവറിൽ കടും നീലയായി മാറും.
• മീഡിയം സ്ക്രീനുകളിലും അതിനുമുകളിലും പച്ചയായിരിക്കും (md:bg-green-500), ഹോവറിൽ കടും പച്ചയായി മാറും (md:hover:bg-green-600).

ഒന്നിലധികം സ്റ്റേറ്റ് വേരിയൻ്റുകൾ അടുക്കുന്നു

എല്ലാ നിബന്ധനകളും പാലിക്കുമ്പോൾ മാത്രം സ്റ്റൈലുകൾ പ്രയോഗിക്കുന്നതിന് നിങ്ങൾക്ക് ഒന്നിലധികം സ്റ്റേറ്റ് വേരിയൻ്റുകൾ അടുക്കാനും കഴിയും. ഇൻ്ററാക്ഷനുകൾ സൂക്ഷ്മമായി ക്രമീകരിക്കുന്നതിന് ഇത് ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം: ഹോവറിനോടും ഫോക്കസിനോടും വ്യത്യസ്തമായി പ്രതികരിക്കുന്ന ഒരു ഡാർക്ക് മോഡ് ബട്ടൺ

            <button class="p-2 rounded-full text-gray-400 
             dark:text-gray-500 
             hover:text-gray-600 dark:hover:text-gray-300 
             focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 
             dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400
             dark:hover:focus:ring-gray-200">
  <!-- Icon here -->
</button>
            

              
                Copy
              
            
          

ഇവിടെ, dark:hover:focus:ring-gray-200 എന്നത് ഡാർക്ക് മോഡ് സജീവമായിരിക്കുമ്പോഴും, ബട്ടൺ ഹോവർ ചെയ്യുമ്പോഴും, *കൂടാതെ* അതിന് ഫോക്കസ് ഉള്ളപ്പോഴും മാത്രം ഒരു പ്രത്യേക റിംഗ് നിറം പ്രയോഗിക്കുന്നു. സ്റ്റേറ്റ് വേരിയൻ്റുകളുടെ ക്രമം സാധാരണയായി പ്രശ്നമല്ല, കാരണം ടെയിൽവിൻഡ് സംയോജനത്തിനായി ശരിയായ സിഎസ്എസ് സെലക്ടർ ഉണ്ടാക്കുന്നു.

കസ്റ്റമൈസേഷനും ഒറ്റത്തവണ ഉപയോഗങ്ങളും

ടെയിൽവിൻഡ് ഡിഫോൾട്ടായി ഒരു സമഗ്രമായ വേരിയൻ്റുകൾ നൽകുന്നുണ്ടെങ്കിലും, ചിലപ്പോൾ നിങ്ങൾക്ക് കൂടുതൽ നിയന്ത്രണം ആവശ്യമായി വന്നേക്കാം.

ആർബിട്രറി വേരിയൻ്റുകൾ ഉപയോഗിക്കുന്നു

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

ഉദാഹരണം: ലിസ്റ്റ് ഐറ്റംസ് വ്യത്യസ്തമായി സ്റ്റൈൽ ചെയ്യുന്നു

            <ul>
  <li class="[&:nth-child(odd)]:bg-gray-100 p-2">First item</li>
  <li class="[&:nth-child(odd)]:bg-gray-100 p-2">Second item</li>
  <li class="[&:nth-child(odd)]:bg-gray-100 p-2">Third item</li>
</ul>
            

              
                Copy
              
            
          

[&:nth-child(odd)]:bg-gray-100 എന്ന ക്ലാസ് li:nth-child(odd)-നായി സിഎസ്എസ് ഉണ്ടാക്കുന്നു, ഇത് ഓരോ ഐറ്റത്തിനും അധിക ക്ലാസുകൾ ചേർക്കാതെ തന്നെ ഒരു വരകളുള്ള ലിസ്റ്റ് ഉണ്ടാക്കുന്നു.

നേരിട്ടുള്ള ഡിസൻഡൻ്റ് സ്റ്റൈലിംഗാണ് മറ്റൊരു സാധാരണ ഉപയോഗം:

            <div class="[&_>_p]:mt-4">
  <p>First paragraph.</p>
  <p>Second paragraph. This will have a top margin.</p>
  <div><p>Nested paragraph. This will NOT have a top margin.</p></div>
</div>
            

              
                Copy
              
            
          

[&_>_p]:mt-4 എന്ന ക്ലാസ് ഡിവിൻ്റെ നേരിട്ടുള്ള `p` ചിൽഡ്രനെ മാത്രം സ്റ്റൈൽ ചെയ്യുന്നു.

`tailwind.config.js`-ൽ വേരിയൻ്റുകൾ കോൺഫിഗർ ചെയ്യുന്നു

ഡിഫോൾട്ടായി, ടെയിൽവിൻഡിൻ്റെ JIT എഞ്ചിൻ എല്ലാ കോർ പ്ലഗിനുകൾക്കുമായി എല്ലാ വേരിയൻ്റുകളും പ്രവർത്തനക്ഷമമാക്കുന്നു. എന്നിരുന്നാലും, നിങ്ങൾക്ക് മൂന്നാം കക്ഷി പ്ലഗിനുകൾക്കായി വേരിയൻ്റുകൾ പ്രവർത്തനക്ഷമമാക്കണമെങ്കിൽ അല്ലെങ്കിൽ ഒരു കസ്റ്റം വേരിയൻ്റ് രജിസ്റ്റർ ചെയ്യണമെങ്കിൽ, നിങ്ങളുടെ `tailwind.config.js` ഫയൽ ഉപയോഗിക്കേണ്ടതുണ്ട്.

            // tailwind.config.js
module.exports = {
  // ...
  plugins: [
    function({ addVariant }) {
      addVariant('child', '& > *');
      addVariant('child-hover', '& > *:hover');
    }
  ],
}

            

              
                Copy
              
            
          

ഈ കസ്റ്റം പ്ലഗിൻ പുതിയ `child`, `child-hover` വേരിയൻ്റുകൾ ചേർക്കുന്നു, ഇത് നിങ്ങൾക്ക് ഒരു എലമെൻ്റിൻ്റെ എല്ലാ നേരിട്ടുള്ള ചിൽഡ്രനെയും സ്റ്റൈൽ ചെയ്യാൻ child:text-red-500 പോലെ ഉപയോഗിക്കാം.

ഉപസംഹാരം: സ്റ്റേറ്റ്-ഡ്രിവൺ യുഐ-യുടെ ശക്തി

ടെയിൽവിൻഡ് സിഎസ്എസ് വേരിയൻ്റുകൾ ഒരു സൗകര്യം എന്നതിലുപരി, യൂട്ടിലിറ്റി-ഫസ്റ്റ് തത്വശാസ്ത്രത്തിൻ്റെ ഒരു അടിസ്ഥാന ഭാഗമാണ്. ഒരു എലമെൻ്റിൻ്റെ എല്ലാ സാധ്യതയുള്ള അവസ്ഥകളിലുമുള്ള രൂപം എച്ച്ടിഎംഎൽ-ൽ നേരിട്ട് വിവരിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നതിലൂടെ, സങ്കീർണ്ണവും, ശക്തവും, എളുപ്പത്തിൽ പരിപാലിക്കാവുന്നതുമായ യൂസർ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കാൻ വേരിയൻ്റുകൾ നിങ്ങളെ സഹായിക്കുന്നു.

ലളിതമായ hover ഇഫക്റ്റുകൾ മുതൽ peer-checked ഉപയോഗിച്ച് നിർമ്മിച്ച സങ്കീർണ്ണമായ ഫോം കൺട്രോളുകളും റെസ്പോൺസീവ്, മൾട്ടി-സ്റ്റേറ്റ് കോമ്പിനേഷനുകളും വരെ, നിങ്ങളുടെ ഡിസൈനുകൾക്ക് ജീവൻ നൽകുന്നതിനുള്ള ഒരു സമഗ്രമായ ടൂൾകിറ്റ് ഇപ്പോൾ നിങ്ങളുടെ പക്കലുണ്ട്. ഘടന, സ്റ്റൈൽ, സ്റ്റേറ്റ് എന്നിങ്ങനെ എല്ലാ ലോജിക്കും ഒരിടത്ത് ഉൾക്കൊള്ളുന്ന ഒരു കമ്പോണൻ്റ്-അധിഷ്ഠിത ചിന്താഗതിയെ അവ പ്രോത്സാഹിപ്പിക്കുന്നു.

നമ്മൾ അടിസ്ഥാനകാര്യങ്ങൾ ചർച്ച ചെയ്യുകയും വികസിത സാങ്കേതിക വിദ്യകൾ പര്യവേക്ഷണം ചെയ്യുകയും ചെയ്തു, പക്ഷേ യാത്ര ഇവിടെ അവസാനിക്കുന്നില്ല. വേരിയൻ്റുകളിൽ പ്രാവീണ്യം നേടാനുള്ള ഏറ്റവും നല്ല മാർഗം അവ ഉപയോഗിക്കുക എന്നതാണ്. അവയെ സംയോജിപ്പിച്ച് പരീക്ഷിക്കുക, ഔദ്യോഗിക ടെയിൽവിൻഡ് സിഎസ്എസ് ഡോക്യുമെൻ്റേഷനിലെ പൂർണ്ണമായ ലിസ്റ്റ് പര്യവേക്ഷണം ചെയ്യുക, കസ്റ്റം സിഎസ്എസ് അല്ലെങ്കിൽ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കാതെ ഇൻ്ററാക്ടീവ് കമ്പോണൻ്റുകൾ നിർമ്മിക്കാൻ സ്വയം വെല്ലുവിളിക്കുക. സ്റ്റേറ്റ്-ഡ്രിവൺ സ്റ്റൈലിംഗിൻ്റെ ശക്തി ഉൾക്കൊള്ളുന്നതിലൂടെ, ആഗോള പ്രേക്ഷകർക്കായി വേഗതയേറിയതും, സ്ഥിരതയുള്ളതും, കൂടുതൽ ആസ്വാദ്യകരവുമായ ഉപയോക്തൃ അനുഭവങ്ങൾ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് കഴിയും.