আমরা যারা ওয়েব ডিজাইন সেক্টরে আছি বা আসব বলে ভাবছি তাদের সিএসএস ফ্রেমওয়ার্ক এর শুরুটা হয়ত বুটস্ট্র্যাপ দিয়েই হয়েছে বা হবে, কারণ এটি নতুনদের জন্য শুরু করাটা খুব সহজ এবং আমাদের দেশে এর চাহিদাও অনেক। কিন্তু বেশ কয়েক বছর যাবৎ একটি সিএসএস ফ্রেমওয়ার্ক এর নাম আমরা খুবই শুনে আসছি (বলতে পারেন ট্রেন্ড) সেটি হল টেইলউইন্ড সিএসএস। আর যারা বিভিন্ন জাভাস্ক্রিপ্ট লাইব্রেরি, ফ্রেমওয়ার্ক নিয়ে কাজ করেন বা শুরু করেছেন যেমনঃ React, Vue ইত্যাদি তাদের কাছেতো টেইলউইন্ড সিএসএস নামটা খুবই পরিচিত। এমনকি বর্তমান সময়ে টেইলউইন্ড সিএসএস সবচেয়ে জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক। আজকে আমি চেষ্টা করব খুব সহজভাবে টেইলউইন্ড সিএসএস সম্পর্কে লিখতে, যেন নতুনরা খুব সহজে টেইলউইন্ড সিএসএস শুরু করতে পারেন।

সংক্ষেপে টেইলউইন্ড সিএসএসঃ

টেইলউইন্ড সিএসএস কে ইউটিলিটি ফার্স্ট সিএসএস ফ্রেমওয়ার্ক বলা হয়। এখানে আপনি ইউটিলিটি সিএসএস ক্লাস ডিরেক্ট এইচটিএমএল ফাইলে লিখে সব ধরনের ডিজাইন করতে পারবেন। টেইলউইন্ড সিএসএস ব্যবহার করলে আপনাকে এইচটিএমএল ফাইলের বাহিরে আসলে তেমন কিছু করতে হবে না। এটি অনেক fast, flexible এবং relaible। টেইলউইন্ড সিএসএস মূলত অনেক গুলো ইউটিলিটি সিএসএস ক্লাসের সমন্বয়ে তৈরি তাই ডেভেলপমেন্ট টাইমে সিএসএস ফাইল সাইজ বেশি হলেও যখন প্রোডাকশনের জন্য বিল্ড করা হয় তখন শুধু এইচটিএমএল ফাইলে ব্যবহৃত সিএসএস ক্লাস গুলোর জন্য যে স্টাইল গুলো আছে শুধুমাত্র সেই স্টাইল গুলোকে জেনারেট করে খুব ছোট একটা সিএসএস ফাইল আমাদেরকে দেয়। যেখানে কোন অপ্রয়োজনীয় অথবা ডুপ্লিকেট সিএসএস থাকে না।

টেইলউইন্ড সিএসএস কিভাবে কাজ করেঃ

টেইলউইন্ড সিএসএস মূলত যেকোনো এইচটিএমএল ফাইল, জাভাস্ক্রিপ্ট কম্পোনেন্ট অথবা যেকোন ধরনের টেম্পলেট ফাইল থেকে সিএসএস ক্লাস নামগুলো স্ক্যান করে তারপর স্ক্যানকৃত সিএসএস এর জন্য যে স্টাইল গুলো আছে সেগুলো জেনারেট করে আমাদের কে একটা স্ট্যাটিক সিএসএস ফাইল দেয় যে ফাইল টা এইচটিএমএল ফাইল এর হেড সেকশন এ কল করতে হয়।

টেইলউইন্ড সিএসএস ইনস্টলেশনের ধাপসমূহঃ

আমরা বেশ কয়েকভাবে প্রোজেক্ট এ টেইলউইন্ড সিএসএস ইনস্টলেশন করতে পারি। যেমনঃ Tailwind CLI ব্যবহার করে, PostCSS ব্যবহার করে এবং CDN ব্যবহার করে। আপনার কাছে মনে হতে পারে CDN ব্যবহার করা সহজ কিন্তু এখানে সবচেয়ে বড় সমস্যা হল এখানে আপনি টেইলউইন্ড কনফিগারেশন এবং কাস্টমাইজেশন ফিচার পাবেন না। আমি এখানে Tailwind CLI ব্যবহার করে কিভাবে প্রোজেক্ট এ টেইলউইন্ড সিএসএস ইন্সটল করবেন সেইটা দেখাব

