Ruby on Rails প্রজেক্টে Tailwind CSS সহজে ইন্টিগ্রেট করুন

সभी ওয়েবসাইটের জন্য ক্যাসকেডিং স্টাইল শিট (CSS)-এর গুরুত্ব বর্ণনার বাইরে। ১৯৯৬ সালের শেষে প্রথম CSS স্ট্যান্ডার্ড প্রকাশিত হয়ে আজ আমরা ফিচার ও ইকোসিস্টেমে অনেক দূর এসেছি।

অনেক ফ্রেমওয়ার্ক এলো এবং জনপ্রিয় হয়েছে, 그중 সবচেয়ে সাম্প্রতিক একটি হল Tailwind CSS।

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

Tailwind CSS: Utility-First পদ্ধতি

বেশিরভাগ CSS ফ্রেমওয়ার্ক (Foundation, Bootstrap, Bulma) রেডি-টু-ইউজ কম্পোনেন্ট (বাটন, ফর্ম ফিল্ড) দিয়ে থাকে যাতে দ্রুত ইন্টারফেস গড়ে তোলা যায়।

Bootstrap-এ একটি বাটন যোগ করা সাধারণত এইরকম:

<button class="btn btn-primary">Click me</button>

এখানে btn এবং btn-primary ক্লাস ব্যবহার করা হয়েছে। কিন্তু কাস্টমাইজ করতে হলে আলাদা CSS ফাইল লিখতে হয়।

Tailwind আলাদা। এটি "utility-first" কনসেপ্ট। রেডি কম্পোনেন্ট না দিয়ে এটি নিম্ন-স্তরের ইউটিলিটি ক্লাস দিয়ে থাকে যা কম্পোজ করে কাস্টম ডিজাইন তৈরি করা যায়। এটি ফাংশনাল স্টাইলিং підхода উৎসাহিত করে — HTML-এ সরাসরি প্রি-ডিফাইনড ক্লাস অ্যাপ্লাই করুন। কাস্টম CSS-এর প্রয়োজন কমায় এবং ডিজাইন কনসিস্টেন্সি বজায় রাখে।

Tailwind vs Bootstrap: একটি বাটন উদাহরণ

Tailwind-এ একটি সিম্পল বাটন স্টাইল করা:

<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">
  Click me
</button>

এখানে প্রতিটি ক্লাসের অর্থ:

• bg-blue-500: ব্লু রঙের ব্যাকগ্রাউন্ড (নাম্বার যত বড়, রঙ তত গাঢ়)
• hover:bg-blue-600: হোভারের সময় গাঢ় ব্লু
• text-white: সাদা টেক্সট রঙ
• py-2: ভার্টিক্যাল প্যাডিং (y-অক্ষ, স্কেল ২)
• px-4: হরিজন্টাল প্যাডিং (x-অক্ষ, স্কেল ৪)
• rounded: কোণা রাউন্ডেড

এটি Bootstrap-এর চেয়ে বেশি verbose লাগতে পারে, কিন্তু প্রতিটি স্টাইল পার্ট আলাদা কন্ট্রোল করা যায়। কাস্টম CSS ক্লাস লিখতে হয় না। রঙ পছন্দ না হলে কাস্টম রঙ যোগ করা যায় (নিচে দেখানো হয়েছে)।

স্পেসিং স্কেল সম্পর্কে একটি কথা

CSS-এ স্পেসিং (মার্জিন, প্যাডিং) কাজ করা জটিল। Tailwind নিজস্ব স্পেসিং স্কেল দিয়ে থাকে যা জটিলতা লুকিয়ে রাখে এবং অনুপাতিকতা বজায় রাখে। ডিফল্টলি ০ থেকে ৯৬ পর্যন্ত ভ্যালু থাকে, যেখানে প্রতিটি ধাপ অন্যটির চেয়ে অনুপাতিক। উদাহরণস্বরূপ, 16-এর স্পেসিং 8-এর দ্বিগুণ। আমরা পিক্সেল বা rem-এ গণনা ছাড়াই ডিজাইন করতে পারি।

Ruby on Rails এনভায়রনমেন্টে Tailwind সেটআপ

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

$ rails new myapp --css tailwind

Tailwind একটি চমৎকার ফিচার দিয়ে থাকে: এটি আপনার প্রজেক্ট স্ক্যান করে শুধু প্রয়োজনীয় ক্লাসগুলো ধারণকারী CSS ফাইল জেনারেট করে। অন্যান্য ফ্রেমওয়ার্কের মতো পুরো ফ্রেমওয়ার্কের CSS ইনক্লুড করতে হয় না।

ডেভেলপমেন্ট মোডে একটি ওয়াচার ডিমন চালাতে পারেন যা পরিবর্তনগুলোর সাথে সাথে আপডেট রাখে:

bin/rails tailwindcss:watch

এছাড়া Procfile-এ ওয়াচার ডিমন যোগ করে foreman বা overmind দিয়ে web এবং css প্রসেস চালাতে পারেন।

একটি সিম্পল ল্যান্ডিং পেজ তৈরি

এখন একটি সিম্পল ল্যান্ডিং পেজ তৈরি করি। https://localhost:3000/landing/index-এ যেতে পারেন।

ল্যান্ডিং পেজ বিশ্লেষণ

h1 ট্যাগে শুধু দুটি ক্লাস:

• font-bold: ফন্ট ওয়েইট কন্ট্রোল
• text-4xl: ফন্ট সাইজ কন্ট্রোল

