সহজে আপনার রুবি অন রেল প্রকল্পে Tailwind CSS একীভূত করুন

সমস্ত ওয়েবসাইটের জন্য ক্যাসকেডিং স্টাইল শীট (সিএসএস) এর গুরুত্বকে বাড়াবাড়ি করা কঠিন। যেহেতু প্রথম CSS মানগুলি 1996 সালের শেষের দিকে প্রকাশিত হয়েছিল, আমরা বৈশিষ্ট্য এবং ইকোসিস্টেমের ক্ষেত্রে অনেক এগিয়ে এসেছি৷

বেশ কিছু ফ্রেমওয়ার্ক আবির্ভূত হয়েছে এবং জনপ্রিয় প্রমাণিত হয়েছে, যার মধ্যে সাম্প্রতিকতম হল Tailwind CSS।

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

চলুন শুরু করা যাক!

টেইলউইন্ড সিএসএস:একটি ইউটিলিটি-প্রথম পদ্ধতি

বেশিরভাগ সিএসএস ফ্রেমওয়ার্ক (উদাহরণস্বরূপ, ফাউন্ডেশন, বুটস্ট্র্যাপ বা বুলমা) বোতাম এবং ফর্ম ফিল্ডের মতো ব্যবহারের জন্য প্রস্তুত উপাদান সরবরাহ করে, যাতে আপনি একটি ইন্টারফেসকে আকার দিতে দ্রুত ব্লক একত্র করতে পারেন।

সাধারণত, বুটস্ট্র্যাপের সাথে একটি বোতাম যুক্ত করা এইরকম দেখায়:

এই উদাহরণে, btn প্রয়োগ করে একটি সাধারণ বোতাম সংজ্ঞায়িত এবং স্টাইল করা হয়েছে এবং btn-primary ক্লাস btn-primary আমাদের ব্যবহারের ক্ষেত্রে সঠিক রঙ সেট করে। তবুও, সেই ইন্টারফেসটি আমাদের প্রয়োজনের সাথে মানানসই নয়, তাই আমরা প্রতিটি উপাদান কাস্টমাইজ করার জন্য একটি কাস্টম CSS স্টাইলশীট যোগ করি:

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

"ইউটিলিটি-ফার্স্ট" এর অর্থ হল টেলউইন্ড পারমাণবিক, একক-উদ্দেশ্যের ক্লাসগুলি প্রদান করে যা আপনি জটিল ডিজাইনগুলি তৈরি করতে একত্রিত করতে পারেন৷

টেলউইন্ড এবং বুটস্ট্র্যাপ তুলনা করার জন্য কিছু কোড দেখে নেওয়া যাক। প্রথমত, এখানে Tailwind আমাদেরকে একটি সাধারণ বোতাম স্টাইল করতে দেয়:

কনফিগার করার জন্য বোতাম উপাদান ক্লাসের একটি সিরিজ আছে:

• পটভূমির রঙ bg-blue-500 : যদিও 'নীল' একটি পূর্ব থেকে বাছাই করা রঙ, আমরা সংখ্যার সাথে রঙের ছায়া সেট করতে পারি। সংখ্যা যত বেশি হবে, রঙ তত গাঢ় হবে।
• হোভারে পটভূমির রঙ: hover:bg-blue-600 .
• পাঠ্য রঙ text-white : এখানে একটি সংখ্যার প্রয়োজন নেই, কারণ এটি সাদা; আপনি একটি সংখ্যা নির্দিষ্ট না করলে সবসময় একটি ডিফল্ট শেড থাকে, যেমন টেক্সট-লাল সহ।
• উল্লম্ব প্যাডিং py-2 : 'p' হল প্যাডিং, 'y' হল উল্লম্ব অক্ষের জন্য, '2' হল ব্যবধানের মান, পিক্সেলে নয় কিন্তু টেলউইন্ডে সংজ্ঞায়িত একটি স্কেল৷
• অনুভূমিক প্যাডিং px-4 : অনুভূমিক অক্ষের জন্য 'x' সহ উপরের মতই।
• গোলাকার কোণগুলি: rounded .

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

আপনি এই রংগুলির সাথে খুশি নাও হতে পারেন, কিন্তু ভাল খবর হল আপনি কাস্টম রং যোগ করতে পারেন। আমরা এটি পরে কভার করব।

স্কেলে একটি শব্দ