ধাপ-১ঃ
প্রথমে আমাদের প্রোজেক্ট এ node (আপনার মেশিনে অবশ্যই Node.js ভার্সন 12.13.0 অথবা এর চেয়ে আপগ্রেড ভার্সন ইন্সটল থাকতে হবে) initialize করে নিতে হবে। প্রোজেক্ট ফোল্ডার তৈরি করুন এবং প্রোজেক্ট ফোল্ডার এ টার্মিনাল ওপেন করে নিম্নের কমান্ড টা টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।

npm init -y

ধাপ-২ঃ
এখন দেভ ডিপেন্ডেন্সি হিসাবে টেইলউইন্ড সিএসএস ইন্সটল করতে হবে। এই জন্য নিম্নের কমান্ড টা টার্মিনালে টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।

npm install -D tailwindcss

ধাপ-৩ঃ
এখন tailwind.config.js ফাইল তৈরি করতে হবে যেখানে টেইলউইন্ড সিএসএস এর সব ধরনের কনফিগারেশন থাকে। এই জন্য নিম্নের কমান্ড টা টার্মিনালে টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।

npx tailwindcss init

ধাপ-৪ঃ
tailwind.config.js ফাইল এর content array এর মধ্যে সকল টেম্পলেট এর এক্সটেনশন লিখে দিতে হবে যেখান থেকে টেইলউইন্ড সিএসএস ইউটিলিটি স্ক্যান করবে। মানে আমরা যে যে ফাইল এ টেইলউইন্ড সিএসএস এর সাপোর্ট চাই সেগুলো। যেমনঃ আমরা এখানে শুধু এইচটিএমএল ফাইল এ টেইলউইন্ড সিএসএস লিখব তাই এখানে .html লিখেছি content array এর মধ্যে।

//tailwind.config.js file
module.exports = {
content: ["*.{html}"],
theme: {
extend: {},
},
plugins: [],
}

ধাপ-৫ঃ
এখন ২টা ফোল্ডার তৈরি করতে হবে। আমি ফোল্ডার এর নাম দিলাম যথাক্রমে src এবং dist। src ফোল্ডার এর মধ্যে input.css নামে (যেকোনো নামে হতে পারে) একটা সিএসএস ফাইল তৈরি করব এবং dist ফোল্ডার এর মধ্যে output.css নামে (যেকোনো নামে হতে পারে) একটা সিএসএস ফাইল তৈরি করব। input.css ফাইলটি মূলত Tailwind নিজে ব্যবহার করবে, যেখানে টেইলউইন্ড সিএসএস এর সকল ডিরেক্টিভ গুলো থাকবে। এই ডিরেক্টিভ গুলোর মাধ্যমে টেইলউইন্ড সিএসএস এর base, components এবং utilities সিএসএস গুলো কল হবে। input.css ফাইলে আমাদের নিম্নের কোড লিখতে হবে।

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

ধাপ-৬ঃ
এখন টেইলউইন্ড ডেভেলপার মোডে কিভাবে বিল্ড হবে সেটা বলে দেয়ার জন্য package.json ফাইলে আমাদেরকে একটি বিল্ড স্ক্রিপ্ট লিখে দিতে হবে। এই স্ক্রিপ্টের মাধ্যমে Tailwind CLI টেম্পলেট ফাইল স্ক্যান করে স্ট্যাটিক সিএসএস বিল্ড করবে।

"scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css -w"
}

এখানে -i এর পরে ইনপুট সিএসএস ফাইলের এর পাথ, -o এর পরে অউটপুট সিএসএস ফাইলের পাথ নির্দেশ করে দিতে হবে এবং -w এর মাধ্যমে আমরা ওয়াচ ফ্ল্যাগ চালু করে দিয়েছি যাতে tailwind.config.js বা input.css ফাইলে কোন পরিবর্তন হলে অটোমেটিক টেইলউইন্ড বিল্ড হয়।

