Tailwindcss? আমি পাশ করব

সম্প্রতি, আমি একটি প্রকল্পে Tailwindcss ব্যবহার করেছি এবং আপনি কি জানেন? এটি একটি চোখ খোলার অভিজ্ঞতা ছিল, অন্তত বলতে.

আপনাদের মধ্যে কেউ কেউ হয়তো ভাবছেন: Tailwindcss কি?

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

তো সমস্যাটা কী? শিরোনাম কেন বলছে '" Tailwindcss? না ধন্যবাদ ”?

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

সব CSS এর সাথে কি?

আমরা Tailwindcss এবং এর বিকাশের জটিলতায় প্রবেশ করার আগে আমাদের অবশ্যই কয়েকটি পূর্বশর্ত পূরণ করতে হবে।

CSS কি?

CSS মানে ক্যাসকেডিং স্টাইল শীট। আমার মতে CSS এর জন্য সেরা সংজ্ঞা techterms.com থেকে আসে

“CSS হল একটি স্টাইল শীট ভাষা যা HTML ওয়েবপেজে বিষয়বস্তু বিন্যাস করার জন্য ব্যবহৃত হয়। CSS শৈলী শীটগুলি বিষয়বস্তু থেকে আলাদাভাবে পাঠ্য, টেবিল এবং অন্যান্য উপাদানগুলির উপস্থিতি এবং বিন্যাস সংজ্ঞায়িত করতে পারে। স্টাইলগুলি একটি ওয়েব পৃষ্ঠার HTML ফাইলের মধ্যে বা একাধিক ওয়েবপেজ দ্বারা উল্লেখিত একটি পৃথক নথিতে পাওয়া যেতে পারে”।

অনেক শব্দে নয়: CSS হল এর স্টাইলিং ভাষা। আপনার ওয়েবপৃষ্ঠা বা ওয়েব অ্যাপকে চমৎকার দেখাতে আপনি HTML উপাদানে CSS ব্যবহার করেন।

Tailwindcss কি?

Tailwindcss টিমের নিজের কথা থেকে, Tailwindcss হল "একটি ইউটিলিটি-প্রথম CSS ফ্রেমওয়ার্ক যা flex , pt-4 , text-center এবং rotate-90 এর মতো ক্লাসে পরিপূর্ণ যেটি সরাসরি আপনার মার্কআপে যেকোনো ডিজাইন তৈরি করার জন্য তৈরি করা যেতে পারে "।

এর মানে মূলত টেইলউইন্ড সিএসএস মূল সিএসএস পদ্ধতি এবং ক্রিয়াকলাপ গ্রহণ করে এবং তারপরে সেগুলি করতে এবং প্রয়োগ করা সহজ করে তোলে।

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

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

CSS এবং Tailwindcss এর মধ্যে পার্থক্য

Tailwindcss দেখতে কেমন? আসুন একটি ভ্যানিলা CSS সমতুল্য এবং তারপর একটি Tailwindcss সমতুল্য করে তুলনা করি।

আসুন উপরের লেখাটিতে কী চলছে তা ভেঙে দেওয়া যাক। এটি একটি HTML 5 উদ্ধৃতি এবং আমরা একটি বোতাম তৈরি করছি।

বোতামটি তৈরি করতে আমরা এটিকে " divs "-এর মাধ্যমে সেট আপ করি - আমাদের ওয়েবসাইট বা ওয়েব অ্যাপ পরিবর্তন করার জন্য জিনিসগুলি ইনপুট করার জন্য মূলত ছোট পাত্রে। আমরা প্রতিটি ডিভকে তার নিজস্ব " শ্রেণী " দিই তাই আমরা পরবর্তীতে আমাদের পৃথক CSS ফাইলে সেই নির্দিষ্ট উপাদানটিকে উল্লেখ করতে পারি। যদিও, আপনি ডিভকে তাদের নিজস্ব “ আইডি ”ও দিতে পারেন। আপনি " ইন-লাইন " সিএসএস পরিবর্তন করতে পারেন, যার মানে আপনি সরাসরি এইচটিএমএল ফাইলে সিএসএস রাখতে পারেন তবে বেশিরভাগ প্রতিষ্ঠানের স্বার্থে এটি এড়াতে থাকে।

