ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്

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

മറ്റ് പരമ്പരാഗത സിസ്റ്റങ്ങളിൽ, ഒരു ക്ലാസ് മെസേജ്-വാർണിംഗ് ഉണ്ടായിരിക്കും, അത് ഒരു മഞ്ഞ പശ്ചാത്തല നിറവും ബോൾഡ് ടെക്സ്റ്റും പ്രയോഗിക്കും. ടെയിൽവിൻഡിൽ ഇതേ ഫലം ലഭിക്കാൻ, ലൈബ്രറി സൃഷ്ടിച്ച ഒരു കൂട്ടം ക്ലാസുകൾ പ്രയോഗിക്കേണ്ടതുണ്ട്: `bg-yellow-300` ഉം `font-bold` ഉം. `bg-yellow-300` എന്നത് മഞ്ഞ നിറത്തിലുള്ള പശ്ചാത്തലം നൽകുന്നു, അതേസമയം `font-bold` ടെക്സ്റ്റിനെ ബോൾഡ് ആക്കുന്നു.

2024 ആഗസ്റ്റ് 5-നു ടെയിൽവിൻഡിന് ഗിറ്റ്ഹബ്ബിൽ 81,000-ൽ അധികം സ്റ്റാർസ് ഉണ്ട്.
ഫീച്ചറുകൾ
ടെയിൽവിൻ സിഎസ്എസ് ഒരു യുട്ടിലിറ്റി-ഫസ്റ്റ് സിഎസ്എസ് (utility-first CSS) ഫ്രെയിംവർക്കാണ്("യുട്ടിലിറ്റി-ഫസ്റ്റ് സിഎസ്എസ്" എന്നത്, സിഎസ്എസ് ക്ലാസുകൾ ഉപയോഗിച്ച് ചെറിയ, പുനരുപയോഗിക്കാവുന്ന സ്റ്റൈലുകൾ നിർമ്മിക്കുന്ന തത്വമാണ്. ഇതിൽ ഓരോ സിഎസ്എസ് ക്ലാസും ഒരു പ്രത്യേക സ്റ്റൈൽ മാത്രമേ നൽകൂ, ഉദാഹരണത്തിന്, `text-center`, `bg-blue-500`, `p-4` പോലുള്ള ക്ലാസുകൾ. ഇത് ഉപയോഗിച്ച്, നമുക്ക് ഏത് ഘടകത്തിനു വേണ്ടിയും ആവശ്യമായ സ്റ്റൈലുകൾ ചേർക്കാൻ കഴിയും, ഇത് കൂടുതൽ കസ്റ്റമൈസബിളും, ഫ്ലെക്‌സിബിളുമായ വെബ്സൈറ്റ് ഡിസൈനുകൾ ഉണ്ടാക്കാൻ സഹായിക്കുന്നു), അതായത് ഓരോ സ്റ്റൈലും ചെറിയ ക്ലാസുകൾ ആയി ആയിരിക്കും. ഇത് അനുസരിച്ച്, നിങ്ങൾക്ക് ഓരോ ഘടകത്തിനും അനുസരിച്ച് പ്രത്യേകമായി ക്ലാസുകൾ ചേർത്ത് സെറ്റിംഗ് ചെയ്യാം. ഇതിന്റെ പ്രധാന ലക്ഷ്യം നിങ്ങൾക്ക് കൂടുതൽ ഫ്ലെക്‌സിബിളായും, കസ്റ്റമൈസുചെയ്യാവുന്ന ഡിസൈൻ സൃഷ്‌ടിക്കാൻ സഹായിക്കുക എന്നതാണ്.

താഴെ ഒരു കോഡിംഗ് ഉദാഹരണം നൽകുന്നു:
<!DOCTYPE html>
<html lang="ml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utility-First CSS Example</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">

    <div class="max-w-sm mx-auto my-10 p-6 bg-white shadow-lg rounded-lg">
        <h1 class="text-2xl font-bold text-center text-gray-800">സ്വാഗതം!</h1>
        <p class="text-center text-gray-600 mt-4">ഇത് ഒരു **Utility-First CSS** ഉദാഹരണം ആണ്.</p>

        <button class="mt-6 w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-700">
            ക്ലിക്കുചെയ്യുക
        </button>
    </div>

