Tailwind CSSটেকনিক্যাল

Tailwind হল ওয়েবসাইট ডিজাইন করার একমাত্র Maintainable পথ

লারাভেলের জনক টেইলর অটওয়েল রে কে না চেনে ? তো গতপরশুদিন টেইলর এক টুইটে বলছে, Tailwind হল ওয়েবসাইট ডিজাইন করার একমাত্র Maintainable পথ। অনেকেই তার টুইটের রিপ্লাইতে দ্বিমত পোষন করেছে অনেকে একমত হয়েছে। ব্যক্তিগত ভাবে আমি Tailwind কে ওয়েবসাইট ডিজাইনের একমাত্র পথ না ভাবলেও বেস্ট পথগুলোর মধ্যে বেস্ট ভাবি। Tailwind যত শিখতেছি তত আমার এই ধারনা প্রবল হচ্ছে। যাই হোক –

Tailwind এর ডকুমেন্টেশনের Utility-first সেকশনে এর বেস্ট বেনিফিট গুলোর মধ্যে তিনটা বিনিফিট হাইলাইট করা হয়েছে।

এক. Vanilla CSS লিখতে গিয়ে সবথেকে পেইনফুল এবং এনার্জি ইনভেস্টিং টাস্ক হল ক্লাস নেম আবিষ্কার করা। আমার তো ডিজাইনের বড় একটা সময় চলে যায় শুধু কি নাম দেব এই ভেবে। মিনিংফুল ক্লাসনেম দেওয়া ডিজাইনের একটি বড় অংশ। Tailwind আপনাকে ক্লাস নেম নিয়ে চিন্তা করা থেকে চিরতরে মুক্তি দেবে। আপনি যাই করতে চান তার সাথে সামঞ্জস্য রেখে এখানে ক্লাস নেম অলরেডি ডিফাইন করাই আছে। সব থেকে মজার বিষয় হল, Tailwind এ আপনাকে একটাও ক্লাস নেম মুখস্থ রাখতে হবেনা। অধিকাংশ ক্লাস নেমগুলো লো লেভেল CSS ইউটিলিটির নামের সাথেই মিল রেখে বানানো। এর সাথে Tailwind Intellisense এর সাজেশন্স তো আছেই। Bootstrap ফ্রেমওয়ার্কেও প্রচুর ক্লাস নেম মনে রাখতে হয়।

দুই. CSS এর সাইজ বড় হয়না। যেখানে CSS লিখতেই হয়না সেখানে সাইজের তো কথাই নেই। এমনকি এক্সিস্টিং CSS কোড ও সব লোড হয়না বিল্ড সিস্টেমের কারনে। HTML এ যে ক্লাসগুলো ব্যবহার করা হইছে শুধু সেগুলো নিয়েই একটি Chunk ফাইল তৈরি হয়।

তিন. Vanilla CSS বলেন আর Bootstrap বলেন সবযায়গায় ই ডিজাইনের মাঝে যেকোন যায়গায় হঠাত চেঞ্জ করার সময় দুবার ভাবতে হয়। কারন একটা আর একটার সাথে রিলেটেড। দেখা গেল, একযায়গায় আমি একটা ক্লাস নেম চেঞ্জ করেছি, বা একটু মার্জিন প্যাডিং বাড়িয়েছি বা কমিয়েছি, অন্যযায়গায় ডিজাইন ব্রেক করেছে। Tailwind এ ডিজাইন করা প্রত্যেকটা কম্পোনেন্ট ইন্ডিপেন্ডেন্ট। কেউ কারো সাথে সম্পর্ক নেই। ফলে ডিজাইন চেঞ্জ নিয়ে অলওয়েজ আপনি সেফ ফীল করবেন।

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

Hi, I’m মেহেদী জামান

Leave a Reply