টেইলউইন্ড CSS কী?
মূলত, টেইলউইন্ড CSS একটি ইউটিলিটি-ফার্স্ট CSS ফ্রেমওয়ার্ক যা দ্রুত কাস্টম ইউজার ইন্টারফেস তৈরি করতে সহায়তা করে। এটি অত্যন্ত কাস্টমাইজেবল একটি CSS ফ্রেমওয়ার্ক। এটি এমন একটি ফ্রেমওয়ার্ক যেখানে বিভিন্ন ক্লাস যেমন flex, p (padding-এর জন্য), m (margin-এর জন্য), text-center (টেক্সট সেন্টার করার জন্য), rotate, bg-color ইত্যাদি অন্তর্ভুক্ত থাকে, যা সরাসরি প্রজেক্টে ব্যবহার করে যেকোনো ডিজাইন তৈরি করা যায়। এটি দিন দিন সবচেয়ে জনপ্রিয় CSS ফ্রেমওয়ার্ক হয়ে উঠছে, এর নমনীয়তার কারণে।
টেইলউইন্ড CSS-এর সুবিধা
আমার অভিজ্ঞতা অনুযায়ী, টেইলউইন্ড CSS একটি অত্যন্ত কাস্টমাইজেবল ফ্রেমওয়ার্ক। এটি ডিজাইন তৈরি করতে খুবই সুবিধাজনক। ওয়েবসাইট তৈরি করার এটি সবচেয়ে সহজ ও দ্রুত উপায়গুলোর একটি। CSS ক্লাস ও আইডির জন্য এখানে আর কোনো ঝামেলাপূর্ণ নাম রাখতে হয় না। আমরা ডিজাইন কাস্টমাইজ করে কম্পোনেন্ট তৈরি করতে পারি। এছাড়াও, এটি ব্যবহার করে ওয়েবসাইটকে সহজেই রেসপনসিভ করা যায়। এটি PurgeCSS ব্যবহার করে অপ্টিমাইজ করাও সম্ভব।
টেইলউইন্ড বনাম বুটস্ট্র্যাপ
বুটস্ট্র্যাপ হল সবচেয়ে জনপ্রিয় HTML, CSS, এবং JavaScript ফ্রেমওয়ার্ক যা রেসপনসিভ ওয়েবসাইট তৈরি করতে ব্যবহৃত হয়। অপরদিকে, টেইলউইন্ড CSS হল সবচেয়ে জনপ্রিয় ইউটিলিটি-ফার্স্ট CSS ফ্রেমওয়ার্ক, যা দ্রুত UI তৈরি করতে সহায়ক।
যদি কেউ একটি নির্দিষ্ট ডিজাইন নিয়ে কাজ করে, তাহলে বুটস্ট্র্যাপ অনেক সময় সহায়ক হয় না, কারণ এটি ব্যবহার করলে অধিকাংশ CSS নিজেই লিখতে হয়। কিন্তু টেইলউইন্ড CSS ব্যবহার করলে ইউটিলিটি ক্লাসের কারণে কাজ সহজ হয়ে যায়। টেইলউইন্ড বুটস্ট্র্যাপের মতো একটি UI কিট নয়। এতে ডিফল্ট কোনো থিম নেই এবং এটি কোনো বিল্ট-ইন UI কম্পোনেন্ট প্রদান করে না।
টেইলউইন্ড CSS ইনস্টলেশন পদ্ধতি
টেইলউইন্ড CSS ব্যবহার করতে দুটি পদ্ধতি রয়েছে:
প্রথম পদ্ধতি: npm এর মাধ্যমে ইনস্টল
ধাপ-১: ইনস্টল করুন:
npm install tailwindcss @tailwindcss/vite
ধাপ-২: আপনার টেমপ্লেট পাথ কনফিগার করুন (tailwind.config.js ফাইল):
import { defineConfig } from ‘vite’
import tailwindcss from ‘@tailwindcss/vite’
export default defineConfig({
plugins: [
tailwindcss(),
],
})
ধাপ-৩: CSS ফাইলে টেইলউইন্ড ডিরেক্টিভ যুক্ত করুন (src/input.css):
@import “tailwindcss”;
ধাপ-৪: টেইলউইন্ড CLI বিল্ড প্রসেস শুরু করুন:
আপনার build process চালানোর জন্য npm run dev অথবা package.json ফাইলে কনফিগার করা যে কোনো কমান্ড চালান।
npm run dev
ধাপ-৫: HTML এ Tailwind ব্যবহার:
আপনার HTML এ Tailwind ব্যবহার শুরু করুন।
নিশ্চিত করুন যে আপনার কম্পাইল করা CSS ফাইলটি সেকশনে অন্তর্ভুক্ত রয়েছে (আপনার ফ্রেমওয়ার্ক এটি স্বয়ংক্রিয়ভাবে পরিচালনা করতে পারে)। তারপর Tailwind-এর utility classes ব্যবহার করে আপনার কন্টেন্ট স্টাইল করুন।
দ্বিতীয় পদ্ধতি: CDN ব্যবহার করে টেইলউইন্ড CSS
আপনার HTML ফাইলের head সেকশনে নিচের লিংক যুক্ত করুন:
link href=“https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=“stylesheet”
HTML ফাইলে CDN ব্যবহার করে Example কোড:
এই ছিল সংক্ষেপে টেইলউইন্ড CSS নিয়ে কিছু আলোচনা। আশা করি, এই ব্লগটি পড়ে পাঠকরা উপকৃত হবেন।