𝗗𝗮𝘆 𝟰𝟱 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

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

मैं अपनी फुल-स्टैक यात्रा के 45वें दिन पर हूँ।

कल मैंने स्टैटिक HTML पेजों के लिए Express routing सीखी। आज मैंने Tailwind CSS पर ध्यान केंद्रित किया।

मैंने बड़ी CSS फाइलों का उपयोग करना छोड़ दिया है। अब मैं utility-first वर्कफ़्लो का उपयोग करता हूँ। इससे डिज़ाइन का काम तेज़ हो जाता है।

Tailwind आपको utility classes देता है। आप इन classes का उपयोग सीधे अपने HTML में कस्टम लेआउट बनाने के लिए करते हैं।

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

• मैंने CDN के बजाय npm packages का उपयोग करके Tailwind इंस्टॉल किया।
• मैंने npm install -D tailwindcss के साथ कंपाइलर कोर इंस्टॉल किया।
• मैंने 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