</body>
</html>
ഈ കോഡിന്റെ വിശദീകരണം
 bg-gray-100, text-2xl, text-center തുടങ്ങിയ ക്ലാസുകൾ ഉപയോഗിച്ച് പശ്ചാത്തലം, ഫോണ്ട് വലിപ്പം, തത്സമയം ടെക്സ്റ്റ് സെന്റർ ചെയ്യുക മുതലായവ ഉൾപ്പെടുന്നു.
 p-6, my-10, shadow-lg, rounded-lg എന്നിവ ഉപയോഗിച്ച് പാഡിംഗ്, മാർജിൻ, ഷാഡോ, ബോർഡർ-റേഡിയസ് (border-radius) എന്നിവ കസ്റ്റമൈസ് ചെയ്തിരിക്കുന്നു.
 ബട്ടണിന്റെ നിറം, ഹോവറിംഗ്, പാഡിംഗ് ആക്വറസി എന്നിവ യുട്ടിലിറ്റി-ഫസ്റ്റ് സിഎസ്എസ് വഴി എളുപ്പത്തിൽ ക്രമീകരിച്ചിരിക്കുന്നു.
ഈ കോഡ് നിങ്ങളുടെ എച്ച്ടിഎംഎൽ പേജിൽ ടെയിൽവിൻഡ് സിഎസ്എസ് ഉപയോഗിച്ച് ഒരു സിമ്പിൾ ഡിസൈൻ സൃഷ്‌ടിക്കാൻ സഹായിക്കും.
യൂട്ടിലിറ്റി ക്ലാസുകൾ
യൂട്ടിലിറ്റി-ഫസ്റ്റ് എന്നത് ടെയിൽവിൻഡ് സിഎസ്എസിൽ ഉപയോഗിക്കുന്ന ഒരു രീതി ആണ്, അതിൽ ഓരോ സ്റ്റൈലിനും പ്രത്യേക ക്ലാസുകൾ ഉണ്ടാകും. ഇതിലൂടെ, ഓരോ ഭാഗവും എളുപ്പത്തിൽ സജ്ജമാക്കാം, ഒരു പ്രത്യേക സിഎസ്എസ് കോഡ് എഴുതേണ്ട ആവശ്യം ഇല്ല. ഇതു കൊണ്ട് ഡിസൈൻ ചെയ്യൽ വേഗത്തിലും എളുപ്പത്തിലും ചെയ്യാൻ സാധിക്കുന്നു. സാധാരണയായി, ഒരു ബട്ടൺ, പാനൽ, മെനു, ടെക്സ്റ്റ് ബോക്സ് പോലുള്ള കംപോണന്റുകൾക്ക് ക്ലാസുകൾ സൃഷ്‌ടിച്ച് അവയ്‌ക്കായി സ്റ്റൈലുകൾ നൽകാറാണ് ഉള്ളത്. എന്നാൽ, ടെയിൽവിൻഡിൽ സ്റ്റൈലുകൾക്ക് പ്രത്യേക ക്ലാസുകൾ ഉണ്ടാക്കുന്നു, ഉദാഹരണത്തിന് പച്ച നിറം, ശക്തമായ ഫോണ്ട്, വലിയ അക്ഷരങ്ങൾ, സെന്റർ ചെയ്യൽ തുടങ്ങിയവ. ഈ ക്ലാസുകൾ യൂട്ടിലിറ്റി ക്ലാസുകൾ എന്ന് അറിയപ്പെടുന്നു.

