MERN Stack പഠിക്കുന്നതിന്റെ 45-ാം ദിവസം
എന്റെ ഫുൾ-സ്റ്റാക്ക് യാത്രയുടെ 45-ാം ദിവസത്തിലാണ് ഞാൻ.
ഇന്നലെ ഞാൻ സ്റ്റാറ്റിക് HTML പേജുകൾക്കായുള്ള Express routing പഠിച്ചു. ഇന്ന് ഞാൻ Tailwind CSS-ൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചു.
വലിയ CSS ഫയലുകൾ ഉപയോഗിക്കുന്ന രീതി ഞാൻ മാറ്റി. ഇപ്പോൾ ഞാൻ ഒരു utility-first workflow ആണ് ഉപയോഗിക്കുന്നത്. ഇത് ഡിസൈൻ ജോലികൾ വേഗത്തിലാക്കുന്നു.
Tailwind നിങ്ങൾക്ക് utility classes നൽകുന്നു. നിങ്ങളുടെ HTML-ൽ നേരിട്ട് കസ്റ്റം ലേഔട്ടുകൾ നിർമ്മിക്കാൻ ഈ ക്ലാസുകൾ ഉപയോഗിക്കാം.
എന്റെ സാങ്കേതിക രീതി താഴെ പറയുന്നവയാണ്:
- ഒരു CDN-ന് പകരം npm പാക്കേജുകൾ ഉപയോഗിച്ച് ഞാൻ Tailwind ഇൻസ്റ്റാൾ ചെയ്തു.
npm install -D tailwindcssഉപയോഗിച്ച് ഞാൻ compiler core ഇൻസ്റ്റാൾ ചെയ്തു.npx tailwindcss initഉപയോഗിച്ച് ഞാൻ കോൺഫിഗറേഷൻ സെറ്റ് ചെയ്തു.
Tailwind എങ്ങനെയാണ് ഫയൽ സൈസ് കുറയ്ക്കുന്നത് എന്നും ഞാൻ പഠിച്ചു. ഉപയോഗിക്കാത്ത സ്റ്റൈലുകൾ നീക്കം ചെയ്യാൻ ഇത് tree-shaking ഉപയോഗിക്കുന്നു.
എന്റെ HTML, JS ഫയലുകൾ സ്കാൻ ചെയ്യുന്നതിനായി ഞാൻ tailwind.config.js-ൽ content path കോൺഫിഗർ ചെയ്തു:
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
ഈ സെറ്റപ്പ് എന്റെ ഫൈനൽ CSS ഫയൽ ചെറുതും വേഗതയുള്ളതുമാണെന്ന് ഉറപ്പാക്കുന്നു.
ഉറവിടം: https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3