MERN Stack सीखने का 45वाँ दिन

फुल-स्टैक इंजीनियर बनने की मेरी यात्रा को 45 दिन हो चुके हैं।

कल, मैंने Express routing के साथ static HTML पेजों को सर्व करना सीखा। आज, मैंने Tailwind CLI का उपयोग करके Tailwind CSS में महारत हासिल की।

मैं बड़ी CSS फाइलों से दूर जा रहा हूँ। मैं लेआउट को तेज़ी से बनाने के लिए utility-first वर्कफ़्लो की ओर बढ़ रहा हूँ।

Tailwind पहले से बने हुए (pre-made) components प्रदान नहीं करता है। यह छोटी utility classes प्रदान करता है। ये classes आपको सीधे अपने HTML में कस्टम डिज़ाइन बनाने की अनुमति देती हैं।

मेरी तकनीकी प्रक्रिया यहाँ दी गई है:

  • मैंने CDN लिंक का उपयोग करने के बजाय npm का उपयोग करके Tailwind इंस्टॉल किया।
  • मैंने npm install -D tailwindcss के साथ compiler core इंस्टॉल किया।
  • मैंने npx tailwindcss init के साथ configuration को initialize किया।

मैंने यह भी सीखा कि Tailwind tree-shaking के माध्यम से फ़ाइल का आकार कैसे कम करता है। यह प्रक्रिया अप्रयुक्त (unused) styles को हटा देती है। मैंने अपने content paths को कॉन्फ़िगर किया ताकि compiler मेरे static folders को स्कैन कर सके।

मेरा 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