Tailwind CSS হল একটি ওপেন সোর্স CSS ফ্রেমওয়ার্ক। এই লাইব্রেরির প্রধান বৈশিষ্ট্য হল যে, বুটস্ট্র্যাপের মতো অন্যান্য CSS ফ্রেমওয়ার্কের মতো, এটি বাটন বা টেবিলের মতো উপাদানগুলির জন্য পূর্বনির্ধারিত ক্লাসের একটি সিরিজ প্রদান করে না।
অন্যভাবে বলা যায় Tailwind CSS হল একটি ইউটিলিটি-প্রথম CSS ফ্রেমওয়ার্ক যা ব্যবহারকারীদের দ্রুত এবং সহজে অ্যাপ্লিকেশন তৈরি করতে সক্ষম করে। সম্পূর্ণ কাস্টম কম্পোনেন্ট ডিজাইন তৈরি করতে আপনি লেআউট, রঙ, ব্যবধান, টাইপোগ্রাফি, শ্যাডো এবং আরও অনেক কিছু নিয়ন্ত্রণ করতে ইউটিলিটি ক্লাস ব্যবহার করতে পারেন এইচটিএমএল না রেখে বা কাস্টম CSS-এর একটি লাইন না লিখে।
এর লক্ষ্য হল যে আপনি যখন আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন তৈরি করছেন, তখন একটুও ভ্যানিলা সিএসএস না লিখে যেন আপনি শুধু সিএসএস এর কিছু ইউটিলিটি ক্লাসের সাহায্যে খুব সহজেই সুন্দর সুন্দর ইউসার ইন্টারফেস তৈরি করে ফেলতে পারেন।
টেলওয়াইন্ডের বৈশিষ্ট হলো এটি বিভিন্ন ধরনের সিএসএস ইউটিলিটি ক্লাস প্রদান করা যার প্রত্যেকটির নিজস্ব সতন্ত্র বৈশিষ্ট ও ব্যবহার রয়েছে। .btn নামক ক্লাসে সরাসরি একগুচ্ছ সিএসএস অ্যাট্রিবিউট ব্যবহার না করে আপনি টেলওয়াইন্ডের সাহায্যে bg-blue-500 py-2 px-4 এর মতো ছোট ছোট ইউটিলিটি ক্লাস প্রয়োগ করে একটি চমৎকার বাটন তৈরী করে ফেলতে পারেন। অথবা এই ইউটিলিটি ক্লাস গুলো প্রয়োগ করে আলাদা একটি .btn নামক ক্লাস কম্পোনেন্ট তৈরী করতে পারেন অতি সহজেই।
উদাহরণস্বরূপ, ধরা যাক আপনি একটি বাটন তৈরি করতে চান যাতে একটি নির্দিষ্ট উচ্চতা, প্যাডিং, কালো পটভূমির রঙ, বৃত্তাকার প্রান্ত এবং সাদা, অর্ধেক -বোল্ড ফন্ট রয়েছে। আপনি যে HTML ব্যবহার করবেন তা এখানে:
HTML-এ ছয়টি ইউটিলিটি ক্লাস রয়েছে। আসুন নীচের প্রতিটি ভেঙে দেওয়া যাক:
h-10: এই ক্লাস বাটনটিকে 10 ইউনিটের একটি নির্দিষ্ট উচ্চতায় সেট করে।
px-6: এই ক্লাস বাটন এর অনুভূমিক প্যাডিং 6 ইউনিটে সেট করে।
ফন্ট-সেমিবোল্ড: এই ক্লাস বাটন এর ফন্টের ওজন সেমিবোল্ডে সেট করে।
rounded-md: এই ক্লাসটি বাটন এর সীমানা ব্যাসার্ধ সেট করে যাতে এটির বৃত্তাকার কোণ থাকে।
bg-black: এই ক্লাসটি বাটন এর ব্যাকগ্রাউন্ডের রঙ কালোতে সেট করে।
টেক্সট-হোয়াইট: এই ক্লাস বাটন এর টেক্সট রঙ সাদাতে সেট করে।
আপনি হয়তো অনুমান করেছেন, Tailwind CSS ব্যবহার করার সময় শেখার বক্ররেখা মূলত এর ইউটিলিটি ক্লাসের সাথে নিজেকে পরিচিত করা। কিন্তু একবার আপনি করে ফেললে, আপনি নীচের বাটন এর মতো দ্রুত এবং ধারাবাহিকভাবে কাস্টম কম্পোনেন্ট তৈরি করতে সক্ষম হবেন।
এখন আমরা টেইলউইন্ড সিএসএস ফ্রেমওয়ার্কটি আরও ভালভাবে বুঝতে পাড়ার জন্য আসুন এটি ব্যবহার করার কিছু সুবিধা দেখি।
Tailwind এর মত CSS ফ্রেমওয়ার্ক ব্যবহার করার অনেক সুবিধা রয়েছে:
1… আপনি কম কাস্টম CSS লিখুন: টেইলউইন্ডের সাহায্যে, আপনি সরাসরি আপনার HTML-এ পূর্ব-বিদ্যমান ক্লাসগুলি প্রয়োগ করে উপাদানগুলিকে স্টাইল করেন৷ এইভাবে ইউটিলিটি ক্লাস ব্যবহার করে, আপনি CSS না লিখে কাস্টম ডিজাইন তৈরি করতে পারেন।
2… আপনি CSS ফাইল ছোট রাখুন। টেইলউইন্ডের মতো ফ্রেমওয়ার্ক ছাড়াই, নতুন ফীচার এবং উপাদান অ্যাড করার সাথে সাথে আপনাকে CSS লিখতে হবে। ASA এর ফলে, আপনার CSS ফাইলগুলি ক্রমাগত বৃদ্ধি পেতে থাকে এবং ভারী হতে থাকে। টেইলউইন্ডের ফ্লেক্সবক্স এবং প্যাডিং ইউটিলিটিগুলির মতো ইউটিলিটিগুলি ব্যবহার করে, বেশিরভাগ শৈলীগুলি পুনরায় ব্যবহারযোগ্য তাই আপনাকে খুব কমই নতুন CSS লিখতে হবে।
3… আপনাকে ক্লাসের নাম উদ্ভাবন করতে হবে না। Tailwind যখন, আপনি একটি পূর্ব-নির্ধারিত ডিজাইন সিস্টেম থেকে ক্লাস বেছে নিচ্ছেন। এর মানে হল নির্দিষ্ট শৈলী এবং উপাদানগুলির জন্য “নিখুঁত” শ্রেণির নাম বাছাই করার জন্য আপনাকে বিরক্ত করার দরকার নেই, বা সাইডবার-ইনার-রেপারের মতো জটিলগুলি মনে রাখবেন।
4… আপনি নিরাপদ ভাবে পরিবর্তন করতে পারেন. প্রথাগত পদ্ধতির সাহায্যে, আপনি যদি CSS-এ পরিবর্তন করেন, তাহলে আপনি আপনার সাইটে কিছু ভাঙতে পারেন। CSS এর বিপরীতে, আপনার HTML-এর ইউটিলিটি ক্লাসগুলি স্থানীয়। তার মানে আপনি আপনার সাইটে অন্য কিছু ভাঙার বিষয়ে চিন্তা না করেই সেগুলি পরিবর্তন করতে পারেন৷
- এটি একটি অনন্য স্টাইল/ওয়েবসাইট তৈরি করার ক্ষমতা রাখে
- অ-নিষেধমূলক কাঠামো- কোনো প্রিসেট স্টাইল/উপাদান নেই
- এলিমেন্ট স্টাইলপুনরায় ব্যবহার করার ক্ষমতা রাখে
- ব্যবহার করা সহজ এবং দ্রুত
- রেস্পন্সিভ ওয়েবসাইট তৈরি করা যায়
কিভাবে টেলওয়াইন্ড সিএসএস ব্যাবহার করবো?
টেলওয়াইন্ড সিএসএস আমরা দুই ভাবে ব্যবহার করতে পারি। প্রথমটি হল CDN এর মাধ্যমে ওয়েবপেজে ব্যবহার করে। টেলওয়াইন্ড এই CDN কে “Play CDN” নামকরণ করেছে। আর অপরটি হল নিজের লোকাল মেশিনে বিল্ড স্ক্রিপ্ট সেটআপ করে। আমরা দুটি পদ্ধতিই এই খানে শিখবো।
পদ্ধতি ১ : CDN এর ব্যবহার
কোনো বিল্ড স্টেপ ছাড়াই ব্রাউজারে টেইলউইন্ড ব্যবহার করতে চাইলে Play CDN এর মাধ্যমে টেইলউইন্ড ব্যবহার করে দেখতে পারেন। Play CDN শুধুমাত্র ডেভেলপমেন্ট ও অনুশীলন করার উদ্দেশ্যে ডিজাইন করা হয়েছে, এটি কখনো লাইভ প্রজেক্টে ব্যবহার করবেন না।
পদ্ধতি ২ : CLI এর মাধ্যমে বিল্ড স্ক্রিপ্ট সেটআপ
টেলওয়াইন্ড সিএসএস ব্যবহারের সবচাইতে সহজ, দ্রুততম ও সর্বোৎকৃষ্ট উপায় হল Tailwind CLI টুল। টেলওয়াইন্ড CLI এর মাধ্যমে ইনস্টল করার জন্যে আপনার কম্পিউটারে Node.js ভার্সন ১২.৩ বা তার উপরের ভার্সন ইনস্টল থাকতে হবে।
এরপর আপনি যে প্রজেক্ট ফাইলে টেলওয়াইন্ড ইনস্টল করতেচান সেই লোকেশনে আপনার কম্পিউটারের টার্মিনাল চালু করুন। আপনি চাইলে VS Code এর টার্মিনালও ব্যবহার করতে পারেন। এবার নিচের কোড গুলো টার্মিনালে লিখে Enter বাটন প্রেস করুন।
প্রতি লাইন কোড লেখার পর Enter প্রেস করতে হবে। একটা কোডের এক্সিকিউট শেষ হলে আর এক লাইন কোড লিখতে হবে, একসাথে সব কোড লেখা যাবে না।
এবার আমরা আমাদের প্রজেক্ট ফোল্ডারে src এবং output নামের দুইটি ফোল্ডার তৈরী করবো। src ফোল্ডার এর ভিতরে tailwind.css নামের একটি ফাইল তৈরী করতে হবে। আপনি চাইলে অন্য নামেও এই ফাইল তৈরী করতে পারেন। কিন্তু অবশ্যই ফাইল এক্সটেনশন .css হতে হবে। ফাইলটি তৈরী করার পর ওই ফাইল এর মধ্যে আমরা নিচের কোড গুলো লিখে সেভ করবো।
@tailwind base;
@tailwind components;
@tailwind utilities;
এরপর আমাদের বিল্ড স্ক্রিপ্ট লিখতে হবে। এর জন্যে আমাদের প্রজেক্টে package.json ফাইলটি কোড ইডিটরে ওপেন করবো। এই json ফাইলে script প্রপার্টির ভিতরে আমরা build নামের একটি প্রপার্টি লিখবো। এই বিল্ড এর কোডটি নিচে দাওয়া আছে।
“build”: “tailwindcss -i ./src/tailwind.css -o ./output/tailwind.css -w”
তারপর প্রজেক্টের tailwind.config.js ফাইলটি কোড ইডিটরে ওপেন করবো। এই js ফাইলে content প্রোপার্টিতে আমরা নিচের কোডটি লিখবো। আপনি চাইলে কোডটি আপনার সুবিধা মতো পরিবর্তন করে নিতে পারেন।
content: [‘*.{html,php,js,jsx,ts,tsx,vue}’],
এবার আমরা আমাদের টার্মিনালে নিচের কম্যান্ডটি দিয়া ইন্টার প্রেস করবো।
npm rub build
ইন্টার প্রেস করার পর টেলওয়াইন্ড নিজে নিজে প্রজেক্টের output ফোল্ডার এ tailwind.css নামের একটি ফাইল তৈরী করে ফেলবে। এখন এই ফাইলটি আপনার html ফাইলে css হিসাবে লিংক আপ করতে হবে। লিংক আপ করা হলে আপনি এখন আপনার প্রজেক্টে টেলওয়াইন্ডের সব ইউটিলিটি ক্লাস ব্যবহার করতে পারবেন।
Tailwind CSS এর কমপ্লিট গাইডলাইন:
Read more about web design from here.
