𝗠𝗲𝗿𝗻 𝗦𝘁𝗮𝗰𝗸 𝘀𝗵𝗶𝗸𝗮𝗻𝘆𝗮𝗰𝗵𝗮 𝗱𝗶𝘃𝗮𝘀 𝟰𝟱
मी माझ्या फुल-स्टॅक प्रवासाच्या ४५ व्या दिवशी आहे.
काल मी स्टॅटिक HTML पेजेससाठी Express routing शिकलो. आज मी Tailwind CSS वर लक्ष केंद्रित केले.
मी मोठ्या CSS फाइल्सचा वापर करणे सोडून दिले आहे. आता मी utility-first workflow वापरतो. यामुळे डिझाइनचे काम अधिक वेगाने होते.
Tailwind तुम्हाला utility 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