text-4xl-কে text-xl করলে রিলোড করলে স্টাইল আটোমেটিক্যালি আপডেট হয়। টার্মিনালে দেখবেন Tailwind পুনরায় স্টাইলশিট জেনারেট করেছে। এতটাই সহজে Rails-এ Tailwind ইন্টিগ্রেট করা যায় (tailwindcss-rails gem-এর মাধ্যমে)।

Tailwind কনফিগারেশন

config/tailwind.config.js ফাইল এডিট করে Tailwind-এর সেটিংস সমন্বয় করতে পারেন (অতিরিক্ত রঙ, ফন্ট, স্পেসিং ইত্যাদি)।

উদাহরণস্বরূপ, "copper" রঙ যোগ করা:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        copper: {
          light: '#f5c6a5',
          DEFAULT: '#d9895b',
          dark: '#b8704a',
        },
      },
    },
  },
}

শেডস নাম্বারের বদলে 'light', 'medium', 'dark' নামও ব্যবহার করা যায়। টাইটেলে ব্যবহার:

<h1 class="font-bold text-4xl bg-copper-dark text-copper-light">Welcome</h1>

Asset Pipeline

• ডেভেলপমেন্টে: bin/rails tailwindcss:watch
• वन-টাইম বিল্ড: bin/rails tailwindcss:build
• প্রোডাকশনে: bin/rails assets:precompile (যা tailwindcss:build কল করে)

Rails-এ Tailwind বাস্তব ব্যবহার

একটি সিম্পল ফর্ম

Rails জেনারেটর দিয়ে user রিসোর্স তৈরি করুন। তারপর users_controller.rb এবং ফর্ম ভিউতে Tailwind ক্লাস দিয়ে স্টাইল করুন — টেক্সট রঙ, ব্যাকগ্রাউন্ড, বর্ডার, প্যাডিং, মার্জিন ইত্যাদি আলাদা আলাদা কন্ট্রোল করে।

রেসপন্সিভ নেভিগেশন বার

Tailwind-এ ব্রাউজারের মিনিমাম উইডথের ভিত্তিতে কন্ডিশনাল ব্রেকপয়েন্ট ব্যবহার করা যায়। উদাহরণ:

<h1 class="text-gray-800 sm:text-teal-500 lg:text-purple-600">Responsive Title</h1>

• ডিফল্ট: ডার্ক গ্রে
• ৬৪০px–১০২৪px: টিল
• ১০২৪px+: পার্পল

Grid লেআউট ইউটিলিটিতে কলাম ওইডথ পরিবর্তন:

<div class="grid grid-cols-1 sm:grid-cols-6 md:grid-cols-8">...</div>

ব্রেকপয়েন্ট ওওইডথ:

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

Tailwind vs অন্যান্য ফ্রেমওয়ার্ক

• Utility-based: প্রতিটি এলিমেন্টের স্টাইল স্পেসিফিক CSS ক্লাস কম্পোজ করে তৈরি
• প্রয়োজনীয় অংশই পাওয়া যায়: শুধু প্রয়োজনীয় CSS শিপ হয়, ফাস্ট লোড টাইম
• Extensible: কনফিগ ফাইল দিয়ে ডিফল্ট কাস্টমাইজ/এক্সটেন্ড করা যায়
• রঙের শেডিং সহজ: হোভার için হালকা/গাঢ় শেড বানানো সহজ
• সিম্পল স্পেসিং: লুকানো অনুপাতিক স্কেল স্পেসিং সহজ করে দেয়
• কম কাস্টম CSS: ক্লাস অ্যাসেম্বল করে স্টাইলিং, HTML স্নিপেট দিয়ে থিম শেয়ার করা যায়
• Rails-বান্ধব: Tailwind gem-এর মাধ্যরictে লেআউট ও অ্যাসেট পাইপলাইনে ইন্টিগ্রেটেড

উপসংহার

Tailwind-এর utility-first পদ্ধতি Ruby on Rails-এর জন্য চমৎকার ফিট। জটিল কাস্টম কনফিগারেশন বা অতিরিক্ত কাস্টম CSS ছাড়া ভিউ এবং পার্শিয়াল ধারণা ও স্টাইল করা যায়। Tailwind-এর বিস্তৃত কমিউনিটি এবং TailwindUI-এর মত প্রোডাক্ট থেকে রেডি-টু-ইউজ টেমপ্লেট ও কম্পোনেন্ট পাওয়া যায়।

Happy coding!

P.S. Ruby Magic পোস্টগুলি প্রকাশ होते সাথে সাথে পেতে আমাদের Ruby Magic নিউজলেটার সাবস্ক্রাইব করুন!

Thomas Riboulet

আমাদের অতিথি লেখক Thomas ফ্রান্সে অবস্থিত একজন কনসালট্যান্ট ব্যাকএন্ড ও ক্লাউড ইন্ফ্রাস্ট্রাকচার ইঞ্জিনিয়ার। ১৩ বছরের বেশি সময় স্টার্টআপ এবং কোম্পানিগুলোর টিম, প্রোডাক্ট এবং ইন্ফ্রাস্ট্রাকচার স্কেল করতে সাহায্য করেছেন। ফ্রান্সের GNU/Linux ম্যাগাজিনে এবং নিজের ব্লগে অনেকবার প্রকাশিত হয়েছেন।

Thomas Riboulet-এর সব আর্টিকেল