ব্যবধান (যেমন মার্জিন এবং প্যাডিং) এর ক্ষেত্রে CSS শক্তিশালী এবং আপনি পিক্সেল এবং রেমস (রুট-এম, রুট উপাদানের আকারের সাথে সম্পর্কিত একটি আকার) নিয়ে কাজ করতে পারেন। এই কঠিন হতে থাকে, যদিও. টেলউইন্ড তার নিজস্ব স্পেসিং স্কেল নিয়ে আসে যা জটিলতা লুকিয়ে রাখে পাশাপাশি সমানুপাতিকতায় সাহায্য করে।

ডিফল্টরূপে, Tailwind 0 এবং 96-এর মধ্যে মান অফার করে, প্রতিটি ধাপ অন্যদের সমানুপাতিক। উদাহরণস্বরূপ, মান 16 8 এর চেয়ে দ্বিগুণ ব্যবধান রয়েছে . এর জন্য ধন্যবাদ, আমাদের রেমস বা পিক্সেলের সাথে কাজ করার জন্য গণিত করতে হবে না। আমরা আমাদের পছন্দের মানগুলিকে সংজ্ঞায়িত করতে পারি এবং আমাদের ডিজাইন জুড়ে সেগুলি পুনরায় ব্যবহার করতে পারি৷

Tailwind CSS এর ডকুমেন্টেশনে স্পেসিং সম্পর্কে আরও পড়ুন।

রেল পরিবেশে রুবিতে টেলউইন্ড সেট আপ করা

Ruby on Rails 7.x সরাসরি তার অ্যাপ্লিকেশন জেনারেটরে Tailwind সমর্থন করে।

এই নিবন্ধে অপ্রয়োজনীয় জটিলতা এড়াতে আমরা পরীক্ষা কনফিগারেশন (-T) এড়িয়ে যাব।

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

এটি ঘটানোর জন্য আপনাকে একটি সামান্য ইউটিলিটি চালানো দরকার। ডেভেলপমেন্ট মোডে, আপনি একটি প্রহরী ডেমন চালাতে পারেন যা আপনার কাজ করার সময় জিনিসগুলি আপ টু ডেট রাখবে:bin/rails tailwindcss:watch .

আপনি আপনার Procfile এ প্রহরী ডেমন যোগ করতে পারেন , তারপর foreman ব্যবহার করুন অথবা overmind web শুরু করতে এবং css প্রক্রিয়া:

এখন একটি সাধারণ ল্যান্ডিং পৃষ্ঠার মধ্যে এটি ব্যবহার করা যাক:

তারপর আমরা http://localhost:3000/landing/index.

আমাদের ল্যান্ডিং পৃষ্ঠা বিচ্ছিন্ন করা

প্রতিটি ল্যান্ডিং পৃষ্ঠার একটি শিরোনাম প্রয়োজন। জেনারেটরটি কাজ করে যেহেতু আমরা আমাদের অ্যাপ্লিকেশনটিকে টেলউইন্ড এর CSS ফ্রেমওয়ার্ক হিসাবে ব্যবহার করার জন্য কনফিগার করেছি৷

আমরা এখানে স্ট্যান্ডার্ড HTML এর মতো দেখতে এমন কিছু খুঁজে পাই। h1 ট্যাগের জন্য আমাদের মাত্র দুটি ক্লাস আছে:

• font-bold :ফন্টের ওজন নিয়ন্ত্রণ করতে।
• text-4xl :ফন্ট সাইজ নিয়ন্ত্রণ করতে।

যদি আমরা text-4xl পরিবর্তন করি text-xl এ এবং পৃষ্ঠা পুনরায় লোড করুন, নতুন শৈলী স্বয়ংক্রিয়ভাবে প্রয়োগ করা হবে। যে টার্মিনালটিতে ফোরম্যান চলছে, আপনি দেখতে পাবেন যে টেলউইন্ড আবার ব্যাকগ্রাউন্ডে একটি স্টাইলশীট তৈরি করেছে৷ টেইলউইন্ডকে একটি রুবি অন রেইলস অ্যাপ্লিকেশানে একীভূত করা কতটা সহজ (এটি tailwindcss-রেল মণির উপর নির্ভর করে)৷

রুবি অন রেলের জন্য Tailwind কনফিগার করা

আপনি config/tailwind.config.js সম্পাদনা করতে পারেন Tailwind এর সেটিংস সামঞ্জস্য করার জন্য ফাইল (যেমন, অতিরিক্ত রং যোগ করতে, ব্যবহার করার জন্য একটি ফন্ট নির্দিষ্ট করুন, ব্যবধান সামঞ্জস্য করুন, ইত্যাদি)।