CSS ফাইলে, বোতামটি সম্পাদনা করার জন্য আমাদের কোড দেখতে কেমন হতে পারে?

উপরের কোডে, আমরা HTML উদ্ধৃতিতে বোতাম ক্লাসের সাথে ইন্টারঅ্যাক্ট করছি। আপনি যেভাবে আপনার CSS ফাইলকে আপনার HTML ক্লাস সম্পর্কে সচেতন করবেন তা হল ক্লাসের নামের শুরুতে একটি ডট দিয়ে। এর নীচে, ক্রমানুসারে, আমরা " align-items " দিয়ে div-এর কেন্দ্রে বোতামটি সারিবদ্ধ করি। সারিবদ্ধ-আইটেমের নীচে " ব্যাকগ্রাউন্ড ক্লিপ " রয়েছে যা নির্ধারণ করে যে " ব্যাকগ্রাউন্ড-কালার " কতদূর প্রসারিত হবে এবং প্রসারিত হবে না। " সীমানা " হল বোতামের পাশের পুরুত্ব এবং সীমানা ব্যাসার্ধ হল প্রান্তগুলি কতটা বাঁকা। আমরা শুধু উল্লেখ করেছি সবই বোতাম শৈলীর বিকাশে অবদান রাখে। আমরা দেখতে পাচ্ছি, মূল CSS শৈলীগুলি যথেষ্ট সহজ বলে মনে হচ্ছে। কিভাবে Tailwindcss একই কেস পরিচালনা করবে?

কিসের অপেক্ষা? আমরা কি শুধু একটি এইচটিএমএল ফাইলে সিএসএস-দেখানো কোড রেখেছি? হ্যাঁ আমরা করেছিলাম. আপনি যা দেখছেন তা হল Tailwindcss-এর আগের কোড উদাহরণের সমতুল্য। এটি আসলে Tailwindcss এর আরও অনন্য বৈশিষ্ট্যগুলির মধ্যে একটি। Tailwindcss ব্যবহার করার সময় আপনি আপনার আলাদা CSS কোড আলাদা ফাইলে রাখবেন না। আপনার সমস্ত Tailwindcss কোড সরাসরি আপনার HTML ফাইলে যায়। আমরা আগেই বলেছি, বিকাশকারীরা ঐতিহ্যগতভাবে ইন-লাইন CSS কোডিং এড়িয়ে চলে। Tailwindcss-এর সাথে ইন-লাইন কোডিং আর সত্যিই একটি বিকল্প নয়, এটি প্রায় প্রয়োজনীয়। Tailwindcss সম্পূর্ণরূপে শ্রেণী শনাক্তকরণের মাধ্যমে প্রয়োগ করা হয়।

এখন, উপরের কোড কি কাজ করে? এটি মূল CSS কোড যা করে তা ঠিক করে, যদিও কিছুটা ভিন্ন।

রেগুলার CSS বনাম Tailwindcss কাউন্টারপার্টের দিকে আরেকটা নজর দেওয়া যাক।

উপরের চিত্রে, আমরা একটি HTML5 নথিতে রয়েছি যা “ card-img ” শ্রেণীর অধীনে চকলেটের একটি ছবি আমদানি করছে৷ আসুন দেখি সংশ্লিষ্ট CSS দেখতে কেমন।

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

উপরের কোডটি Tailwindcss সমতুল্য। এটি অনেক সহজ, এবং আরো মার্জিত কিন্তু সবকিছুর অর্থ কী এবং বিবৃতিগুলি কীভাবে অবস্থান করা যায় তা জানার জন্য অনেক বেশি প্রচেষ্টা প্রয়োজন৷ তাই এটি একটি সুবিধা আছে ঐতিহ্যগত CSS উপর?

