MERN Stack கற்றலில் 45-வது நாள்

ஒரு முழு-ஸ்டாக் (full-stack) பொறியாளராக மாறுவதற்கான எனது பயணத்தில் நான் 45 நாட்களை நிறைவு செய்துள்ளேன்.

நேற்று, Express routing மூலம் static HTML பக்கங்களை வழங்குவது (serve) பற்றி கற்றேன். இன்று, Tailwind CLI பயன்படுத்தி Tailwind CSS-இல் தேர்ச்சி பெற்றேன்.

நான் பெரிய CSS கோப்புகளைத் தவிர்த்து வருகிறேன். லேஅவுட்களை (layouts) வேகமாக உருவாக்க, utility-first பணிப்பாய்விற்கு (workflow) மாறி வருகிறேன்.

Tailwind முன்கூட்டியே தயாரிக்கப்பட்ட கூறுகளை (pre-made components) வழங்குவதில்லை. இது சிறிய utility வகுப்புகளை (utility classes) வழங்குகிறது. இந்த வகுப்புகள் உங்கள் HTML-லிலேயே நேரடியாகத் தனிப்பயனாக்கப்பட்ட வடிவமைப்புகளை (custom designs) உருவாக்க அனுமதிக்கின்றன.

எனது தொழில்நுட்ப செயல்முறை இதோ:

  • நான் ஒரு CDN இணைப்பைப் பயன்படுத்துவதற்குப் பதிலாக npm மூலம் Tailwind-ஐ நிறுவினேன்.
  • npm install -D tailwindcss மூலம் compiler core-ஐ நிறுவினேன்.
  • npx tailwindcss init மூலம் உள்ளமைப்பை (configuration) தொடக்கநிலைப்படுத்தினேன்.

tree-shaking மூலம் Tailwind எவ்வாறு கோப்பு அளவைக் குறைக்கிறது என்பதையும் நான் கற்றேன். இந்த செயல்முறை பயன்படுத்தப்படாத ஸ்டைல்களை (styles) நீக்குகிறது. compiler எனது static கோப்புறைகளை (folders) ஸ்கேன் செய்யும் வகையில் எனது content பாதைகளை உள்ளமைத்தேன்.

எனது tailwind.config.js அமைப்பு:

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

இந்த அமைப்பு எனது இறுதி CSS கோப்பு சிறியதாகவும் வேகமாகவும் இருப்பதை உறுதி செய்கிறது.

ஆதாரம்: https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3