উদাহরণস্বরূপ, আমরা আমাদের ব্যাকগ্রাউন্ড এবং পাঠ্যে একটি "তামা" রঙ যোগ করতে পারি:

মনে রাখবেন যে শেডগুলি সহায়ক কিন্তু পরিবর্তে নাম দেওয়া যেতে পারে। যদি আমাদের শুধুমাত্র তিনটি শেডের প্রয়োজন হয়, উদাহরণস্বরূপ, আমরা আমাদের দৃষ্টিভঙ্গিতে সংখ্যার পরিবর্তে 'আলো', 'মাঝারি' এবং 'অন্ধকার' ব্যবহার করতে পারি।

তারপরে আমরা আমাদের শিরোনামে শেডগুলি ব্যবহার করতে পারি:

আপনি tailwindcss-rails রত্ন এর README এবং এছাড়াও Tailwind CSS ডকুমেন্টেশনে এই সম্পর্কে বিস্তারিত জানতে পারেন।

সম্পদ পাইপলাইন

আমরা দেখেছি কিভাবে bin/rails tailwindcss:watch স্থানীয় উন্নয়ন মোডে আমাদের স্টাইলশীট আপডেট রাখে। আমাদের যদি একবার স্টাইলশীট তৈরি করতে হয়, আমরা bin/rails tailwindcss:build ব্যবহার করতে পারি পরিবর্তে।

উৎপাদন ব্যবহারের জন্য, আপনি bin/rails assets:precompile এর উপর নির্ভর করতে পারেন সরাসরি bin/rails tailwindcss:build কল করতে .

রুবি অন রেল অ্যাপ্লিকেশনের সম্পদ পাইপলাইন সম্পর্কে আরও জানুন।

অ্যাকশনে রেলের জন্য টেলউইন্ড

আসুন কিছু দৃশ্যে টেইলউইন্ডের কয়েকটি ব্যবহারিক ব্যবহার পরীক্ষা করে দেখি:একটি ফর্ম এবং একটি প্রতিক্রিয়াশীল নেভিগেশন বার৷

একটি সহজ ফর্ম

Ruby on Rails জেনারেটর ব্যবহার করে, আমরা একটি user তৈরি করি সম্পদ:

তারপর আমরা users_controller.rb পরিবর্তন করতে পারি ফাইল করুন এবং ফর্মের জন্য একটি দৃশ্য তৈরি করুন।

আমরা প্রতিটি টুকরোকে পৃথকভাবে স্টাইল করি, পাঠ্যের রঙ, পটভূমির রঙ, সীমানা, প্যাডিং, মার্জিন ইত্যাদি সামঞ্জস্য করে। এখানে স্ট্যান্ডার্ড টেলউইন্ডের বাইরে কিছুই নেই, তবুও আমরা আমাদের প্রয়োজন অনুসারে ফর্মটি কাস্টমাইজ করি।

একটি প্রতিক্রিয়াশীল নেভিগেশন বার

আমরা Tailwind-এ যেকোনো ইউটিলিটি ক্লাস ব্যবহার করে ব্রাউজারের ন্যূনতম প্রস্থের উপর ভিত্তি করে শর্তসাপেক্ষ ব্রেকপয়েন্ট যোগ করতে পারি। উদাহরণস্বরূপ, নীচের শিরোনামটি উইন্ডোর আকারের উপর নির্ভর করে রঙ পরিবর্তন করবে:

ডিফল্টরূপে, রঙটি ধূসর একটি গাঢ় ছায়া। যখন একটি ব্রাউজার উইন্ডোর প্রস্থ 640px এবং 1024px এর মধ্যে হয়, তখন এটি টিলের ছায়া। যদি একটি উইন্ডোর প্রস্থ 1024px এর উপরে হয়, তবে এটি বেগুনি রঙের একটি ছায়া।

যেহেতু টেইলউইন্ড কলামগুলিও পরিচালনা করতে পারে, তাই উইন্ডোর আকারের উপর ভিত্তি করে একটি উপাদানের কলামের প্রস্থ কীভাবে পরিবর্তিত হতে পারে তা দেখানোর জন্য এখানে একটি উদাহরণ দেওয়া হল:

এই ক্ষেত্রে "রাষ্ট্র" লেবেলটি দুই বা তিনটি কলামে বিস্তৃত।

এখানে, Tailwind-এর গ্রিড লেআউট ইউটিলিটি ব্যবহার করে, আমরা একটি গ্রিড সংজ্ঞায়িত করি যা হল:

