MERN Stack শেখার ৪৫তম দিন
ফুল-স্ট্যাক ইঞ্জিনিয়ার হওয়ার যাত্রায় আমি ৪৫ দিন পার করেছি।
গতকাল আমি Express routing ব্যবহার করে static HTML পেজ সার্ভ করা শিখেছি। আজ আমি Tailwind CLI ব্যবহার করে Tailwind CSS-এ দক্ষতা অর্জন করেছি।
আমি বড় বড় CSS ফাইল ব্যবহার করা থেকে সরে আসছি। লেআউট দ্রুত তৈরি করার জন্য আমি একটি utility-first workflow-এ পরিবর্তন আনছি।
Tailwind কোনো তৈরি করা (pre-made) কম্পোনেন্ট প্রদান করে না। এটি ছোট ছোট utility classes প্রদান করে। এই ক্লাসগুলো আপনাকে সরাসরি আপনার HTML-এ কাস্টম ডিজাইন তৈরি করতে সাহায্য করে।
আমার টেকনিক্যাল প্রক্রিয়াটি নিচে দেওয়া হলো:
- আমি CDN লিঙ্ক ব্যবহার করার পরিবর্তে npm ব্যবহার করে Tailwind ইনস্টল করেছি।
- আমি
npm install -D tailwindcssদিয়ে কম্পাইলার কোর ইনস্টল করেছি। - আমি
npx tailwindcss initদিয়ে কনফিগারেশনটি ইনিশিয়ালাইজ করেছি।
আমি আরও শিখেছি কীভাবে Tailwind tree-shaking-এর মাধ্যমে ফাইলের সাইজ কমিয়ে আনে। এই প্রক্রিয়াটি অব্যবহৃত স্টাইলগুলো সরিয়ে ফেলে। আমি আমার content paths কনফিগার করেছি যাতে কম্পাইলার আমার static ফোল্ডারগুলো স্ক্যান করতে পারে।
আমার 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