MERN Stack سیکھنے کا 45واں دن

میں اپنے فل اسٹیک (full-stack) سفر کے 45ویں دن پر ہوں۔

کل میں نے اسٹیٹک (static) HTML صفحات کے لیے Express routing سیکھی۔ آج میری توجہ Tailwind CSS پر تھی۔

میں نے بڑی CSS فائلوں کا استعمال چھوڑ دیا ہے۔ اب میں utility-first ورک فلو استعمال کرتا ہوں۔ اس سے ڈیزائن کا کام تیز ہو جاتا ہے۔

Tailwind آپ کو utility classes فراہم کرتا ہے۔ آپ ان کلاسز کو براہ راست اپنے HTML میں کسٹم لے آؤٹس (custom layouts) بنانے کے لیے استعمال کرتے ہیں۔

میرا تکنیکی طریقہ کار یہ ہے:

  • میں نے CDN کے بجائے npm packages کے ذریعے 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