ടെയിൽവിൻഡ് സിഎസ്എസിൽ നിരവധി യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉണ്ട്, ഇത് പല സിഎസ്എസ് പ്രോപ്പർട്ടികളും നിയന്ത്രിക്കാൻ സാധിക്കുന്നു. ഉദാഹരണത്തിന്, നിറങ്ങൾ, ബോർഡർ, ഡിസ്‌പ്ലേ ടൈപ്പ്, ഫോണ്ട് സൈസ്, ഫോണ്ട്, ലേഔട്ട്, ഷാഡോ തുടങ്ങിയവ. ഈ ക്ലാസുകൾ ഉപയോഗിച്ച് ഏത് കംപോണന്റിലും സൃഷ്‌ടിച്ച സ്റ്റൈലുകൾ എളുപ്പത്തിൽ നിയന്ത്രിക്കാം.
+ഉദാഹരണം: യെല്ലോ നോട്ടീസ്റിസൾട്ട്500x500px|Example Tailwind yellow warning.pngകോഡ്<div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg">
  <p>Please be careful when feeding the birds.</p>
</div>ക്ലാസ്സസ്ടെയിൽവിൻഡ്സിഎസ്എസിന് തുല്ല്യമായത്margin: 1rem;padding: 1rem;background-color: rgb(254 240 138);font-weight: 700;border-radius: 0.5rem;
വകഭേദങ്ങൾ
ടെയിൽവിൻഡ് വിവിധ സ്‌ക്രീൻ വലുപ്പങ്ങൾക്ക് അനുസരിച്ച് റെസ്പോൺസിവ് ഇന്റർഫേസ് രൂപകൽപന ചെയ്യുന്നതിനായി മീഡിയ ക്വറിയിലൂടെ ചില അവസ്ഥകളിൽ മാത്രം യൂറ്റിലിറ്റി ക്ലാസ് പ്രയോഗിക്കാനുള്ള സൗകര്യം നൽകുന്നു. ഇത് വേരിയന്റുകളായി അറിയപ്പെടുന്നു. ചെറിയ സ്ക്രീനുകൾ, ഇടത്തരം സ്ക്രീനുകൾ, വലിയ സ്ക്രീനുകൾ എന്നിവയ്ക്കായി വ്യത്യസ്ത ഡിസ്‌പ്ലേ ക്രമങ്ങൾ സൃഷ്‌ടിക്കാൻ ഈ വേരിയന്റുകൾ സഹായിക്കുന്നു. ടെയിൽവിൻഡിൽ ഒരു എലമെന്റിന്റെ വ്യത്യസ്ത നിലകളിൽ വേണ്ടിടങ്ങളിൽ പ്രയോഗിക്കാൻ കഴിയുന്നവയും ഈ വേരിയന്റുകളിൽ ഉണ്ട്, ഉദാഹരണത്തിന്, hover: (ഹോവർ ചെയ്താൽ), focus: (കീബോർഡ് തിരഞ്ഞെടുക്കുമ്പോൾ), active: (ഉപയോഗത്തിലായിരിക്കുമ്പോൾ), അല്ലെങ്കിൽ ബ്രൗസർ അല്ലെങ്കിൽ ഓപ്പറേറ്റിംഗ് സിസ്റ്റം ഡാർക്ക് മോഡ് ഉപയോഗിക്കുമ്പോൾ. ടെയിൽവിൻഡ് വേരിയന്റുകൾ, എലമെന്റിന്റെ വ്യത്യസ്ത നിലകളിൽ (ഹോവർ, ഫോക്കസ്, ആക്ടീവ്, ഡാർക്ക് മോഡ്) സ്റ്റൈലുകൾ മാറ്റാൻ സഹായിക്കുന്നു.

