আস্সালামুআলাইকুম। আজ আমি আপনাদের Tailwind CSS নিয়ে একটি বিস্তারিত ধারণা দেব। এটি কি, কেন বেবহার করবেন ইত্যাদি নিয়ে আলোচনা করবো।
তো শুরুতেই আসি Tailwind CSS কি ?
Tailwind CSS একটি ইউটিলিটি-ফার্স্ট CSS ফ্রেমওয়ার্ক হিসাবে ধরা হয় । Tailwind CSS-এর প্রথম রিলিজ ছিল নভেম্বর ২০১৭-এ যা Mozilla-এর মতো টেক জায়ান্টদের দ্বারা ফ্রেমওয়ার্ক টি গৃহীত হয়েছিল। আজ টেইলউইন্ড সিএসএস অন্যতম একটি জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক হিসেবে উপরে আছে , এমনকি অনেকের মোতে বুটস্ট্র্যাপের মতো ফ্রেমওয়ার্ক কেও এটি পিছনে ফেলে দেয় ।
Tailwind CSS এর সৌন্দর্য হল যে এটি ডেভেলপারদের অনন্য স্টাইল এবং কাস্টম ইউজার ইন্টারফেস তৈরি করতে সহজে CSS ক্লাস কাস্টমাইজ করতে দেয়। টেইলউইন্ড সিএসএস-এর সাহায্যে স্টাইল বেছে নেওয়ার ক্ষেত্রে ডেভেলপারের অবাধ রাজত্ব রয়েছে কারণ ডিজাইনের কোনো সীমাবদ্ধতা নেই। এই ডিজাইনের স্বায়ত্তশাসনের কারণেই অনেক ডেভেলপার বুটস্ট্র্যাপের মতো ফ্রেমওয়ার্কের বিপরীতে Tailwind CSS বেছে নিচ্ছেন যা প্রিসেট স্টাইল কিটগুলির সাথে আসে।
Tailwind CSS এর কিছু উপকারিতা
- সত্যিকারের অনন্য স্টাইল/ওয়েবসাইট তৈরি করার ক্ষমতা
- অ-নিষেধমূলক কাঠামো- কোনো প্রিসেট স্টাইল/উপাদান নেই
- উপাদান স্টাইলপুনরায় ব্যবহার করার ক্ষমতা
- ব্যবহার করা সহজ এবং দ্রুত
- প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করুন
- ছোট CSS ফাইল
tailwind css লেখার নিয়ম
<img class="h-30 m-6" src="" >
<h2 class="text-center text-pink-400 px-2 pb-5" > hello</h2>Tailwind CSS প্যাকেজ ইনস্টল করতে টার্মিনালে নিম্নলিখিত কোডটি চালান।
উপরের কোডটি দেখে সহজে ব্যাখ্যা করা যাই এবং বুঝা যাই যে একজন ডেভেলপার টেলউইন্ড ক্লাসের মাধ্যমে দ্রুত এইচটিএমএল এলিমেন্ট স্টাইল করতে পারে এবং তাদের ইচ্ছামত ইউজার ইন্টারফেস তৈরি করতে পারে। আমি “h-30” দিয়ে ছবির জন্য উচ্চতা তৈরি করেছি এবং “m-6” ক্লাসের সাথে ১.৫rem এর মার্জিন যোগ করেছি। আমি “টেক্সট-সেন্টার টেক্সট-পিঙ্ক-400” সহ h2 উপাদানে পাঠ্যের অবস্থান এবং রঙ সরাসরি সম্পাদনা করতে সক্ষম হয়েছি। আমি “px-2 pb-5” সহ h2 উপাদানের চারপাশে প্যাডিং কাস্টমাইজ করতে সক্ষম হয়েছি।
tailwind css এর শুরু কিভাবে করবো
ধাপ -১ : install package
Tailwind CSS প্যাকেজ ইনস্টল করতে টার্মিনালে নিম্নলিখিত কোডটি চালান।
:-> npm install tailwindcssধাপ 2- আপনার তৈরি CSS ফাইলে tailwind যোগ করুন
একটি CSS ফাইল তৈরি করার পরে, ফাইলটিতে নিম্নলিখিত কোডটি অনুলিপি করুন। এটি আপনাকে আপনার প্রোজেক্টে যোগ করে Tailwind ব্যবহার করার অনুমতি দেয়।
:-> @tailwind base;
@tailwind components;
@tailwind utilities;ধাপ 3- আপনার Tailwind কনফিগারেশন ফাইল তৈরি করুন
আপনার টার্মিনালে নিম্নলিখিত কোড চালান
:-> npx tailwindcss initচালানোর পরে আপনি লক্ষ্য করবেন যে আপনার প্রজেক্টে tailwind.config.js নামে একটি নতুন ফাইল উপস্থিত হয়েছে যাতে কিছু কনফিগ কোড রয়েছে।
এইভাবে আপনি টেইলউইন্ড সিএসএস ব্যবহার করে সুন্দর সুন্দর ওয়েবসাইট তৈরি করতে পারবেন।