ধাপ-৭ঃ
এখন output.css ফাইলটি এইচটিএমএল ফাইলের হেডট্যাগ এর মধ্যে কল করতে হবে।

ধাপ-৮ঃ
আমাদের প্রোজেক্ট এখন ১০০% প্রস্তুত টেইলউইন্ড সিএসএস লেখার জন্য। যেকোনো এইচটিএমএল ট্যাগের ক্লাস হিসাবে টেইলউইন্ড সিএসএস ইউটিলিটি ক্লাস গুলো লিখলেই প্রত্যাশিত অউটপুট পেয়ে যাবেন। কিন্তু এর আগে টার্মিনাল এ আপনাকে আর একটা কমান্ড চালু রাখতে হবে সেইটা নিম্নরূপঃ

npm run build

ধাপ-৯ঃ
এই ধাপটা একেবারে অপশনাল আপনি যদি কোড এডিটরে টেইলউইন্ড সিএসএস এর ইন্টেলিজেন্স সাপোর্ট পেতে চান তাহলে টেইলউইন্ড সিএসএস এর নিজস্ব এক্সটেনশন আপনার কোড এডিটরে ইন্সটল করে নিতে পারেন। যেমনঃ Visual Studio Code এর জন্য Tailwind CSS IntelliSense এক্সটেনশন।

ইউটিলিটি-ফার্স্ট ফান্ডামেন্টালসঃ

আমি আগেও বলেছি টেইলউইন্ড সিএসএস হল অনেক গুলো ইউটিলিটি সিএসএস ক্লাস নিয়ে গঠিত একটা সিএসএস ফ্রেমওয়ার্ক। ইউটিলিটি ফিচার টাই মূলত টেইলউইন্ড সিএসএসকে অন্য সকল সিএসএস ফ্রেমওয়ার্ক থেকে আলাদা করেছে। বুটস্ট্র্যাপ সিএসএস ফ্রেমওয়ার্ক যেমন আমাদেরকে একটা কমপ্লিট কম্পোনেন্ট দেয় অপরদিকে টেইলউইন্ড সিএসএস ফ্রেমওয়ার্ক আমাদেরকে এমন কমপ্লিট কম্পোনেন্ট দেয় না। বুটস্ট্র্যাপের একটা কম্পোনেন্ট এর মধ্যে margin, padding, width, height, font-size, color এসব আগে থেকেই বলা থাকে আমরা শুধু সেই কম্পোনেন্ট এর এইচটিএমএল মার্কআপটা আমাদের এইচটিএমএল ফাইলে বসালেই সুন্দর একটা কার্ড কম্পোনেন্ট পেয়ে যাই। অন্যদিকে টেইলউইন্ড সিএসএস এমন কম্পোনেন্ট না দিয়ে margin, padding এর মত লো লেভেল সিএসএস দিয়ে তৈরিকৃত অসংখ্য ইউটিলিটি ক্লাস আমাদেরকে প্রোভাইড করে যেগুলো ব্যবহার করে আমরা নিজেদের ইচ্ছা মতো ডিজাইন করতে পারি।

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

অন্যদিকে ইউটিলিটি সিএসএস ব্যবহার করলে আমাদেরকে আর ক্লাস নাম নিয়ে ভাবার দরকার পরে না, টেইলউইন্ড এর ইউটিলিটি ক্লাস গুলোকে ডেকে আনলেই কাজ হয়ে যায়। আপনাদের মনে হতে পারে এতো এতো ইউটিলিটি ক্লাস কিভাবে মনে রাখবো, ভয়ের কিছু নেয় কিছুই মনে রাখতে হবে না, টেইলউইন্ড এর প্রায় সব ইউটিলিটি ক্লাসই ডিক্লারেটিভ এছাড়াও টেইলউইন্ড এর নিজস্ব ইন্টেলিজেন্স সাপোর্ট আপনার কোড এডিটর এ থাকলেতো এসব নিয়ে আপনাকে তেমন কোন চিন্তাই করতে হবে না। কিছুদিন নিয়মিত প্র্যাকটিস করলে সব কিছু আপনার আয়ত্তে চলে আসবে। আরেকটা বিষয় জানা থাকা জরুরী টেইলউইন্ড সিএসএস এর সমস্ত হিসাব করা হয় rem একক দিয়ে, যেমনঃ p-6 মানে padding-1.5rem। চলুন একটা উদাহরণ দেখা যাকঃ

        

                
        
        

                
AI Arnob
                