വേരിയന്റ്സ് (Variants) എന്നത് രണ്ട് ഭാഗങ്ങളായി തിരിച്ചിരിക്കും: ഒരു നിബന്ധനയും, ആ നിബന്ധന പാലിച്ചാൽ ഉപയോഗിക്കുന്ന ക്ലാസ്സും. ഉദാഹരണത്തിന്, "md:bg-yellow-400" എന്നത്, സ്ക്രീൻ വലുപ്പം "md" (മിഡിയം) ന് ശരാശരി ആയിരിക്കുകയാണെങ്കിൽ "bg-yellow-400" എന്ന ക്ലാസ് പ്രയോഗിക്കും. ഇത്, വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾ അനുസരിച്ച് ഡിസൈൻ മാറാനുള്ള മാർഗമാണ്. "md" എന്നത്, "m" അഥവാ മിഡിയം സ്ക്രീൻ സൈസിനെ പറ്റി പറയുന്നു. ഈ രീതിയിൽ, വേരിയന്റുകൾ വെബ് സൈറ്റ് റെസ്പോൺസീവ് ആക്കാൻ സഹായിക്കുന്നു("റെസ്പോൺസീവ്" എന്നത് ഒരു വെബ് ഡിസൈൻ സങ്കല്പമാണ്, അതിന്റെ ആശയം വെബ് പേജുകൾ വിവിധ ഡിവൈസുകളിൽ (നോട്ട്ബുക്ക് കമ്പ്യൂട്ടറുകൾ, ടാബ്ലറ്റുകൾ, ഡെസ്ക്ടോപ്പുകൾ) മികച്ച രീതിയിൽ കാണപ്പെടുകയും പ്രവർത്തിക്കുകയും ചെയ്യുന്നതാണ്. റെസ്പോൺസീവ് ഡിസൈൻ ഉപയോഗിച്ച്, വെബ് പേജ് അല്ലെങ്കിൽ ആപ്പ് ഓട്ടോമാറ്റിക്കായി ഡിവൈസ് സ്ക്രീൻ സൈസ് അനുസരിച്ച് ക്രമീകരിക്കപ്പെടുന്നു. ഇത് ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്താൻ സഹായിക്കുന്നു, കാരണം സ്ക്രീൻ സൈസ് അനുസരിച്ച് പേജ് ഉള്ളടക്കം എളുപ്പത്തിൽ വായിക്കാൻ, നാവിഗേറ്റ് ചെയ്യാൻ സാധിക്കുന്നു).

ടെയിൽവിൻഡ് സിഎസ്എസ് ഒരു സ്റ്റൈൽ ഫ്രെയിംവർക്കാണ്, ഇത് ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് വികസിപ്പിച്ചിരിക്കുന്നു. ഇത് നോഡ്.ജെഎസ് വഴി പ്രവർത്തിക്കുന്നു. ഇൻസ്റ്റാൾ ചെയ്യാൻ എൻപിഎം(npm) അല്ലെങ്കിൽ യാർൺ(yarn) പോലുള്ള പാക്കേജ് മാനേജർ ഉപയോഗിക്കുന്നു.
ക്രമീകരണങ്ങളും തീമുകളും
ടെയിൽവിൻഡ് സിഎസ്എസിലെ യുട്ടിലിറ്റി ക്ലാസുകളും വേരിയന്റുകളും കോൺഫിഗറേഷൻ ഫയലായ tailwind.config.js വഴി ക്രമീകരിക്കാനാകും. ഈ ഫയലിൽ, കളർ-പാലറ്റ് (color-palette) പോലുള്ള യുട്ടിലിറ്റി ക്ലാസുകളുടെ മൂല്യങ്ങൾ ക്രമീകരിക്കാം. "മാർജിൻ" എന്നത്, ഇലമെന്റുകൾ തമ്മിലുള്ള സ്പേസ് ക്രമീകരിക്കുന്നതിന് ഉപയോഗിക്കുന്നതാണ്.
ബിൽഡ് ഓൾ ആൻഡ് പർജ്
ടെയിൽവിൻഡിന്റെ ഡിഫോൾട്ട് മോഡ് പ്രോജക്റ്റിന്റെ സെറ്റിംഗ്സിന്റെ അടിസ്ഥാനത്തിൽ എല്ലാ സാധ്യതയുള്ള സിഎസ്എസ് കോമ്പിനേഷനുകളും സിസ്റ്റം ജനറേറ്റ് ചെയ്യുന്നതാണ്. തുടർന്ന്, പർജ്സിഎസ്എസ്(PurgeCSS) പോലുള്ള ഒരു മറ്റൊരു യുട്ടിലിറ്റിയുടെ സഹായത്തോടെ, എല്ലാ ഫയലുകളും പരിശോധിച്ച് ഉപയോഗിക്കുന്നില്ലാത്ത ക്ലാസുകൾ സിഎസ്എസ് ഫയലിൽ നിന്നും നീക്കം ചെയ്യുന്നു.

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