• ডিফল্টভাবে একটি কলাম প্রশস্ত (grid-cols-1 )
• 640px প্রস্থের উপরে ছয়টি কলাম প্রস্থ
• ৭৬৮px প্রস্থের উপরে আটটি কলাম প্রস্থ

ব্রেকপয়েন্ট এবং তাদের প্রস্থ:

• sm :640px
• md :768px
• lg :1024px
• xl :1280px
• 2xl :1536px

যেমনটি আমরা দেখেছি, টেলউইন্ড পৃষ্ঠার নকশা এবং উপাদানগুলির স্টাইলিংকে সহজ করে তোলে৷

টেইলউইন্ড বনাম অন্যান্য ফ্রেমওয়ার্ক

এখন যেহেতু আমরা বুঝতে পেরেছি কিভাবে Tailwind ব্যবহার করা যেতে পারে, আসুন অন্যান্য কাঠামোর সাথে এর মূল পার্থক্যগুলি পর্যালোচনা করি:

• ইউটিলিটি-ভিত্তিক: আমরা নির্দিষ্ট CSS ক্লাস ব্যবহার করে প্রতিটি উপাদানের শৈলী রচনা করি, প্রতিটি শৈলীর বিভিন্ন অংশের উপর ফোকাস করে।
• আমাদের যা প্রয়োজন তা পান: আমরা কেবলমাত্র আমাদের ওয়েবসাইট শিপ করার জন্য প্রয়োজনীয় অংশগুলি পাই, দ্রুত লোড সময়ের জন্য তৈরি; যা বিল্ড টাইম অপ্টিমাইজ করে।
• এক্সটেনসিবল: আমরা একটি সাধারণ কনফিগারেশন ফাইলের মাধ্যমে TailwindCSS এর ডিফল্টগুলি প্রসারিত বা কাস্টমাইজ করতে পারি৷
• রঙের সহজ ছায়া: হভার পরিস্থিতিগুলি পরিচালনা করার জন্য একটি রঙের হালকা বা গাঢ় শেডগুলি কীভাবে তৈরি করা যায় তা বোঝার দরকার নেই, উদাহরণস্বরূপ।
• সরল ব্যবধান: লুকানো এবং আনুপাতিক স্কেলগুলি ব্যবধানকে সরল করে।
• কম কাস্টম CSS: যেহেতু আমরা শুধুমাত্র স্টাইল উপাদানের জন্য ক্লাস একত্রিত করি, তাই আমরা কাস্টম CSS-এর উপর কম নির্ভর করি এবং HTML ফাইল এবং স্নিপেট ব্যবহার করে শৈলী (সম্পূর্ণ থিম সহ) শেয়ার করতে পারি।
• রুবি অন রেল বন্ধুত্বপূর্ণ: Tailwind রত্নকে ধন্যবাদ, সবকিছু লেআউট এবং সম্পদ পাইপলাইনে একত্রিত হয়েছে।

র্যাপিং আপ

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

আপনি যদি আরও জানতে চান, আপনি ব্যবহার করার জন্য অনেক রেডি-টু-টেমপ্লেট এবং উপাদান অ্যাক্সেস করতে পারেন Tailwind-এর প্রাণবন্ত সম্প্রদায়, এবং পণ্য যেমন TailwindUI (Tailwind-এর নির্মাতাদের থেকে)।

শুভ কোডিং!

পি.এস. আপনি যদি রুবি ম্যাজিক পোস্টগুলি প্রেস থেকে বের হওয়ার সাথে সাথে পড়তে চান তবে আমাদের রুবি ম্যাজিক নিউজলেটারে সাবস্ক্রাইব করুন এবং একটি পোস্ট মিস করবেন না!

থমাস রিবোলেট

আমাদের অতিথি লেখক টমাস ফ্রান্সে অবস্থিত একজন পরামর্শক ব্যাকএন্ড এবং ক্লাউড অবকাঠামো প্রকৌশলী। 13 বছরেরও বেশি সময় ধরে, তিনি স্টার্টআপ এবং কোম্পানিগুলির সাথে তাদের দল, পণ্য এবং অবকাঠামো স্কেল করার জন্য কাজ করেছেন। এছাড়াও তিনি ফ্রান্সের GNU/Linux ম্যাগাজিনে এবং তার ব্লগে বেশ কয়েকবার প্রকাশিত হয়েছেন।

টমাস রিবোলেটের সমস্ত নিবন্ধ