Tailwindcss এর প্রকৃতি এটিকে খুব অগোছালো করে তোলে। আপনার সমস্ত কোড, HTML এবং CSS উভয়ই একটি ফাইলে থাকবে এবং দীর্ঘ এবং আপাতদৃষ্টিতে ভিড় হবে৷ এটি বিকাশ করা কঠিন করে তোলে।

Tailwindcss এর প্রধান অসুবিধা কি কি?

• খাড়া শেখার বক্ররেখা যা অভ্যস্ত হতে সময় নেয়।
• কাস্টম ক্লাস উপাদান তৈরি করতে হবে. (এটি একটি দীর্ঘ প্রকল্পে অনেক কিছু যোগ করতে পারে)।
• বিভ্রান্তিকর কারণ HTML এবং স্টাইলিং মিশ্রিত

এর প্রধান সুবিধা কি কি?

• অত্যন্ত কাস্টমাইজযোগ্য

• দ্রুত উন্নয়ন

• সামঞ্জস্যপূর্ণ শব্দ এবং প্যাটার্ন নির্বিশেষে যা যোগ করা হচ্ছে বা সম্পাদনা করা হচ্ছে।

  
  

আমরা Tailwindcss এর উদাহরণ দেখেছি এবং এখন আমরা প্রধান সুবিধা এবং অসুবিধাগুলি জানি। কিন্তু, এটা কতটা জনপ্রিয়?

এটি পুরানো এবং নতুন উভয় বিকাশকারীদের মধ্যে গৃহীত এবং প্রসারিত হয়েছে।

tailwindweekly.com-এর ভিভিয়ান গুইলেন বলেছেন যে Tailwindcss 19 নভেম্বর, 2022 পর্যন্ত সাপ্তাহিক 4.5 মিলিয়ন ডাউনলোড লাভ করেছে। আমি এটি লিখছি, আপনি যদি npmjs.com- এ যান এবং Tailwindcss অনুসন্ধান করেন তবে এটি 336 মিলিয়ন ডাউনলোড হয়েছে। 5 বছর আগে এটি প্রকাশের পর থেকে এটি প্রতিদিন গড়ে 184,110 ডাউনলোড হয়। ডাউনলোডের একটি অবিশ্বাস্য পরিমাণ.

টেইলউইন্ডে ডাউন ডাউন

এর আগে, এই অংশের শুরুতে, আমি লিখেছিলাম, " এমন একটি সময় বা সময় থাকতে পারে যখন Tailwindcss আপনার প্রকল্পগুলির জন্য সর্বোত্তম সমাধান নয়"। আমি কেন এই লিখলাম? এবং কিভাবে এটি শিরোনামের সাথে সম্পর্কযুক্ত? “Tailwindcss? আমি পাশ করব ".

Tailwindcss প্রায় সকল ফ্রন্টএন্ড ডেভেলপারদের মধ্যে বিশ্বব্যাপী জনপ্রিয়, এটি প্রথাগত CSS-এর তুলনায় প্রয়োগ করা সহজ বলে মনে হয় এবং এটি এর ধরনের অন্যান্য প্রযুক্তির তুলনায় বেশি কাস্টমাইজযোগ্যতা প্রদান করে। হেক, এটা আমার ব্যবহার এমনকি এই নিবন্ধটি নিজেই অনুপ্রাণিত. তাহলে আমি এখনও সন্দেহ করছি কেন? কারণ আমি অবশ্যই এটি ব্যবহার করেছি ।

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

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

আপনি আমাকে সাবস্ক্রাইব করেছেন কিনা তা জানতে পারবেন এবং আমরা খুব শীঘ্রই একে অপরের সাথে দেখা করব;)