MERN Stack শেখার ৪৫তম দিন
আমি আমার ফুল-স্ট্যাক যাত্রার ৪৫তম দিনে আছি।
গতকাল আমি স্ট্যাটিক HTML পেজের জন্য Express routing শিখেছি। আজ আমি Tailwind CSS-এর ওপর গুরুত্ব দিয়েছি।
আমি বড় বড় CSS ফাইল ব্যবহার করা থেকে সরে এসেছি। এখন আমি একটি utility-first workflow ব্যবহার করি। এটি ডিজাইন করার কাজকে আরও দ্রুত করে তোলে।
Tailwind আপনাকে utility classes প্রদান করে। আপনি সরাসরি আপনার HTML-এ কাস্টম লেআউট তৈরির জন্য এই ক্লাসগুলো ব্যবহার করতে পারেন।
আমার টেকনিক্যাল প্রসেসটি নিচে দেওয়া হলো:
- আমি CDN-এর পরিবর্তে npm প্যাকেজ ব্যবহার করে 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