টেলউইন্ড সিএসএস
  | |
| মূল উদ্ভাবক | অ্যাডাম ওয়াথান, জোনাথন রেনিংক, ডেভিড হেমফিল এবং স্টিভ শগার |
|---|---|
| উন্নয়নকারী | টেলউইন্ড ল্যাবস[১] |
| প্রাথমিক সংস্করণ | ১৩ মে ২০১৯[২] |
| স্থিতিশীল সংস্করণ | |
| রিপজিটরি | |
| যে ভাষায় লিখিত | টাইপস্ক্রিপ্ট, রাস্ট, সিএসএস |
| প্ল্যাটফর্ম | ওয়েব |
| উপলব্ধ | ইংরেজি |
| লাইসেন্স | এমআইটি লাইসেন্স[৪] |
| ওয়েবসাইট | tailwindcss.com |
টেলউইন্ড সিএসএস (Tailwind CSS) হলো একটি ওপেন-সোর্স সিএসএস ফ্রেমওয়ার্ক। বুটস্ট্র্যাপের মতো অন্যান্য ফ্রেমওয়ার্কের তুলনায় এটি বাটন বা টেবিলের মতো উপাদানগুলোর জন্য কোনো পূর্বনির্ধারিত ক্লাসের সারি প্রদান করে না। এর পরিবর্তে, এটি "ইউটিলিটি" সিএসএস ক্লাসের একটি তালিকা তৈরি করে। এই ক্লাসগুলো একত্রে ব্যবহার করে প্রতিটি উপাদানকে পছন্দ মতো স্টাইল করা সম্ভব।[৫][৬]
উদাহরণস্বরূপ, অন্যান্য প্রচলিত পদ্ধতিতে 'message-warning' নামক একটি ক্লাস থাকতে পারে যা একটি হলুদ পটভূমি এবং বোল্ড টেক্সট প্রয়োগ করে। টেলউইন্ডে এই একই ফলাফল পেতে হলে লাইব্রেরিটির তৈরি করা একগুচ্ছ ক্লাস প্রয়োগ করতে হবে, যেমন: 'bg-yellow-300' এবং 'font-bold'।
২০২৬ সালের ২৩ ফেব্রুয়ারি পর্যন্ত গিটহাবে (GitHub) টেলউইন্ড সিএসএস-এর ৯৩,৭০০-এরও বেশি স্টার রয়েছে।[৭]
বৈশিষ্ট্য
[সম্পাদনা]ইউটিলিটি ক্লাস
[সম্পাদনা]ইউটিলিটি-ফার্স্ট ধারণাটি টেইলউইন্ডের প্রধান পার্থক্যসূচক বৈশিষ্ট্যকে নির্দেশ করে।[৮] কম্পোনেন্ট (বাটন, প্যানেল, মেনু, টেক্সটবক্স ...) ভিত্তিক ক্লাস তৈরি করার পরিবর্তে, ক্লাসগুলো নির্দিষ্ট স্টাইল উপাদানকে (হলুদ রং, গাঢ় ফন্ট, খুব বড় লেখা, উপাদানকে কেন্দ্রে স্থাপন...) ঘিরে তৈরি করা হয়। এই প্রতিটি ক্লাসকে ইউটিলিটি ক্লাস বলা হয়।
টেইলউইন্ড সিএসএস-এ বহু ইউটিলিটি ক্লাস রয়েছে, যা বিপুল সংখ্যক সিএসএস বৈশিষ্ট্য নিয়ন্ত্রণের সুযোগ দেয়; যেমন রং, বর্ডার, প্রদর্শন ধরন (display), ফন্ট, ফন্টের আকার, লেআউট এবং ছায়া।
| ফলাফল |  | |
|---|---|---|
| কোড | <div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg">
<p>Please be careful when feeding the birds.</p>
</div>
| |
| ক্লাসসমূহ | টেইলউইন্ড | সমতুল্য সিএসএস |
m-4 |
margin: 1rem; | |
p-4 |
padding: 1rem; | |
bg-yellow-200 |
background-color: rgb(254 240 138); | |
font-bold |
font-weight: 700; | |
rounded-lg |
border-radius: 0.5rem; | |
বৈকল্পিক
[সম্পাদনা]টেইলউইন্ড মিডিয়া কুয়েরি-এর মাধ্যমে নির্দিষ্ট কিছু পরিস্থিতিতে একটি ইউটিলিটি ক্লাস প্রয়োগ করার সুবিধা দেয়, যাকে ভ্যারিয়েন্ট বলা হয়। ভ্যারিয়েন্টের প্রধান ব্যবহার হলো বিভিন্ন পর্দার আকারের জন্য একটি রেসপনসিভ ইন্টারফেস নকশা করা।[৯] উপাদানের বিভিন্ন অবস্থার জন্যও ভ্যারিয়েন্ট রয়েছে; যেমন মাউস নিয়ে গেলে hover:, কিবোর্ড দ্বারা নির্বাচিত হলে focus: অথবা ব্যবহারের সময় active: প্রয়োগ করা যায়,[১০] কিংবা ব্রাউজার বা অপারেটিং সিস্টেমে ডার্ক মোড সক্রিয় থাকলে।[১১]
ভ্যারিয়েন্টের দুটি অংশ থাকে: পূরণযোগ্য শর্ত এবং শর্ত পূরণ হলে যে ক্লাস প্রয়োগ হবে। উদাহরণস্বরূপ, md:bg-yellow-400 ভ্যারিয়েন্টটি স্ক্রিনের আকার md-এর জন্য নির্ধারিত মানের সমান বা বড় হলে bg-yellow-400 ক্লাস প্রয়োগ করবে।
টেইলউইন্ড সিএসএস জাভাস্ক্রিপ্ট ব্যবহার করে উন্নয়ন করা হয়েছে, এটি নোড.জেএস-এর মাধ্যমে চালিত হয় এবং npm অথবা yarn-এর মতো পরিবেশভিত্তিক প্যাকেজ ব্যবস্থাপকের মাধ্যমে ইনস্টল করা যায়।[১২]
সেটিংস এবং থিম
[সম্পাদনা]সাধারণত tailwind.config.js নামে একটি কনফিগারেশন ফাইলের মাধ্যমে টেইলউইন্ড যে ইউটিলিটি ক্লাস ও ভ্যারিয়েন্ট সরবরাহ করে সেগুলো কনফিগার করা যায়। এই কনফিগারেশনে ইউটিলিটি ক্লাসগুলোর মান নির্ধারণ করা সম্ভব; যেমন রঙের প্যালেট বা মার্জিনের ক্ষেত্রে উপাদানগুলোর মধ্যবর্তী দূরত্ব।
সব তৈরি এবং পরিশোধন
[সম্পাদনা]টেইলউইন্ডের ডিফল্ট মোডে প্রকল্পের সেটিংসের ভিত্তিতে সম্ভাব্য সব সিএসএস সমন্বয় তৈরি করা হয়। এরপর PurgeCSS-এর মতো অন্য একটি ইউটিলিটির মাধ্যমে সমস্ত ফাইল পর্যবেক্ষণ করা হয় এবং যেসব ক্লাস ব্যবহার করা হয়নি সেগুলো চূড়ান্ত সিএসএস ফাইল থেকে সরিয়ে ফেলা হয়।
ভ্যারিয়েন্টের সংখ্যা ও তাদের সমন্বয়ের কারণে বিপুল সংখ্যক ক্লাস তৈরি হতে পারে। এর ফলে পরিশোধনের আগে দীর্ঘ অপেক্ষার সময় এবং বড় আকারের সিএসএস ফাইলের মতো অসুবিধা দেখা দেয়। টেইলউইন্ড সিএসএস-এর ৩ নম্বর সংস্করণে এই কার্যপদ্ধতি আর উপলভ্য নয়।[১৩]
জাস্ট-ইন-টাইম মোড
[সম্পাদনা]জেআইটি (just-in-time) মোড হলো সিএসএস তৈরি করার একটি বিকল্প পদ্ধতি। এতে সম্ভাব্য সব ক্লাস তৈরি করে পরে অব্যবহৃতগুলো অপসারণ (যা ট্রি শেকিং কৌশল নামে পরিচিত) করার পরিবর্তে, HTML, JSX, VUE ফাইল (অথবা কনফিগার করা এক্সটেনশন বা অবস্থানসমূহ)-এর বিষয়বস্তু বিশ্লেষণ করা হয় এবং তাৎক্ষণিকভাবে কেবল প্রয়োজনীয় ও ব্যবহৃত ক্লাসগুলো তৈরি করা হয়।
শুধু প্রয়োজনীয় সিএসএস তৈরি করার মাধ্যমে জেআইটি সিএসএস ফাইলের আকার কমায়। এই প্রযুক্তিগত উন্নতির ফলে অসংখ্য নতুন ভ্যারিয়েন্ট ও ইউটিলিটি ক্লাস যুক্ত করা সম্ভব হয়েছে। পাশাপাশি, স্কোয়ার ব্র্যাকেট নোটেশন ব্যবহার করে কনফিগারেশনে নির্ধারিত নয় এমন ইচ্ছামতো মানসহ ইউটিলিটি ক্লাস (যেমন w-[137px], bg-[#1da1f2]) তাৎক্ষণিকভাবে তৈরি করার সুবিধাও যুক্ত হয়েছে।
টেইলউইন্ড সিএসএস-এর ৩ নম্বর সংস্করণ থেকে জেআইটি মোড ডিফল্ট হিসেবে ব্যবহৃত হচ্ছে।[১৩]
সংস্করণ
[সম্পাদনা]টেইলউইন্ড সিএসএস তার সংস্করণ সামঞ্জস্যতা চিহ্নিত করতে সেমান্টিক সংস্করণায়ন ব্যবহার করে।
আরও দেখুন
[সম্পাদনা]তথ্যসূত্র
[সম্পাদনা]- ↑ "Tailwind Labs"। গিটহাব।
- ↑ Doe। "Release Notes: Tailwind CSS v1.0"। Tailwind CSS। সংগ্রহের তারিখ ১৭ আগস্ট ২০২৪।
- ↑ "Release 4.3.4"। ২ নভেম্বর ২০২৬। সংগ্রহের তারিখ ৩ নভেম্বর ২০২৬।
- ↑ "Github: tailwindlabs/tailwindcss, LICENSE"। গিটহাব।
- ↑ Gerchev, Ivaylo (২০২২)। Tailwind CSS। Sebastopol: O'Reilly Media। আইএসবিএন ৯৭৮-১-০৯৮১-৪০৯৯-১। ওসিএলসি 1314257318।
- ↑ Rappin, Noel (২০২১)। Modern CSS with Tailwind flexible styling without the fuss। Raleigh: The Pragmatic Bookshelf। আইএসবিএন ৯৭৮-১-৬৮০৫০-৮৫৭-৪। ওসিএলসি 1277046918।
- ↑ tailwindlabs/tailwindcss, Tailwind Labs, ২৩ ফেব্রুয়ারি ২০২৬, সংগ্রহের তারিখ ২৩ ফেব্রুয়ারি ২০২৬
- ↑ "Utility-First - Tailwind CSS"। tailwindcss.com (ইংরেজি ভাষায়)। সংগ্রহের তারিখ ১৩ নভেম্বর ২০২১।
- ↑ "Responsive Design - Tailwind CSS"। tailwindcss.com (ইংরেজি ভাষায়)। সংগ্রহের তারিখ ১৩ নভেম্বর ২০২১।
- ↑ "Hover, Focus, & Other States - Tailwind CSS"। tailwindcss.com (ইংরেজি ভাষায়)। সংগ্রহের তারিখ ১৩ নভেম্বর ২০২১।
- ↑ "Dark Mode - Tailwind CSS"। tailwindcss.com (ইংরেজি ভাষায়)। সংগ্রহের তারিখ ১৩ নভেম্বর ২০২১।
- ↑ "Installation - Tailwind CSS"। tailwindcss.com (ইংরেজি ভাষায়)। সংগ্রহের তারিখ ১৩ নভেম্বর ২০২১।
- 1 2 "Release v3.0.0-alpha.1 tailwindlabs/tailwindcss"। GitHub (ইংরেজি ভাষায়)। সংগ্রহের তারিখ ১৩ নভেম্বর ২০২১।