ജസ്റ്റ്-ഇൻ-ടൈം മോഡ്
ജിറ്റ് (JIT) മോഡ് (Just-In-Time) സിഎസ്എസ് സൃഷ്ടിക്കുന്നതിന് ഒരു പുതിയ രീതി ആണ്. ഇതിൽ, സാദ്ധ്യമായ എല്ലാ ക്ലാസുകളും സൃഷ്ടിച്ച് പിന്നീട് അവ ഒഴിവാക്കുന്നതിന് പകരം, എച്ച്ടിഎംഎൽ ഫയലുകൾ അല്ലെങ്കിൽ മറ്റ് നിർദ്ദിഷ്ട സ്ഥലങ്ങളിൽ ഉള്ളടക്കം പരിശോധിച്ച്, അത്യാവശ്യം വേണ്ട ഉള്ള ക്ലാസുകൾ മാത്രം ഉടനെ സൃഷ്ടിക്കുന്നു. ഇതിന്റെ ഫലമായി, സിഎസ്എസ് ഫയലുകളുടെ വലിപ്പം കുറയ്ക്കുന്നു, നിർമ്മിക്കുന്നതിനുള്ള സമയം കുറയുകയും പ്രവർത്തനം മെച്ചപ്പെടുകയും ചെയ്യുന്നു. ജിറ്റ് മോഡ് ടെയിൽവിൻഡ് സിഎസ്എസ് 2.x പതിപ്പിൽ പ്രധാനമായ ഒരു പുതിയ ഫീച്ചർ ആയിരുന്നു.

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

ടെയിൽവിൻഡ് സിഎസ്എസ് പതിപ്പ് 3 മുതൽ, ജിറ്റ് മോഡ് ഡിഫോൾട്ട് ആയി സ്വീകരിച്ചിട്ടുണ്ട്("ഡിഫോൾട്ട്" എന്നത്, സോഫ്റ്റ്‌വെയർ ആരംഭിക്കുമ്പോൾ അതിന്റെ പ്രവർത്തനം സ്വയമേവ എങ്ങനെ നടക്കും എന്ന് കാണിക്കുന്ന സെറ്റിങ് ആണ്. ഉദാഹരണത്തിന്, ടെയിൽവിൻഡ് സിഎസ്എസ് പതിപ്പ് 3-ൽ ഗിറ്റ് മോഡ് ഡിഫോൾട്ട് ആയി ആയിരിക്കുന്നു, അതായത്, നിങ്ങൾ അതിനെ പ്രത്യേകിച്ച് ക്രമീകരിക്കാതെ, ഗിറ്റ് മോഡ് തന്നെ പ്രവർത്തിക്കുന്നതാണ്).
പതിപ്പുകൾ
ടെയിൽവിൻഡ് സിഎസ്എസ് സെമാന്റിക് വേർഷനിംഗ് ഉപയോഗിച്ച് പതിപ്പുകൾ തിരിച്ചറിയുന്നു. ഇതിൽ മേജർ (പ്രധാന മാറ്റങ്ങൾ), മൈനർ (ചെറിയ ഫീച്ചർ ചേർക്കലുകൾ), പാച്ച് (പിഴവുകൾ പരിഹരിക്കൽ) എന്നീ മൂന്ന് ഭാഗങ്ങളിലായി മാറ്റങ്ങൾ വ്യക്തമാക്കുന്നു.

അവലംബം