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

எனது full-stack பயணத்தில் நான் 45-வது நாளைக் கடந்துள்ளேன்.

நேற்று, static HTML பக்கங்களுக்கான Express routing பற்றி கற்றேன். இன்று Tailwind CSS-இல் கவனம் செலுத்தினேன்.

பெரிய CSS கோப்புகளைப் பயன்படுத்துவதைத் தவிர்த்துவிட்டேன். இப்போது நான் utility-first workflow-ஐப் பயன்படுத்துகிறேன். இது வடிவமைப்புப் பணிகளை (design work) வேகமாக்குகிறது.

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

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

  • CDN-க்கு பதிலாக npm packages மூலம் Tailwind-ஐ நிறுவினேன்.
  • npm install -D tailwindcss மூலம் compiler core-ஐ நிறுவினேன்.
  • npx tailwindcss init மூலம் configuration-ஐ அமைத்தேன்.

Tailwind எவ்வாறு கோப்பின் அளவைக் (file size) குறைக்கிறது என்பதையும் நான் கற்றேன். இது பயன்படுத்தப்படாத ஸ்டைல்களை நீக்க 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