You have a new message!
    

উপড়ের সুন্দর কার্ড টা ডিজাইন করার জন্য কিন্তু আমাদের কোন সিএসএস লিখতে হয় নাই জাস্ট কিছু টেইলউইন্ড ইউটিলিটি ক্লাস ব্যবহার করা হয়েছে। লক্ষ করলে দেখবেন যে, এখানে ইউটিলিটি ক্লাসগুলো কতটা ডিক্লারেটিভ, যেমনঃ

• p-6 এর মাধ্যমে চারপাশে padding দিয়েছি 1.5rem।
• max-w-sm এর মাধ্যমে ম্যাক্সিমাম উইড্থ দিয়েছি sm মানে 24rem।
• mx-auto এর মাধ্যমে মার্জিন বামে এবং ডানে অটো করেছি।
• bg-white এর মাধ্যমে ব্যাকগ্রাউন্ড কালার সাদা দিয়েছি।
• rounded-xl এর মাধ্যমে বর্ডার রউন্ড করেছি।
• shadow-lg এর মাধ্যমে বক্স শ্যাডো অ্যাপ্লাই করেছি।
• flex এর মাধ্যমে ডিভ টাকে ডিসপ্লে ফ্লেক্স করেছি।

এতক্ষণে হয়ত বুঝে গিয়েছেন কিভাবে টেইলউইন্ড ইউটিলিটি ক্লাসগুলো কাজ করে। টেইলউইন্ড সিএসএস এর খুবই সুন্দর একটা ডকুমেন্টেশন আছে এবং সার্চ ফিচার টাও অনেক দুর্দান্ত কাজ করে, আপনার যা প্রয়োজন জাস্ট সার্চ বক্স এ লিখুন রেজাল্ট চলে আসবে চোখের পলকে।

বিভিন্ন ধরনের স্টেট হ্যান্ডল করাঃ (Hover, Focus, and Other States)

এতক্ষণে হয়ত আপনার মনে প্রশ্ন জেগেছে যে, টেইলউইন্ড সিএসএস এর মাধ্যমে আমরা কিভাবে বিভিন্ন ধরনের স্টেট ম্যানেজ করতে পারি। এটার ও একটা খুব ভালো সমাধান আছে। যেকোনো ইউটিলিটি ক্লাসের সামনে আমাদেরকে জাস্ট মডিফায়ার লিখতে হবে। নিম্নের উদাহরণ তা দেখলেই বুঝতে পারবেন।

        Click me

এখানে স্বাভাবিক ভাবে বাটন ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে bg-sky-600 এবং হুভার স্টেট এ ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে hover:bg-sky-700। এখানে hover: টা হল মডিফায়ার। এভাবে :focus, :active, :first-child, :required, ::before, ::after, ::placeholder, ::selection এরকম আরও অনেক মডিফায়ার ব্যবহার করে ইউটিলিটি ক্লাস লেখা যায়। বিভিন্ন স্টেট সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।

রেস্পন্সিভ ডিজাইনঃ

টেইলউইন্ড সিএসএস এর বিভিন্ন রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট আছে যেগুলো ব্যবহার করে জটিল জটিল রেস্পন্সিভ ইন্টারফেস ডিজাইন করা যায়। টেইলউইন্ড সিএসএস মোবাইল ফার্স্ট এপ্রোচ এ কাজ করে তাই রেস্পন্সিভ এর জন্য ডিফল্ট যে ৫ ধরনের ব্রেকপয়েন্ট(চাইলে আপনি ইচ্ছামত কাস্টোমাইজ করতে পারবেন) আছে সেগুলোতে min-width উল্লেখ করা। ব্রেকপয়েন্টগুলো নিম্নরূপঃ
|ব্রেকপয়েন্ট প্রিফিক্স|মিনিমাম উইড্থ|সিএসএস মিডিয়া কুয়েরি|
|-|-|-|
|sm|640px|@media (min-width: 640px) { ... }|
|md| 768px |@media (min-width: 768px) { ... }|
|lg| 1024px |@media (min-width: 1024px) { ... }|
|xl| 1280px |@media (min-width: 1280px) { ... }|
|2xl| 1536px |@media (min-width: 1536px) { ... }|

