Tailwind CSS দিয়ে ছোট্ট একটি কম্পোনেন্ট

খুব ছোট একটি কম্পোনেন্ট। সিম্পল লগিন পেজ। যা Vanilla CSS দিয়ে করতে অনেক খাটুনির দরকার হত। Bootstrap দিয়ে করা যেত। কিন্তু এই ছোট্ট একটু কাজের জন্য পুরো Bootstrap লাইব্রেরীকে লোড করতে হত। যা মশা মারতে কামান দাগার মত অবস্থা। কারন এখানে অল্প কয়েকটি ক্লাস ব্যবহার করতে হইছে। বুটস্ট্র্যাপের লাইব্রেরীতে অসংখ্য কম্পোনেন্ট ডিজাইন করা আছে। লোড করলে সবগুলোই একসাথে লোড হয়।

অপরদিকে, Tailwind CSS দিয়ে মাত্র ৫ মিনিটে এরকম একটি লগিন পেজ ডিজাইন করা সম্ভব। Tailwind এর বড় সুবিধাগুলো মধ্যে একটি হল, পুরো লাইব্রেরী লোড হয়না। আমরা যদি Vite (ভিট) বা এর মত কোন একটি বিল্ড সিস্টেম ব্যবহার করি তাহলে শুধু সেই ক্লাস গুলো নিয়ে একটি CSS File বিল্ড করবে যেগুলো HTML এর মধ্যে ইউজ করা হইছে। ফলে CSS Chunk ফাইলের ওয়েট অনেক কমে যাবে। পারফর্ম্যান্স বাড়বে।

কোডপেন লিঙ্কঃ https://codepen.io/ProfileOfMehedi/pen/bGObbpK