MERN Stack പഠിക്കുന്നതിന്റെ 45-ാം ദിവസം

ഒരു ഫുൾ-സ്റ്റാക്ക് എഞ്ചിനീയർ ആകാനുള്ള എന്റെ യാത്രയുടെ 45-ാം ദിവസമാണിന്ന്.

ഇന്നലെ, Express routing ഉപയോഗിച്ച് സ്റ്റാറ്റിക് HTML പേജുകൾ എങ്ങനെ സർവ് ചെയ്യാം എന്ന് ഞാൻ പഠിച്ചു. ഇന്ന്, Tailwind CLI ഉപയോഗിച്ച് Tailwind CSS പഠിച്ചു പൂർത്തിയാക്കി.

വലിയ CSS ഫയലുകളിൽ നിന്ന് ഞാൻ മാറിപ്പോകുകയാണ്. ലേഔട്ടുകൾ വേഗത്തിൽ നിർമ്മിക്കുന്നതിനായി ഞാൻ ഒരു utility-first വർക്ക്ഫ്ലോയിലേക്ക് മാറുകയാണ്.

Tailwind മുൻകൂട്ടി തയ്യാറാക്കിയ കമ്പോണന്റുകൾ (pre-made components) നൽകുന്നില്ല. പകരം, ചെറിയ യൂട്ടിലിറ്റി ക്ലാസുകളാണ് (utility classes) ഇത് നൽകുന്നത്. ഈ ക്ലാസുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ HTML-ൽ നേരിട്ട് കസ്റ്റം ഡിസൈനുകൾ നിർമ്മിക്കാൻ സാധിക്കും.

എന്റെ സാങ്കേതിക രീതി താഴെ പറയുന്നവയാണ്:

  • ഒരു CDN ലിങ്ക് ഉപയോഗിക്കുന്നതിന് പകരം npm ഉപയോഗിച്ച് ഞാൻ Tailwind ഇൻസ്റ്റാൾ ചെയ്തു.
  • npm install -D tailwindcss ഉപയോഗിച്ച് ഞാൻ കമ്പൈലർ കോർ ഇൻസ്റ്റാൾ ചെയ്തു.
  • npx tailwindcss init ഉപയോഗിച്ച് ഞാൻ കോൺഫിഗറേഷൻ ആരംഭിച്ചു.

Tree-shaking വഴി Tailwind എങ്ങനെ ഫയൽ സൈസ് കുറയ്ക്കുന്നു എന്നും ഞാൻ പഠിച്ചു. ഉപയോഗിക്കാത്ത സ്റ്റൈലുകൾ നീക്കം ചെയ്യുന്ന പ്രക്രിയയാണിത്. കമ്പൈലർ എന്റെ സ്റ്റാറ്റിക് ഫോൾഡറുകൾ സ്കാൻ ചെയ്യുന്നതിനായി ഞാൻ കണ്ടന്റ് പാത്തുകൾ (content paths) കോൺഫിഗർ ചെയ്തു.

എന്റെ tailwind.config.js സെറ്റപ്പ്:

module.exports = { content: ["./public/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }

ഈ സെറ്റപ്പ് എന്റെ ഫൈനൽ CSS ഫയൽ ചെറുതും വേഗതയുള്ളതുമാണെന്ന് ഉറപ്പാക്കുന്നു.

Source: https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3