সরাসরি কোন ইউটিলিটি ক্লাস লিখলে সেটি সবগুলো ডিভাইসে কাজ করে কিন্তু যখন কোন ইউটিলিটি ক্লাসের এর আগে রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট যেমনঃ sm: লেখা হবে তখন সেটি ডিভাইস উইড্থ 768px এর সমান বা এর চেয়ে বড় হলে কাজ করবে।

এখানে ইমেজ এর ডিফল্ট উইড্থ ১৬, মিডিয়াম স্ক্রীন এর জন্য হবে ৩২ এবং লার্জ স্ক্রীন এর জন্য হবে ৪৮। রেস্পন্সিভ ডিজাইন সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।

ডার্ক এবং লাইট মোডঃ

টেইলউইন্ড সিএসএস ব্যবহার করে খুব সহজে আপনি আপনার ওয়েবসাইটে ডার্ক মোড এনাবল করতে পারবেন। সাইটকে ডার্ক করার জন্য টেইলউইন্ড সিএসএস dark নামে একটি ভারিয়ান্ট দেয়, যেটি যেকোনো ইউটিলিটি ক্লাস এর সামনে দিলে তখন তা শুধুমাত্র ডার্ক মোডে কাজ করবে।

  Save changes

উপরের কোডে dark:bg-sky-200 লেখা হয়েছে যার ফলে ডার্ক মোডে বাটনটির ব্যাকগ্রাউন্ড কালার হবে bg-sky-200।

ডার্ক মোড স্ট্রাটেজি
ডার্ক মোড স্ট্রাটেজি ২ ধরনের হয় class স্ট্রাটেজি এবং media স্ট্রাটেজি। tailwind.config.js ফাইলে ডার্ক মোড স্ট্রাটেজি বলে দিতে হবে।

//tailwind.config.js file
module.exports = {
  darkMode: 'class',
  // ...
}

আপনি যদি কাস্টম বাটন ব্যবহার করে ডার্ক এবং লাইট মোড toggle করতে চান তাহলে class স্ট্রাটেজি ব্যবহার করতে পারেন আর যদি চান যে অপারেটিং সিস্টেমের প্রেফারেন্স এর উপর নির্ভর করে সাইট ডার্ক অথবা লাইট হবে তাহলে media স্ট্রাটেজি ব্যবহার করতে হবে। ডার্ক মোড সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।

পুনরায় ব্যবহারযোগ্য স্টাইলঃ

আমাদের প্রোজেক্ট এ অনেক সময় একই ডিজাইনের কম্পোনেন্ট একাধিক জায়গায় ব্যবহার করতে হয় তখন দেখা যায় ইউটিলিটি ক্লাসগুলোর ডুপ্লিকেশন চলে আসে। যেমনঃ নিম্নের ডিজাইনে রাউন্ডেড অবতার ডিজাইন বার বার রিপিট করা হয়েছে যার ফোলে একই ইউটিলিটি ক্লাস এর ডুপ্লিকেশন তৈরি হয়েছে।

        

                
Users
            100
        
        

                
                
                
                
                
        
        

                  95 others
        

ইউটিলিটি ক্লাস এর ডুপ্লিকেশন সমস্যা সমাধানের জন্য টেইলউইন্ড সিএসএস আমাদের সুন্দর একটা প্রসেস দিয়েছে। input.css ফাইলে @apply ডিরেক্টিভ এর মাধ্যমে আমরা আমাদের নিজেরদের পছন্দ মতো ক্লাস নাম দিয়ে নতুন একটা কম্পোনেন্ট তৈরি করতে পারি।

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .user-avatar {
    @apply inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover;
  }
}

এখন আমরা শুধু user-avatar ক্লাস টা ব্যবহার করলেই রাউন্ডেড অবতার ডিজাইনটা পেয়ে যাব। আরেকটা বিষয় @layer ডিরেক্টিভের মাধ্যমে নির্ধারিত হয় আমাদের তৈরি করা স্টাইল base, components নাকি utilities এর আন্ডার এ যাবে সেইটা।

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